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!
Related
I made a tinymce fiddle about this problem: http://fiddle.tinymce.com/O0gaab
I add a custom element "custom-block" and a custom plugin to insert that element.
tinymce.PluginManager.add('custom', function(editor, url) {
editor.addButton('custom', {
text: 'CUSTOM',
onclick: function() {
// Open window
editor.windowManager.open({
title: 'Custom plugin',
body: [
{type: 'textbox', name: 'src', label: 'SRC'},
{type: 'label', name: 'title', text: 'Insert content bellow:'},
{type: 'textbox', name: 'content', multiline: true, style: 'width:500px;height:100px;'}
],
onsubmit: function(e) {
console.log(e.data);
editor.insertContent('<custom-block src="' + e.data.src + '">' + e.data.content + '</custom-block>');
}
});
}
});
});
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste custom"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | custom",
//valid_elements: "+*[*]", //when using this option trying to allow everything get an error "Cannot read property 'src' of undefined"
extend_valid_elements: "custom-block[src]",
custom_elements: "custom-block"
});
The element, get inserted correctly but without the src attribute.
From the documentation I though that extend_valid_elements: "custom-block[src]" would allow src attribute on a custom-block but it gets stripped everytime.
I also tried to set valid_elements to everything(+*[*]) just in case, but then gets worse because at inserting, I get an error: "Cannot read property 'src' of undefined".
I am making any mistake or what is the problem?
The name of the configuration option is extended_valid_elements so you simply named it wrong in your configuration. It should be:
extended_valid_elements: "custom-block[src]"
I have updated your fiddle (http://fiddle.tinymce.com/O0gaab/1) and things appear to work.
I want to add keyboard shortcuts to my TinyMCE editor.
Here is my init code:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print'
],
toolbar: 'print | styleselect | bullist numlist',
});
I know that I need something along the lines of:
editor.shortcuts.add('ctrl+a', function() {});
But I don't understand how to connect the shortcuts code with my init code.
TinyMCE documentation here, but I was having trouble understanding it.
Here is how to do it:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
// add your shortcuts here
setup: function(editor) {
editor.shortcuts.add('ctrl+a', function() {});
}
});
Use the setup init parameter!
This is an expansion of the answer #Thariama provided. Code that worked for me was:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
setup: function(editor) {
editor.shortcuts.add('ctrl+a', desc, function() { //desc can be any string, it is just for you to describe your code.
// your code here
});
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print'
],
toolbar: 'print | styleselect | bullist numlist',
});
Alternatively you can also use the following, which will allow you to override key commands reserved by TinyMCE:
tinymce.init({
selector: 'textarea',
menubar: false,
mode : "exact",
setup: function(e) {
e.on("keyup", function(e) {
if ( e.keyCode === 27 ) { // keyCode 27 is for the ESC key, just an example, use any key code you like
// your code here
}
});
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table contextmenu paste code',
'print',
],
toolbar: 'print | styleselect | bullist numlist',
});
As a complement to the two previous answers, here is a full example:
tinymce.init({
//here you can have selector, menubar...
setup: function (editor) {
setLocale(editor);
// For the keycode (eg. 13 = enter) use: cf http://keycode.info
editor.shortcuts.add('ctrl+13', 'indent', function(){
tinymce.activeEditor.execCommand('indent');
});
editor.shortcuts.add('ctrl+f', 'subscript ', function(){
tinymce.activeEditor.execCommand('subscript');
});
},
});
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');
I'm upgrading tinyMCE from 3.4.2 to 4.0.1. Everything works perfect locally. But problem started when I published everything at server. Toolbar loads fine but the icons are not showing properly. Note: I have separate projects for app and CDN. I'm guessing this is a cross-domain/url reference issue but unable to figure it out. Currently the toolbar is loading as shown in the - screencast!
tinyMCE.init({
// General options
theme: "modern",
editor_selector: "mceDesignerEditorAutoresize",
relative_urls: false,
convert_urls: false,
toolbar1: "cut copy paste | bold italic | undo redo | bullist numlist | outdent indent blockquote | link unlink image code | inserttime preview | forecolor backcolor | imgCustom attachCustom",
toolbar_items_size: 'small',
plugins: [
"autoresize advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
accessibility_warnings: false,
accessibility_focus: false,
setup: function (ed) {
ed.addButton('imgCustom', {
title: 'Image',
image: $("#jsTinyMCEImageUrl").val().toString(),
onclick: function () {
openModalPopup($("#jsTinyMCEImagePath").val(), "width=700,height=600");
}
});
ed.addButton('attachCustom', {
title: 'Attachment',
image: $("#jsTinyMCEAttachUrl").val().toString(),
onclick: function () {
try {
openModalPopup($("#jsTinyMCEAttachPath").val(), "width=400,height=200");
}
catch (e) {
}
}
});
},
language: $('#TinyMCECurrentLanguage').val(),
paste_auto_cleanup_on_paste: true
});
It is found that /js/tinymce/skin/lightgray/fonts folder was not being copied to server. This happened as Visual Studio didn't recognize the font files and marked them as 'None' in Build Action and as a result these files were not being published.
Solved it by right clicking the font files, select Properties and Set value for Build Action to 'Content'.
Just wanted to add some further information to this question, for people who come along later. I experienced exactly the same problem, but in my case it was to do with cross-site font loading in Firefox. (Perhaps you will still have the problem if you test in Firefox)
Anyway the solution is to allow cross-site loading of fonts with the following http header on the site that the TinyMCE code is being loaded from:
Access-Control-Allow-Origin "*"
Full details of how to do this can be found at How to add an Access-Control-Allow-Origin header
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