I am using tincyMce, however I want to limit copy and pasting to only be used within the actual tinyMce component within my webpage. i.e I can copy and paste inside of the tinyMce texteditor however I could not copy its contents to a word document. Is this possible? This is my current config
init={{
plugins: config.plugin,
selector: 'text',
menubar: config.menubar,
toolbar: config.toolbar,
statusbar: false,
skin: false,
branding: false,
paste_data_images: false,
paste_block_drop: false,
paste_postprocess: (editor, args) => {
[...args.node.getElementsByTagName('img')].forEach((image) => image.remove());
},
}}
Related
I'm trying to add <style>// custom css here</style> into the tiny mce editor but currently it deletes the style tags and anything in between them on save.
I am trying to set valid_elements: "style" and/or custom_elements: "sabioStyle", and/or extended_valid_elements: "style". I've also tried: "[]" according to tiny's docs but it seems to have no effect on anything. I see that the init function:
piranha.editor.addInline = function (id, toolbarId) {
tinymce.init({
selector: "#" + id,
browser_spellcheck: true,
fixed_toolbar_container: "#" + toolbarId,
menubar: false,
branding: false,
statusbar: false,
inline: true,
convert_urls: false,
plugins: [
piranha.editorconfig.plugins
],
width: "100%",
autoresize_min_height: 0,
toolbar: piranha.editorconfig.toolbar,
extended_valid_elements: piranha.editorconfig.extended_valid_elements,
block_formats: piranha.editorconfig.block_formats,
style_formats: piranha.editorconfig.style_formats,
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { text: data.filename });
}, null);
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { alt: "" });
}, "image");
}
}
});
$("#" + id).parent().append("<a class='tiny-brand' href='https://www.tiny.cloud' target='tiny'>Powered by Tiny</a>");
};
Piranha uses sets extended_valid_elements: piranha.editorconfig.extended_valid_elements but my dev tools are not showing the value that I type in editorconfig.json...
editorconfig.json
devTools
I've tried everything their docs say, I have a question open on github with Piranha as well.. Any suggestions would be great! Thanks
See the complete answer here: https://github.com/PiranhaCMS/piranha.core/issues/1663
I would like to know if there is anyway to keep paste_as_text: true,
But keep the blank lines / new lines, when paste something to TinyMCE.
I´m uploading my code below. Already searched alot on web, and didn´t found any answer.
Thanks for anyone help.
Try to pase this text:
"this text you should
paste to the editor for testing"
-> You see, the blank line between the phrases, is not pasting
tinymce.init({
selector: '#mytextarea',
height: "calc(100vh - 90px)",
width: "100%",
plugins: "paste",
paste_as_text: true,
force_br_newlines: true,
force_p_newlines: false,
forced_root_block: 'div',
setup: function (editor) {
editor.on('init', function (e) {
editor.setContent('');
editor.getBody().style.fontSize = '13px';
editor.getBody().style.fontFamily = 'Arial';
});
I have initiated two instances of the TinyMCE editor on the same webpage...shown below.
tinymce.init({
selector: '#post-content',
placeholder: 'Type your post here...',
elementpath: false,
resize: false,
plugins: '',
toolbar: '',
menubar: '',
});
tinymce.init({
selector: '.post-comment-form-input',
placeholder: 'Type your comment here...',
elementpath: false,
resize: false,
height: "100",
plugins: '',
toolbar: '',
menubar: '',
});
When I execute a command on the first instance, it all goes just fine (shown below).
$('btn').click(function() {
tinyMCE.get('post-content').setContent('');
});
However, when I execute a command on the second instance, I get the following "Cannot read property 'setContent' of null".
$('btn').click(function() {
tinyMCE.get('post-comment-form-input').setContent('');
});
Both TinyMCE editors show just fine on the webpage, so I know they are initializing properly. It's just when I try to use a command on that second instance it doesn't work. I have tried including a period in the 2nd function since it's a class, but that doesn't work either.
Thank you.
The tinymce.get() requires you to pass the ID of the HTML element. Based on your init() sections the second selector is using a CLASS which is not valid for the tinymce.get() API.
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');
Does anyone know how to allow having custom uppercase tags in TinyMCE? It seems that TinyMCE doesn't like uppercase tags, even though they have been declared as valid. Here is my TinyMCE config:
tinyMCE.init({
mode: "specific_textareas",
theme: "advanced",
language: "en",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_buttons1: "bold,italic,|,sub,sup,|,charmap,|,table,|,code",
theme_advanced_path: false,
theme_advanced_resizing: true,
plugins: "fullscreen,paste,table",
paste_auto_cleanup_on_paste : true,
relative_urls: false,
width: "300",
height: "300",
theme_advanced_resizing_min_height : "10",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
entity_encoding: "raw",
valid_elements : "B/strong,I/em,SUP/sup,SUB/sub",
extended_valid_elements: "CUSTOM"
})
Typing something like
<CUSTOM>this is a custom tag</CUSTOM>
doesn't work because <CUSTOM> gets stripped off.
If I change the init script to extended_valid_elements: "custom", then it works fine - I can type
<custom>this is a custom tag</custom>
and the <custom gets preserved.
Doesn't anyone know any workaround?
Thanks!
Here is a description of how to do that (the reverse works analogue): http://www.codingforums.com/archive/index.php/t-148450.html
You should use the tinymce onInit event and to change the tags back to Uppercase use onSubmit or onSave (alternatively you may change the content back before submitting your content on any other suitable location of code).
To add this handlers use the tinymce setup configuration parameter
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from editor source html element
var content = $(ed.id).html();
// tagname to lowercase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toLowerCase()});
ed.setContent(content);
});
ed.onSubmit.add(function(ed, evt) {
$(ed.getBody()).find('p').addClass('headline');
// get content from edito
var content = ed.getContent();
// tagname to toUpperCase
content = content.replace(/< *\/?(\w+)/g,function(w){return w.toUpperCase()});
// write content to html source element (usually a textarea)
$(ed.id).html(content );
});
},