Welcome to Our Community

Registration on our forums are now open for some days! Feel free to sign up today.

CodeMirror code editor for admin CP HTML/CSS inputs 1.0.1

Replaces editor with CodeMirror for templates, template mods, notices bb code

  1. XenForo Rocks
    Compatible XF Versions:
    • 1.5
    Visible Branding:
    Product places a CodeMirror editor with toolbars in admin CP pages with HTML/CSS inputs. Active in Template Edit and Template Create pages (forum and admin), Template Modifications (forum and admin), Notices and BB Code.

    • Fully phrased
    • Shows read-only version for the original template in Template Modifications
    • All versions expand to full size
    • All features available in full size versions
    • Template names and phrase names are prefixed with "tce_"
    • Uses the latest version of CodeMirror (5.9.1)
    CodeMirror is an ongoing project by Marijn Haverbeke and others. It has many more features than those described here.

    CodeMirror toolbars is a CodeMirror extension I created.

    • search and replace
      • expandable input fields
      • regular expression searching
      • replace all
    • highlight matching (finds matches for selected code/text)
    • undo/redo
    • font size selection
    • mode selection (CSS, HTML, JavaScript, PHP, SQL)
    • position (line, character)
    • go to line
    • tab size
    • tabs or spaces
    • drag and drop
    • automatic indent
    • formatting of minified code
    • line wrapping
    • code collapsing (click in the line numbers column in two locations and the code between collapses.)
    Toolbars uses XenForo admin CP colors and other style features. If you want to change anything see template tce_codemirror_toolbar.css. Don't mess with the css files in the CodeMirror file group. To try different settings see the "options" in js/nerbert/codemirror_init.js.

    Known bugs:
    • CodeMirror sometimes does not show the last few characters of the longest line. I cannot consistently reproduce this problem and I'm not competent to fix it. Use line wrapping to view the last few characters and place a few blank spaces at the end if you are going to modify the template anyway
    • The CodeMirror syntax highlighting is not designed to handle XenForo template syntax. Under some conditions HTML tags show bright red to indicate mismatching. This can be caused by unclosed elements within a template conditional.
    • Formatting (CodeMirror-5.9/addon/misc/formatting.js) is my best effort to uncompress minified files. It doesn't always work. If you format a file, save it only at your own risk!
    • Drag and drop does not auto-scroll. Use code collapsing to place origin and destination locations near each other.

    Upload the provided files to your form root folder and upload the product XML file in your admin CP. There is no control panel for this product
  • About Us

    Our community has been around for many years and pride ourselves on offering unbiased, critical discussion among people of all different backgrounds. We are working every day to make sure our community is one of the best.
  • Like us on Facebook

  • Buy us a beer!

    The management works very hard to make sure the community is running the best software, best designs, and all the other bells and whistles. Care to buy us a beer? We'd really appreciate it!

    Donate to us!