@elz064: Sorry, I had forgotten to subscribe to the thread, so I missed your answer. I hope I'm not too late...
Quote from: elz064 at Aug 02, 2016, 07:26 AMI have a RTE now but it does not looks like the tinymce I knew. Toolbars are black & white, icons looks like ACE.
Well, yes, it's the next major version of TinyMCE and a different theme / skin. You can use a different theme / skin, if you like, though. I'm not sure if there is still one matching the old theme (I like the new one), but maybe you can find one that matches your needs or your taste better. Some skins for TinyMCE 4 are listed at
http://archive.tinymce.com/download/plugins.php?tag=4 (just search for others using Google). You could also
create your own.
Quote from: elz064 at Aug 02, 2016, 07:26 AMObviously I have no idea about how to manage tools bars neither my OWN list of CSS STYLES I had previously within tinymce menus ( you know, the system parameters settings : editor_css_path + editor_css_selectors )
those ones are found in core/rte settings
But with the classic tinymce add-ons there was a large bunch os settings found in tinymce, with 36 différents settings.
I don't see where/how to reproduce those settings now.
The configuration might be a little bit more difficult / less comfortable (or just unfamiliar) now, but all in all you have more possibilities. Before you had a bunch of given settings (36 as you said), but now you should be able to use every single option TinyMCE itself offers.
You'll have to read a bit of documentation and maybe try some things before everything is perfect, but it's worth it.
The settings can be found (and edited) in the chunks you (hopefully) duplicated in step 3 of my little guide. If you open the chunk "TinymceWrapperContent_Custom", for example, you can edit the settings for the editor used for the content of a resource. It starts with
followed by the settings for this editor instance. You can edit these settings or delete or add some. Things you change here will only affect the editor for the content of a resource, so you can have different settings for the different editor instances.
Almost at the top of this chunk you'll find the line
Here the chunk "TinymceWrapperCommonCode_Custom" is inserted. What you change in that chunk will affect all editor instances (the ones for the resource content, for the rich-text TVs ["TinymceWrapperTVs_Custom"], for the description field ["TinymceWrapperDescription_Custom"], etc.).
Now you can begin to study the TinyMCE documentation. You can start with
Editor Appearance; here you can learn how to turn the menubar on and off or add additional toolbars, etc. You'll find the same
line there, so it shouldn't be too difficult to see what to do (I'll add the contents of two of my chunks later, so you can compare them with the default contents of the chunks).
Once you found out how to add additional toolbars, you should check which buttons to add. The documentation page
Editor Control Identifiers shows you the available button names and also which plugin is needed for each button. So you could change the toolbar configuration now from
toolbar: "preview fullscreen | twPreCodeManager code | undo redo | newdocument | blockquote | bold italic aligncenter | bullist numlist | link unlink | image | charmap emoticons insertdatetime searchreplace bubbleBarOptionsButton",
to
toolbar1: "preview fullscreen code | undo redo | pastetext | link unlink | image | table | charmap insertdatetime | searchreplace",
toolbar2: "bold italic subscript superscript | bullist numlist | styleselect | formatselect | template",
You also have to change the list of used plugins (near the top of the chunk) to
plugins: "imagetools,autoresize,preview,paste,contextmenu,image,wordcount,fullscreen,code,charmap,searchreplace,textpattern,insertdatetime,template,table",
After saving the chunk, you should now see two rows of buttons and some other options than before.
The content_css setting you asked for can also be used in the chunks, see
Content Appearance. You can add the URL of your CSS file there, just like before.
The block elements can be set via
block_formats: "Absatz=p;Überschrift 2=h2;Überschrift 3=h3;Überschrift 4=h4;Überschrift 5=h5;Überschrift 6=h6;Zusammenhängender Bereich=div;Zitatblock=blockquote",
(I'm from Germany, so I used German names). The CSS styles you mentioned can be defined this way:
style_formats: [
{
title: 'Interviews: Name',
selector: 'p', // ,div
classes: 'interviewSpeakerName'
}
],
These settings are described in
Content Formatting.
There's much more you can configure and of course corresponding documentation. I guess you'll find some interesting possibilities.
As promised, here two of my chunks:
TinymceWrapperContent_Custom
tinymce.init({
selector: "#ta",
[[+commonTinyMCECode]]
statusbar: true,
plugins: "imagetools,autoresize,preview,paste,contextmenu,image,wordcount,fullscreen,code,charmap,searchreplace,textpattern,insertdatetime,template,table",
//paste_word_valid_elements: "a,div,b,strong,i,em,h1,h2,h3,p,blockquote,ol,ul,pre",
//valid_elements: "iframe[*],object[*],audio[*],-span,a[href|target|class|rel|title|onclick],-strong,-b,-p[class<text-align-left?text-align-center?text-align-right],br,-h1,-h2,-h3,-figure,-figcaption,-img[!src|!alt],em,-blockquote,pre[class],-ol,-ul,-li,-code,hr[*]",
//valid_children: "figure[img|figcaption],-li[ul],-li[ol],-li[div],-strong[*],-em[*],-h1[*],-h2[*],-h3[*],-a[strong|em|h1|h2|h3|p|div],blockquote[p|ol|ul],pre,div",
style_formats: [
{
title: 'Interviews: Name',
selector: 'p', // ,div
classes: 'interviewSpeakerName'
}
],
block_formats: "Absatz=p;Überschrift 2=h2;Überschrift 3=h3;Überschrift 4=h4;Überschrift 5=h5;Überschrift 6=h6;Zusammenhängender Bereich=div;Zitatblock=blockquote",
// use "url" instead of "content" to insert the content of a file
templates: [
{
title: 'Bild-Container links - Bild vorher im Editor markieren!',
description: 'Container für links angeordnetes Bild mit Bildunterschrift - Bild bitte vorher im Editor markieren!',
url: '/assets/tinymce/templates/image_container_left.html'
},
{
title: 'Bild-Container rechts - Bild vorher im Editor markieren!',
description: 'Container für rechts angeordnetes Bild mit Bildunterschrift - Bild bitte vorher im Editor markieren!',
url: '/assets/tinymce/templates/image_container_right.html'
}
],
template_selected_content_classes: 'imageInnerContainer',
resize: true,
autoresize_min_height: 100,
toolbar1: "preview fullscreen code | undo redo | pastetext | link unlink | image | table | charmap insertdatetime | searchreplace",
toolbar2: "bold italic subscript superscript | bullist numlist | styleselect | formatselect | template",
contextmenu: "code | twPreCodeManager | fullscreen | removeformat | link | image",
content_css: '/assets/css/rich_text_editor/rte_styles.css',
invalid_elements: 'u',
convert_fonts_to_spans: true
});language: 'de',
language_url: MODx.config.assets_url+'components/tinymce_lang/de.js',
insertdatetime_formats: [
"%d.%m.%Y", // 24.07.2016
"%Y-%m-%d", // 2016-07-24
"%a., %d.%m.%Y", // Mo., 24.07.2016
"%a., %d. %b. %Y", // Mo., 24. Jul. 2016
"%A, %d. %B %Y", // Montag, 24. Juli 2016
"%H:%M:%S Uhr", // 17:24:57 Uhr
"%H:%M Uhr" // 17:24 Uhr
],
skin_url: MODx.config.assets_url+'components/tinymcewrapper/tinymceskins/modxPericles',
link_list:[
[[$TinymceWrapperLinkList]]
],
relative_urls: false,
remove_script_host: false,
document_base_url: MODx.config.site_url,
link_class_list: [
{title: 'None', value: ''},
{title: 'prettyLink', value: 'prettyLink'},
{title: 'colorBox', value: 'colorBox'}
],
image_class_list: [
{title: 'None', value: ''},
{title: 'prettyPhoto', value: 'prettyPhoto'},
{title: 'colorBox', value: 'colorBox'}
],
image_caption: true,
browser_spellcheck: true,
gecko_spellcheck: true,
paste_data_images: false,
menubar: false,
statusbar: false,
image_advtab: true,
setup: function(editor) {
editor.on('keydown', function(evt) {
if (evt.keyCode == 83 && evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {//ctrl + s = save
evt.preventDefault();
$('#modx-abtn-save button').trigger("click");
}
if (evt.keyCode == 27) { //escape key = remove fullscreen
evt.preventDefault();
if ($('.mce-fullscreen').length) {
tinymce.activeEditor.execCommand("mceFullscreen")
}
}
});
editor.on("init",function() { //float fullscreen link
containerId = $(editor.getContainer()).attr("id");
$("#"+containerId+" .mce-i-fullscreen").parent().parent().parent().parent().css("float","right");
});
},
external_plugins:{
twAceEditor: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twAceEditor.js",
// twCodeMirror: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twCodeMirror.js",
// bubbleBar: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/tinymceBubbleBar.js",
// twExoticMarkdownEditor: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twExoticMarkdownEditor.js",
modxMagicHoverLink: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/modxMagicHoverLink.js",
twPreCodeManager: "[[++assets_url]]components/tinymcewrapper/tinymceplugins/twPreCodeManager.js"
},
twAceEditorSettings: {
twPopped: 0, // 1 = popped (default) or 0 = inline
},
file_browser_callback : autoFileBrowser,
//leave trailing comma
I hope this helps to get you started...
Cheers,
Jan
☆ A M B ☆
I dont need this at all.
