I'm trying to add print plugin to my TinyMCE widget, but it doesn't work :
var option_tinymce = {
script_url : '/ui/js/tinymce/tinymce.min.js',
plugins: "code autosave insertdatetime textcolor print",
toolbar1: "print code | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | undo redo | removeformat | forecolor backcolor | formatselect | restoredraft",
menubar: false,
toolbar_items_size: 'small',
language: 'fr_FR',
setup: function(editor) {
editor.on('change', function(e) {
$(editor.formElement).find('[name="modification_form"]').val("Yes");
});
},
skin: 'pvx_light',
content_css: "/ui/css/style.css, /ui/css/style_tiny.css",
schema: "html5",
autosave_restore_when_empty: false,
resize : 'both'
}
Related
I want to make tinymce input to read only. i have tried with the below code. Please help me with this issue.
tinymce.init({
selector: '#deliberations',
menubar: false,
readonly: true,
branding: false,
height: 100,
max_height: 400,
theme: 'modern',
toolbar: false,
toolbar_items_size: 'small',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],
toolbar1: 'insert | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons | fullscreen | table',
image_advtab: true,
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
],
content_css: [
]
});
If you are using version 4.x, remove the readonly: true option and try
setup: function (editor) {
editor.setMode("readonly")
},
http://fiddle.tinymce.com/Lugaab/2
As stated in the TinyMCE docs https://www.tinymce.com/docs-3x/reference/configuration/Configuration3x#readonly/ the readonly attribute should be set to '1' not to 'true'.
tinymce.init({
selector: '#deliberations',
menubar: false,
readonly: 1,
branding: false,
height: 100,
max_height: 400,
theme: 'modern',
toolbar: false,
toolbar_items_size: 'small',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak','searchreplace wordcount visualblocks visualchars code fullscreen','insertdatetime media nonbreaking save table contextmenu directionality','emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'],
toolbar1: 'insert | undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons | fullscreen | table',
image_advtab: true,
templates: [{
title: 'Test template 1',
content: 'Test 1'
},
{
title: 'Test template 2',
content: 'Test 2'
}
],
content_css: [
]
});
I used TinyMCE Editor for my text box in my web site, I followed this https://www.tinymce.com/docs/get-started/first-steps/ and it works fine but the problem is that I don't have all the features. mine is like the image below
but here is what I Expect
Here are the full features (except premium plugins) you can use: https://www.tinymce.com/docs/demo/full-featured/. You may want to modify menubar, plugins and toolbar for your need.
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: [
'advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc'
],
toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons | codesample',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: [
'//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
'//www.tinymce.com/css/codepen.min.css'
]
});
I'm using TinyMCE v4.3.6. Because of the default shortcut "alt gr + f" I can't write character "[" in my editor. How can I disable shortcut "alt gr + f"?
Please, check out my initialization code and comments below:
tinymce.init({
selector: 'textarea.my-textarea-content',
theme: 'modern',
schema: 'html5-strict',
menubar: false,
// editor size
width : 770,
height : 500,
min_height : 500,
autoresize_min_height: 500,
convert_urls: false,
relative_urls: true,
inline: false,
setup: function(ed) {
ed.on('init', function(event) {
var hidTinyData = $('.my-tinymce-data');
// fullscreen custom shortcut
ed.addShortcut('CTRL+SHIFT+F9', 'Fullscreen', 'mceFullScreen', this);
// trying to override default behaviour for "alt gr + f"
// but it is not working as expected
ed.addShortcut('ctrl+alt+f', '', '', function () {});
ed.addShortcut('meta+alt+f', '', '', function () {});
ed.remove('meta+f');
ed.setContent(hidTinyData.val());
ed.execCommand('mceRepaint');
});
},
plugins: ['advlist autolink lists link charmap hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code contextmenu
fullscreen ', 'nonbreaking table textcolor paste autoresize'],
contextmenu: 'inserttable tableprops deletetable cell row column | hr',
toolbar1: 'newdocument | searchreplace | fontselect fontsizeselect
formatselect table | bullist numlist | outdent indent removeformat | fullscreen ',
toolbar2: 'undo redo | bold italic underline strikethrough subscript
superscript | forecolor backcolor | alignleft aligncenter alignright
alignjustify | blockquote hr | visualchars visualblocks | code'
});
Found the workaround on the following link:
https://stackoverflow.com/a/19836730/2614103
My updated code:
tinymce.init({
selector: 'textarea.my-textarea-content',
theme: 'modern',
schema: 'html5-strict',
menubar: false,
// editor size
width : 770,
height : 500,
min_height : 500,
autoresize_min_height: 500,
convert_urls: false,
relative_urls: true,
inline: false,
setup: function(ed) {
ed.on('init', function(event) {
// add custom shortcut for fullscreen
ed.addShortcut('CTRL+SHIFT+F9', 'Fullscreen', 'mceFullScreen', this);
// content
ed.setContent($('.my-tinymce-data').val());
// repaint editor
ed.execCommand('mceRepaint');
});
ed.on('keyup', function(e) {
overrideKeyboardEvent(e, ed);
});
ed.on('keydown', function( e) {
overrideKeyboardEvent(e, ed);
});
},
plugins: ['advlist autolink lists link charmap hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code contextmenu
fullscreen ', 'nonbreaking table textcolor paste autoresize'],
contextmenu: 'inserttable tableprops deletetable cell row column | hr',
toolbar1: 'newdocument | searchreplace | fontselect fontsizeselect
formatselect table | bullist numlist | outdent indent removeformat | fullscreen ',
toolbar2: 'undo redo | bold italic underline strikethrough subscript
superscript | forecolor backcolor | alignleft aligncenter alignright
alignjustify | blockquote hr | visualchars visualblocks | code'
});
overrideKeyboardEvent: function(e, ed) {
switch (e.type) {
case 'keydown':
if (e.keyCode == 9 && !e.altKey && !e.ctrlKey) {
// toggle between Indent and Outdent
// command, depending on if SHIFT is pressed
if (e.shiftKey) {
ed.execCommand('Outdent');
} else {
ed.execCommand('Indent');
}
// cancel default action for keys Tab and Shift+Tab
if (e.preventDefault) {
e.preventDefault();
}
return tinymce.dom.Event.cancel(e);
} else if (e.keyCode == 27 && !e.altKey && !e.ctrlKey) {
// check if fullscreen is on
if ($('.mce-fullscreen').length) {
ed.execCommand('mceFullScreen');
}
} else if (e.keyCode == 70 && e.altKey && e.ctrlKey) {
e.stopPropagation();
e.preventDefault();
// insert character '['
ed.insertContent('[');
return false;
}
break;
}
return true;
}
$(document).ready(function($) {
document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
});
I initialize 2 tinyMCE editor on 2 textarea with different id :
var variable_array = {id:'cName', test:'mon test'};
tinymce.init({
selector: "#model_editor",
entity_encoding : "raw",
encoding: "UTF-8",
theme: "modern",
height: "500px",
width: "100%",
variables_list : variable_array,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern modelinsert"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons",
toolbar2: "variable_insert | question_insert",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
tinymce.init({
selector: "#headerfooter_editor",
entity_encoding : "raw",
encoding: "UTF-8",
theme: "modern",
height: "500px",
width: "100%",
variables_list : variable_array,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern modelinsert"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image print preview media | forecolor backcolor emoticons",
toolbar2: "variable_insert | question_insert",
image_advtab: true,
init_instance_callback : "mceInitInstance",
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
Both editors init correctly.
Then in order to set different content on each, I try to get the editor instance object id :
var editor_id = tinyMCE.get('#headerfooter_editor');
console.log(editor_id);
It returns null :/
I try also to get in the console the result of the callback of the second init :
function mceInitInstance(inst) {
console.log("Editor: " + inst.editorId + " is now initialized.");
And it returns : Editor: undefined is now initialized.
I want to do the following :
tinyMCE.get('#headerfooter_editor').setContent(data.content);
but of course it returns an error : Uncaught TypeError: Cannot read property 'setContent' of null
I don't understand what's wrong and why I can't get the editor instance id :/
Your editors should be available using tinymce.get('model_editor') and tinymce.get('headerfooter_editor').
Hint: tinymce.editors holds all editor instances that have been initialized.
You can loop through that array to get them all:
for (var i = 0; i < tinymce.editors.length; i++)
{
console.log("Editor id:", tinymce.editors[i].id);
}
Instead of:
tinyMCE.get('#headerfooter_editor').setContent(data.content);
use
tinyMCE.get('headerfooter_editor').setContent(data.content);
remove #
I got the same problem.
The error message was:
TypeError: tinymce.get(...) is null
But my error was that I tried to tinymce.get(...) before initiating tinymce editor.
tinymce.init({selector: "#mytextarea"})
I am using a tinymce editor on my cms its having a normal text toolbar where it has bold,italic,underline, and justify option but it dont have the font family change option and not even color change. how to enable that?
i have done this in this way
tinyMCE.init({
theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
)};
for the upgraded version here is the full featured example
tinymce.init({
selector: 'textarea',
height: 500,
theme: 'modern',
plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak',
'searchreplace wordcount visualblocks visualchars code fullscreen',
'insertdatetime media nonbreaking save table contextmenu directionality',
'emoticons template paste textcolor colorpicker textpattern imagetools'
],
toolbar1: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
toolbar2: 'print preview media | forecolor backcolor emoticons',
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
],
content_css: ['//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
'//www.tinymce.com/css/codepen.min.css'
]
});
for more reference visit https://www.tinymce.com/docs/demo/full-featured/
In my old version of TinyMCE 4.0.10 font and color controls are added like so to tinymce.init in addition to your other init toolbar and plugin options:
toolbar: "styleselect fontselect fontsizeselect | forecolor backcolor",
plugins: "textcolor"