Avoid strip specific attributes with TinyMce - tinymce

I would like to add the following content
<label for="tab1">Product Name</label>
inside a long product description in Prestashop, but when I save the product the "for" attributes is stripped away from HTML code.
I did some research and I found that the editor is TinyMCE and so I tried to change the configuration by adding:
extended_valid_elements : "+#[class|name|id|for]",
inside TinyMCE init script but the result is the same. I am sure that I didn't use the cached version of old script because I disable the Chrome cache and checked that the javascript code was correct.
Do you have any idea?
Here it is the full configuration script:
default_config = {
selector: ".rte" ,
plugins : "colorpicker link image paste pagebreak table contextmenu filemanager table code media autoresize textcolor anchor",
browser_spellcheck : true,
toolbar1 : "code,|,bold,italic,underline,strikethrough,|,alignleft,aligncenter,alignright,alignfull,formatselect,|,blockquote,colorpicker,pasteword,|,bullist,numlist,|,outdent,indent,|,link,unlink,|,anchor,|,media,image",
toolbar2: "",
external_filemanager_path: ad+"/filemanager/",
filemanager_title: "File manager" ,
external_plugins: { "filemanager" : ad+"/filemanager/plugin.min.js"},
language: iso,
skin: "prestashop",
statusbar: false,
relative_urls : false,
convert_urls: false,
entity_encoding: "raw",
extended_valid_elements : "+#[class|name|id|for]",
valid_children : "+*[*]",
valid_elements:"*[*]",
menu: {
edit: {title: 'Edit', items: 'undo redo | cut copy paste | selectall'},
insert: {title: 'Insert', items: 'media image link | pagebreak'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'code'}
}
};

Have you tried to add to extended_valid_elements the tag and not the attribute? Like this:
extended_valid_elements : "label[for]"
It's a fault of HTMLPurifier library, if you have control of the content of the html disable from the backoffice.
Preferences -> General set to NO Use HTMLPurifier Library
If you don't want to disable the library, you have to edit in PrestaShop/tools/htmlpurifier/
Maybe it's more easy to override the purifyHTML() method of Tools class, and add the 'for' attribute for the label, adding this when instancing the library:
$config->set('HTML.AllowedAttributes', 'label.for');

Related

Where to find the list of all the menu subitems for TinyMCE

I understand that it's possible to configure the submenu items within TinyMCE as shown below:
tinymce.init({
selector: "textarea",
menu : { // this is the complete default configuration
file : {title : 'File' , items : 'newdocument'},
edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'},
insert : {title : 'Insert', items : 'link media | template hr'},
view : {title : 'View' , items : 'visualaid'},
format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table : {title : 'Table' , items : 'inserttable deletetable | cell row column'},
tools : {title : 'Tools' , items : 'spellchecker code'}
},
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
but is there someplace with a list of all the submenu items? The TinyMCE documentation only seems to show the top level (file, edit, insert, etc.) but not the list of submenu items. There are a couple of examples but they only show subsets. I've tried to look at the source code but it's pretty involved...
In retrospect the answer is very obvious, but when you initially start it's not. It also doesn't help that the code is well below the fold, so you will need to scroll down to see the code instead of just the list.
You can find a mostly complete list at: https://www.tinymce.com/docs/plugins What you need to do is add the plugins and then add the items.
For example here is the link for the image (Remember to scroll to the bottom):
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "image",
menubar: "insert",
toolbar: "image",
image_prepend_url: "http://www.tinymce.com/images/"
});
In this case you need to add the image to plugins. It will by default add it to the menubar insert. You can however manually add it by entering in image.

TinyMCE "paste button" does not work

My question about TinyMCE editor.
In IE brower it works fine. But when I paste something in FF & Chrome I'm receiving the message: "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X/C/V keyboard shortcuts instead."
I've not found any documentation to solve this problem!
I need help ,Thanks!
I'm a little late to this, but I was having the same problem. I did some digging, and this configuration worked for me.
tinyMCE.init({
selector: "textarea",
language: editorLanguage,
plugins: [
"autolink lists link image anchor",
"searchreplace visualblocks",
"insertdatetime media contextmenu paste"
],
menu: {
edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall' },
insert: { title: 'Insert', items: 'link image' },
view: { title: 'View', items: 'visualaid' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' }
},
convert_urls: false,
paste_data_images: true
});
At a minimum though, all you need is this:
tinyMCE.init({
selector: "textarea",
plugins: "image,paste",
paste_data_images: true
});
This is working for me, using the cdn hosted version ( cdn.tinymce.com/4/tinymce.min.js )
Hope this helps someone!

Tinymce - How to remove menu items,remove/edit menu headers

Is it possible to remove menu items in tinymce?
Also is it possible to remove an entire dropdown such as 'insert'?
Yes it is possible to remove individual menu items.Please add following code to your tinymce init.
tinymce.init({
removed_menuitems: "undo,redo"
});
To get list of all menu items that can be removed - link
To remove/edit an entire menu dropdown please use the following configuration for the menu while initializing the tinymce.
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
insert: {title: 'Insert', items: 'link media | template hr'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'spellchecker code'}
}
});

Allow only certain formats in tinymce 4 Modern theme?

Is there a 'modern theme' (in other words, tinymce 4) equivalent of the theme_advanced_blockformats option?
theme_advanced_blockformats allows you to limit the set of available formats by adding the following to tinymce.init():
tinyMCE.init({
...
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,blockquote,dt,dd,code,samp"
});
(TinyMCE theme advanced block formats)
I know that it's possible to explicitly specify which formats are available by passing an option to tinymce.init(), like so:
tinyMCE.init({
...
formats :
bold : {inline : 'span', 'classes' : 'bold'},
italic : {inline : 'span', 'classes' : 'italic'},
underline : {inline : 'span', 'classes' : 'underline', exact : true},
}
});
(TinyMCE formats)
Unfortunately, this wants a lot of detail about the way that each format is implemented that I don't have.
Any words of advice?
This is as of latest TinyMCE release (4.1.3).
Although the "block_formats" setting documents this functionality, I could only get this to work using the following:
tinymce.init({
selector: "textarea",
style_formats: [
{title: 'Paragraph', block: 'p'},
{title: 'Heading 2', block: 'h2'},
{title: 'Heading 3', block: 'h3'},
{title: 'Heading 4', block: 'h4'},
],
});
This is a simple example of the Tinymce documented custom formats syntax.
The documentation is a bit spotty right now but you can control what is a valid block as well as define default attributes for blocks using valid elements. Declaring allowed blocks and default styles are now up to the TinyMCE core rather than the theme. valid_elements declares allowed blocks and extended_valid_elements declares default attributes for allowed blocks.
tinymce.init({
selector: "textarea",
valid_elements : "a[href|target=_blank],strong/b,div[align],br",
extended_valid_elements: "img[class=myclass|!src|border:0|alt|title|width|height]",
invalid_elements: "strong,b,em,i"
});
I think this is what you need:
http://www.tinymce.com/wiki.php/Configuration:block_formats
Like:
block_formats: "Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4"
For Tinymce 4x, try the following:
tinymce.init({
selector: "textarea",
block_formats: 'Paragraph=p;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6;Preformatted=pre',
});
https://www.tiny.cloud/docs-4x/configure/content-formatting/#block_formats
ben.hamelin's answer didn't work for me in v4.8.1.

Remove menu and status bars in TinyMCE 4

I am trying to remove the menu and status bars from TinyMCE 4 because I want to setup a very basic editor. Is this possible?
The documentation for TinyMCE 3 does not seem to be relevant and I cannot find anything for version 4.
I looked at the source and it was fairly obvious:
tinyMCE.init({
menubar:false,
statusbar: false,
//etc
})
This removes both.
You can also customise what parts of the default menu bar are visible by specifying a string of enabled menus - e.g. menubar: 'file edit'
You can define your own menus like this:
menu : {
test: {title: 'Test Menu', items: 'newdocument'}
},
menubar: 'test'
If you want to remove entire Menu bar from top
tinymce.init({
menubar: false,
});
But if you want Custom menubar with some submenu
tinymce.init({
menu: {
file: {title: 'File', items: 'newdocument'},
edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
insert: {title: 'Insert', items: 'link media | template hr'},
view: {title: 'View', items: 'visualaid'},
format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
tools: {title: 'Tools', items: 'spellchecker code'}
}
});
see TinyMCE for more help.
So, It is clearly metioned in their docs that to make the values to false.
tinymce.init({
menubar: false,
branding: false,
statusbar: false,
})
In the latest update to v5
You can display menubar as such
tinymce.init({
menu: {
edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall searchreplace' },
insert: { title: 'Insert', items: 'image link charmap pagebreak' },
format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
},
menubar: 'edit insert format table',
});
see https://www.tiny.cloud/docs/ for more details
If you want a completely clean text box, you could disable all the bars, including de "toolbar":
tinymce.init({
selector:'textarea',
branding: false,
menubar:false,
statusbar: false,
toolbar: false,
});
In the community edition I think you are not allowed to hide the statusbar (Powered by Tiny) branding part.
https://www.tiny.cloud/docs-4x/configure/editor-appearance/#branding