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());
},
}}
tinymce.init({
mode: "exact",
elements: "Grievance",
forced_root_block: "",
theme: "advanced",
paste_text_sticky: true,
paste_text_sticky_default: true,
plugins: "wordcount,paste,autolink,advlink,contextmenu,fullscreen,nonbreaking,template,inlinepopups,style",
//plugins: "wordcount,paste,autolink,advlink,fullscreen,nonbreaking,template,inlinepopups,style",
// Theme options
//theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,undo,redo,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
//theme_advanced_buttons2: "cut,copy,paste,|,cleanup,removeformat,|,bullist,numlist,outdent,indent,hr,charmap",
//theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,formatselect,bold,italic,underline,forecolor,backcolor,|,justifyleft,justifycenter,justifyfull,|,link,unlink,|,fullscreen",
theme_advanced_buttons1: "cut,copy,paste,removeformat,|,undo,redo,|,bullist,numlist,outdent,indent,|,bold,italic,underline,|,fullscreen",
//theme_advanced_blockformats: 'p,h1,h2,h4,h4,h5,h6',
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
//theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing: true,
theme_advanced_path: false,
content_css: "/css/admin.css",
selector: 'textarea', // change this value according to your HTML
setup: function (editor) {
editor.on('init', function(){
if (tinymce.get('Text').getContent() == ''){
tinymce.get('Text').setContent("<p id='#Grievance'>Please put Case Information here</p>");
}
});
//and remove it on focus
editor.on('focus',function(){
$('iframe').contents().find('#Grievance').remove();
});
}
});
I am trying to add a Placeholder but I am getting "editor.on is not a function" so how do I add a place holder please without going to version 5 as that seems to be completely different. Thanks
I managed it in the end using Blur and Focus. Thanks
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 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');
});
},
});
Below is my current Tinymce configuration which will remove all the style/formatting/html tags and paste as a plain text,
but my customer want to paste the table into it. So I would like improve my tinymce to be able to paste the table (only) when we copy and paste from ms word.
tinyMCE.init({
theme: "advanced",
mode: "exact",
elements: "txtTextbox1",
plugins : "paste,table,directionality,preview,iespell,wordcount,style",
theme_advanced_buttons1: "bold,italic,underline,|,cut,copy,paste,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,undo,redo,|,preview,iespell",
theme_advanced_buttons2: "tablecontrols,|,link,unlink",
//theme_advanced_buttons3: "tablecontrols,|,link,unlink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
force_p_newlines: false,
force_br_newlines: true,
forced_root_block: '',
paste_convert_middot_lists: false,
paste_text_sticky: true,
paste_strip_class_attributes: "all",
paste_remove_styles: true,
paste_remove_spans: true,
paste_block_drop: true,
paste_text_sticky_default: true,
setup: function (ed) {
ed.onInit.add(function (ed) {
ed.pasteAsPlainText = true;
ed.controlManager.setActive("pastetext", true);
});
}
});
EDITED
below is my final code
tinyMCE.init
({
theme: "advanced",
mode: "exact",
elements: "txtTextbox1",
plugins : "paste,table,directionality,preview,iespell,wordcount,style",
theme_advanced_buttons1: "bold,italic,underline,|,cut,copy,paste,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,undo,redo,|,preview,iespell",
theme_advanced_buttons2: "tablecontrols,|,link,unlink",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
force_p_newlines: false,
force_br_newlines: true,
forced_root_block: '',
paste_convert_middot_lists: false,
paste_preprocess : function(pl, o)
{
o.content = strip_tags( o.content,'<table><tr><td>' );
},
});
function strip_tags (str, allowed_tags)
{
}
The solution is to use paste_preprocess. In this SO-thread you will find a way to paste as plain text, but to keep tables define table, tbody, td, tr to be not stripped out when pasted
I find a solution for copy - paste tinyMCE 4.0
if you using this basic example source
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste moxiemanager"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
remove " paste " option from plugins section;
like this;
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu moxiemanager"
],
Now you can paste (everything ms word , html page etc..) to tinyMCE editor
maybe ,might be help