Tinymce view mode switches after init

StackOverflow https://stackoverflow.com//questions/25054335

Question

My editor is tinymce4+. It works greatly in most parts.

But no matter what I do, there's something I just can't do. - switching editor mode instantly. -

I have a page that users can select a data and edit it and view the content. Users click on a button named " viewmode ", the other flipside is " editmode "

I achieved this by putting two DIVs in a same container, making one of them invisible by the start-look-settings users have choosen. One DIV has tinymce editor, the iframe tag, and another one has just a bunch of html values that the editor is holding. But the side effect of this is that the content style could look different, depending on its style attributes.

This web application I'm talking about now is an existing system that has its own CSSs. It's so complicated that once you get to look at it, you might want to run away from it.

So I would like to avoid this CSS discrepancy by making editor dynamically switchable to both ways.

Loading multiple tinymce objects is the last thing I need here.

I can make editor disable by setting up an attribute - contenteditable = false - But then the toolbar elements become bad boys here. because they still work. I hide the toolbar itself to complete this mission.

But you know, my client hated it and insisted me that the editor should provide a print button in its viewmode. This is frustrating.

So, if you could just give me an idea of how to manipulate the elements of toolbar, then I think I can manage to solve this issue.

If it's too difficult, attaching the print event listener to an external element could be also the second best option for me. Because from that moment on, I just throw the toolbar away and make a print icon on the top of the editor and attach the event to it.

Sorry for typing all the plain texts. But issue like this requires no codes I think. Hope some tinymce guru stop by and help me out.

Was it helpful?

Solution

Finally, I made my editor switchable.

First step is to hide all the elements in the toolbar of tinyMCE.

tinyMCE toolbars have a specific class name so they are selectable with jQuery class selector. But selecting with class name alone causes getting unwanted toolbars as well, so you have to be careful with this.

FYI .eq() API might help you.

after hiding all the elements in the toolbar, ( don't hide toolbar by the way. ) do this.

tinymce.ui.Factory.create({
    type: 'button',
    cmd: 'mcePrint',
    icon: 'print',
    shortcut: 'Ctrl+P',
    class : 'temp'
}).renderTo(appendTarget);

This is going to add a button element into the toolbar.

But somehow it doesn't invoke the command I defined in cmd's value.

So attaching this event to the button manually will be required.

tinymce.activeEditor.execCommand('mcePrint');

So far I created a custom-toolbar for view-mode editor. Now it's time to freeze the edior's actual content field.

It's very easy after getting iframe contents as jQuery object.

.contents() API should help you.

after that, you can select <BODY> element on your side, so the last thing left to do is to give 'contenteditable=false' attribute and value to the body tag.

Then your editor freezes.

Going back to the edit mode is easy too. Just do the backwards.

Invoke these events when you click on your own "switch" button. Then you can toggle your editor from view-mode to edit-mode ( and the oppsite way as well ).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top