tinymce4 old-scool-toolbar

Erweiterungen
Post Reply
hbirch
Posts: 3
Joined: Fri 6. Mar 2015, 19:51

tinymce4 old-scool-toolbar

Post by hbirch »

I have been using CMSimple a very long time (since the days of Peter Harteg), and I really misses the look of his editor (OEdit). Of course is it not useful in today's websites, but I have created an alternative, that is useful, at least for me.
First: I created a plugin in TinyMCE4, called stylebuttons: (I found this on the web):
TinyMCE formatting toolbar buttons


There's this WSIWYG editor called wysihtml5 that looks very nice. Unfortunatelly there's no table support so TinyMCE could be one of the alternative. I really like having buttons for each type of heading - less clicking to format the text. Unfortunatewlly in TinyMCE you have to deal with submenus for formatting. I would rather have plain toolbar buttons.

As you can see here the documentation is not very helpful on how to do it so I'd rather share the solution. Here's a plugin for having the formatting as plain toolbar buttons, just like in wysihtml5:

tinyMCE.PluginManager.add('stylebuttons', function(editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function(name){
editor.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function() { editor.execCommand('mceToggleFormat', false, name); },
onPostRender: function() {
var self = this, setup = function() {
editor.formatter.formatChanged(name, function(state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});

Now just add stylebuttons to your plugin list and any of style-p, style-h1, style-h2, style-h3, style-pre, style-code to your toolbar list. Eg:

tinyMCE.init({
selector: '#id',
toolbar: "undo redo | style-p style-h1 style-h2 style-h3 style-pre style-code",
plugins: "stylebuttons",
});
Then I edited the init_full.js, and replaced the toolbar section with this:
toolbar1: "save | selectall | cut | copy | paste | undo | redo | code | alignleft | aligncenter | alignright | hr | image | link | unlink | charmap |",
toolbar2: " | style-h1 | style-h2 | style-h3 | style-h4 | style-p | bold | italic | underline | removeformat | bullist | numlist | subscript | superscript | outdent | indent | ",
and saved it under another name

and now I have a very neat editor, that looks like this:
http://birch-web.dk/Files/tinymce/screendump.png

The finished toolbar can be downloaded from here: http://birch-web.dk/Files/tinymce/Stylebuttons.7z Just extract the archive at the root of your site, and change tinymce's toolbar to "CMSimple" .

The only thing I miss is to figure out, is how to put text or symbol in the "select all" button

Regards
Henrik Birch
Gert
Posts: 2076
Joined: Sun 18. Nov 2012, 14:18

Re: tinymce4 old-scool-toolbar

Post by Gert »

Hi Henrik,

I'm really glad to see one with a SOLUTION, and not with a problem or a question ;)

Welcome to the new CMSimple - Gert

PS: The most downloads for CMSimple (I think: all) are available as .zip file, I think this would be the recommended format for CMSimple addons, because the users are accustomed that.
Gert Ebersbach | CMSimple | Templates - Plugins - Services
hbirch
Posts: 3
Joined: Fri 6. Mar 2015, 19:51

Re: tinymce4 old-scool-toolbar

Post by hbirch »

Of-course - just a lapse from my side. I am so used to right-click in 7-zip - just forgot to choose the right archive-type.
Here it is:
http://birch-web.dk/Files/tinymce/stylebuttons.zip

Regards
Henrik Birch
Post Reply