How to use customized tool bar in tiny mce?

Question

Hi All,

I'm using tiny mce in one of my projects and client do not want to use the Horizontal tool bar of tiny mce. He wants a centralized custom tool bar from where user can control all the properties like text color, type of text, size, back grounds and every thing that is needed to do while designing a web page using templates. I configured the mce instance with out its default tool bar and controlled the properties from the customized tool bar. And the properties are applied to the tiny mce instance as a whole. But now, the requirement has come up that, the text editing should be in MS office style.That means, if user has placed cursor at one place and changes color, nothing will be affected, but if he starts typing from the cursor position the text should have the color which was set recently. I tried to use the external tool bar option. But, my work area and customized tool bar are at different z index levels. So, positioning the tool bar fails. If I append the tool bar to my customized tool bar, it is not click-able. So, how to invoke tiny mce's core functionality using customized tool bar?

Or, Kindly suggest, should I change editor ? Then, which one should I go for ?

EDIT As per the suggestion, I'm writing the function save the property styles and insert the span at caret position. But I'm facing some problems and could not do it after spending whole day. I could add span at caret position by using following code.

 marker = ed.selection.getBookmark();
 ed.selection.moveToBookmark(marker);
 tinyMCE.execCommand('mceInsertContent',false,'<span id="mytitle"></span>');

But still, I failed to type inside the new span. Also, I could not figure out how to set styles to this span.

Answer 1

If your aim is to have your tinymce behave like MS Office you should write an own plugin which will take care of this. I suggest if a user has placed the cursor at one place and changes color you save this color as a setting to your tinymce instance like: ed.color = 'choosencolor';

When the user start typing now you can insert a span on the first keystroke and set the color as css class or style property to this span.