Adding Font Color Selector

The Visual Editor is customizable and can be extended with more formatting and styling commands via CSS classes.

In some cases, you may want to add some more functionality by directly editing the files behind the Visual Editor: like in the example below where we add a font color selector and other selectors to a new Visual Editor's toolbar by adding a few files and editing visualeditor.js.

Important. The following example may stop working as soon as you upgrade C1 CMS to a newer version. We thus recommend that you customize the Visual Editor in a regular way via classes.

To add a font color selector, a font selector, and a font size selector to the Visual Editor:

  1. Download and unpack the latest tinymce distributive from http://www.tinymce.com/download/download.php.
  2. Copy and replace the corresponding files and folders on the website with the following files and folders from the unpacked distributive:
    1. [tinymce zip]\tinymce\js\tinymce\tinymce.min.js > ~\Composite\content\misc\editors\visualeditor\tinymce\tinymce.min.js
    2. [tinymce zip]\tinymce\js\tinymce\skins\ > ~\Composite\content\misc\editors\visualeditor\tinymce\skins\
  3. Copy the following folders from the unpacked distributive to the website:
    1. [tinymce zip]\tinymce\js\tinymce\plugins\colorpicker\ > ~\Composite\content\misc\editors\visualeditor\tinymce\plugins\colorpicker\
    2. [tinymce zip]\tinymce\js\tinymce\plugins\textcolor\ > ~\Composite\content\misc\editors\visualeditor\tinymce\plugins\textcolor\
  4. Download and unpack toolbar.zip.
  5. Copy the folder \toolbar\ from the unpacked toolbar.zip to ~\Composite\content\misc\editors\visualeditor\tinymce\plugins\toolbar\
  6. Edit ~\Composite\content\misc\editors\visualeditor\visualeditor.js.Add
  7. Add " textcolor,colorpicker,toolbar" to the end of the following line:
    plugins: "autolink,composite,compositelink,table,compositetable,compositeimage,compositerendering,compositecharmap,compositefield,compositetext,compositespellcheck,compositeimageresize,paste,lists",
    so that it would read: 
    plugins: "autolink,composite,compositelink,table,compositetable,compositeimage,compositerendering,compositecharmap,compositefield,compositetext,compositespellcheck,compositeimageresize,paste,lists,textcolor,colorpicker,toolbar",

You may want to clear the browser cache and re-open a page in the editor.

Now a new toolbar will appear in Visual Editor with four new selectors:

  • a font color selector,
  • a background color selector,
  • a font selector,
  • and a font size selector.