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';
});
Related
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());
},
}}
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 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.
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!
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 );
});
},