Enable Text Color plugin of Tinymce in Toolbar of Visual Editor

Question

How can i Enable the Text Color plugin of Tinymce in Toolbar of Visual Editor ?

I was able to enable the print, search and replace plugins inside the Visual Editor by editing this file

Composite/content/misc/editors/visualeditor/includes/toolbarsimple.inc

and

modifying a line in below file to include the searchreplace, print plugins

Composite/content/misc/editors/visualeditor/visualeditor.js

plugins: "compositelink,compositetable,compositeimage,compositerendering,compositecharmap,compositefield,compositetext,paste,lists,searchreplace,print",

Similarly is there any way to enable the inbuild feature of Tinymce namely Text Color, Font Size, Font Family, Table, Row, Column in the toolbar of the Visual Editor without making the changes through styles which is done by editing this file

Frontend/Config/VisualEditor/common.xml

Thanks Ajith

score 7 · Accepted Answer · answered Jun 23 '12 at 12:53

Managed to get the Text Color, Background Color, Font Family, Font Size up and running inside the Composite C1 editor.

Listing down the steps below for the benefit of others.

Copy all the files and folder from Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\advanced except editor_template.js and editor_template_src.js into your Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite folder.
Edit the file Website\Composite\content\misc\editors\visualeditor\visualeditor.js and include the below lines in the config section.
```
skin: 'default',
theme_advanced_buttons1: "forecolor,backcolor,fontselect,fontsizeselect",
theme_advanced_buttons2: "",
```
For a complete list of options visit the TinyMCE link and go to View Source.

You might also want to inclue inlinepopups in the plugins: line for proper rendering of the popups. Any additional plugins like insertdatetime, media, print,searchreplace, etc can also be included in the same line.

To include the plugins like insertdatetime, media, print, searchreplace in existing toolbar row, edit the Website\Composite\content\misc\editors\visualeditor\includes\toolbarsimple.inc file and include the respective tags containing the commands. For eg.

<ui:toolbargroup>
    <ui:toolbarbutton cmd="mceSearch" tooltip="Search" image="${skin}/wysiwygeditor/search.png" isdisabled="false" />
    <ui:toolbarbutton cmd="mceReplace" tooltip="Replace" image="${skin}/wysiwygeditor/replace.png" isdisabled="false" />
</ui:toolbargroup>

Copy and merge the code from the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\advanced\editor_template_src.js file into the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite\editor_template.js file. Most of the functions can be copied over as it is. Only the common ones like renderUI need special attention. I directly gave a call to the simpleLayout function instead of using a switch in the renderUI
```
ic = t._simpleLayout(s, tb, o, p);
```
There could be some issue with not being able to see the entire content in the editor for large content, to fix this issue edit the Website\Composite\content\misc\editors\visualeditor\tiny_mce\themes\composite\skins\default\ui.css file and modify the .defaultSkin iframe css to specify proper height or overflow scroll.

To include more features to your toolbar, just edit theme_advanced_buttons1.

Good Luck..

Ajith

score 0 · Answer 2 · answered Jun 01 '12 at 07:08

With Composite C1 you need to do styling (like font face, font size, colors and table related styles) using CSS classes and make these classes available to end-users.

The front-end developer define classes needed in CSS and then register them in the toolbar configuration file from where the end-user can select the styles. Composite C1 does not promote having font tags or style attributes in the content html, so if that is what you really want you need to make changes to the core javascript.

You can read about customizing the Visual Editor toolbar here http://docs.composite.net/Console/CustomizingVisualEditor.

Thanks for the reply. Yes, enabling the font/color plugin in Tinymce of Visual editor is exactly what i need. Although doing this by adding css classes works, it clutters the toolbar with lot of items if you require to use inline styles. I found the font/color plugin a more user friendly tool to use instead. Can you please give me a hint as to which core javascript files need to be changed and what those changes should be ? — ajith c, Jun 12 '12 at 01:40

Enable Text Color plugin of Tinymce in Toolbar of Visual Editor

2 Answers2