Support/Comments for TinymceWrapper

10 Posts

shandie Reply #511, 6 years ago

Hi,

I see this error in the error log in MODX 2.6.2 keeps popping up...

[2018-04-15 16:01:00] (ERROR in uri /manager/?a=system/event @ /home/website/public_html/core/model/modx/modparser.class.php : 1371) Bad link tag `[[~? &scheme=`full` &rememberLastDir=`1` &defaultView=`icons` &unlocked=`1` &theme=`windows10`]]` encountered

I presume this is something to do with Wrapper as it's only occurred whilst using it...

Also I can't seem to find in the docs how to add custom formats apart from this https://www.tinymce.com/docs/demo/format-custom/ - but it doesn't show how the toolbar button has been created to exclude the pre-set formats? (so exactly as example here).

708 Posts

Eko Reply #512, 6 years ago

Regarding the preset formats, I think what you might be looking for is

style_formats_merge: false,

When set to true it will merge the presets with whatever custom formats/styles you add. But if set to false it will exclude the presets leaving only the custom formats, assuming you added them.

Todd

10 Posts

shandie Reply #513, 6 years ago

Quote from: todd.b at Apr 15, 2018, 06:27 PM

Regarding the preset formats, I think what you might be looking for is
style_formats_merge: false,
When set to true it will merge the presets with whatever custom formats/styles you add. But if set to false it will exclude the presets leaving only the custom formats, assuming you added them.

Aha, thank you! That does indeed just give my formats - however they don't seem to 'save' in the editor... this is to do with vaild elements i'm sure, but can't work it out.

Just want a clean text editor that does simple stuff and float image right/left is all... doesn't seem to be the case for MODX sadly.

I currently have in

valid_elements: -img[!src|!alt|!class]

and

style_formats: [
    { title: 'Right Image', selector: 'img', classes: 'image-right' },
    { title: 'Left Image', selector: 'img', classes: 'image-left' },
    { title: 'Button Link', selector: 'a', classes: 'button' }
  ],

The button style works (adds the class button on a selected a tag) but image left/right doesn't do anything when selecting the image and applying from the format dropdown. I can add a class manually to the a tag, so I know it is valid... I think?

Any help appreciated... [ed. note: shandie last edited this post 6 years ago.]

708 Posts

Eko Reply #514, 6 years ago

This adds Image Right to the Formats drop-down:

style_formats: [
    { title: 'Image Right', selector: 'img', styles: { 'float': 'right' }}
],

and will add inline CSS to the img tag:

<img style="float: right;" src="../myImage.png" alt="" />

Or if you prefer to use a class instead of inline CSS try:

{ title: 'Image Right', selector: 'img', classes: 'floatRight' }

Name the class whatever you want then in your stylesheet create the selector:

.floatRight { float: right; }

If neither of those work then there's a problem somewhere else.

Todd

10 Posts

shandie Reply #515, 6 years ago

Thanks - yep tried all of them with no luck on 'img' as selector, however if I add 'p' or 'a' as a selector, all works... getting frustrated with it a bit now.

708 Posts

Eko Reply #516, 6 years ago

Out of curiosity, in valid_elements try *[*] in place of what you currently have. This will make all elements valid.

Todd

10 Posts

shandie Reply #517, 6 years ago

Hmm, no... which is strange. I even manually cleared cache just in case. sad

708 Posts

Eko Reply #518, 6 years ago

Can you post the entire tinymce call:

tinymce.init({
    ...
});

Todd

10 Posts

shandie Reply #519, 6 years ago

tinymce.init({
  selector: "#ta",
  [[+commonTinyMCECode]]
  statusbar: true,
  content_css : 'assets/css/custom.css',  // css file path
  plugins: "imagetools,autoresize,preview,paste,contextmenu,image,wordcount,fullscreen,code,charmap,searchreplace,textpattern,emoticons,insertdatetime,media",
  paste_word_valid_elements: "a,b,strong,i,em,h2,h3,p,blockquote,ol,ul",
  valid_elements: "iframe[*],object[*],audio[*],span[class],a[href|target|class|rel|title|onclick],-strong,-b,a[class<button?text-left?text-center?text-right],p[class<text-left?text-center?text-right],br,h2[class<text-left?text-center?text-right],h3[class<text-left?text-center?text-right],h4[class<text-left?text-center?text-right],h5[class<text-left?text-center?text-right],h6[class<text-left?text-center?text-right],-fig,-figcaption,-img[!src|!alt|class],em,-blockquote,pre[class],-ol,-ul,-li,-code,hr[*]",
  style_formats_merge: false,
  formats: {
    alignleft: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-left'},
    aligncenter: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-center'},
    alignright: {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes : 'text-right'},
  },
  block_formats: 'Paragraph=p;Header 2=h2;Header 3=h3;Header 4=h4;Header 5=h5;Header 6=h6',
    style_formats: [
    { title: 'Image Right', selector: 'img', classes: 'image-right' },
    { title: 'Image Left', selector: 'img', classes: 'image-left' },
    { title: 'Button Link', selector: 'a', classes: 'button' }
  ],
  resize: true,
  autoresize_min_height: 100,
  toolbar: "fullscreen | undo redo selectall | pastetext paste | searchreplace | nonbreaking hr | charmap | image | link unlink | anchor | media | removeformat | print | code | bold italic | subscript superscript | bullist numlist | indent outdent | alignleft aligncenter alignright | formatselect | styleselect",
  contextmenu: "code | twPreCodeManager | fullscreen | removeformat | link | image"
  
});

708 Posts

Eko Reply #520, 6 years ago

I also use custom styles (but with presets). Here's mine.

Honestly, I'm not sure if it even matters (I don't know enough about Tiny) but there is a structural difference between your "formats" and my "style_formats".

style_formats: [
    	{ title: 'Containers', items: [
            { title: 'Article', block: 'article', wrapper: true, merge_siblings: false },
            { title: 'Aside', block: 'aside', wrapper: true },
            { title: 'Figure', block: 'figure', wrapper: true },
            { title: 'Header', block: 'header', wrapper: true },
            { title: 'Section', block: 'section', wrapper: true, merge_siblings: false }
        ]},
    	{ title: 'Custom Styles', items: [
	    	{ title: 'Cite', inline: 'cite' },
	    	{ title: 'Horizontal Rule', block: 'hr' },
	    	{ title: 'Lowercase', inline: 'span', classes: 'lowercase' },
	    	{ title: 'Quote', inline: 'q' },
	    	{ title: 'Small', inline: 'small' },
	    	{ title: 'Sub-heading', block: 'p', classes: 'subHead' },
    		{ title: 'Tooltip', inline: 'span', classes: 'tooltip' },
    		{ title: 'Update', block: 'div', classes: 'update' },
            { title: 'Wide', block: 'div', classes: 'wide' }
    	]}
],

Todd