I'm using TinyMCE 4 and setting it up as follows:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "basicTinyMCE",
theme : "modern",
readonly : false,
...});
I want to call a function after it has been rendered in the DOM.
I came across this and tried:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "basicTinyMCE",
theme : "modern",
readonly : false,
setup : function(ed) {
ed.onPostRender.add(function(ed,cm) {
console.log('After render: ' + ed.id);
});
}
});
I get the following error:
SCRIPT5007: Unable to get property 'add' of undefined or null reference
Any ideas if this is the correct way to achieve what I want?
And if so, why is the error appearing?
You've got two options:
Use configuration init_instance_callback http://www.tinymce.com/wiki.php/Configuration:init_instance_callback
Use new way to add callbacks
ed.on('postRender', function(e) {
console.log('postRender');
});
I found the "Dirty" event was what I wanted, only triggered after the user makes a change to the contents of the editor
https://www.tiny.cloud/docs/advanced/events/
Related
A similar problem was reported here:
http://www.tinymce.com/forum/viewtopic.php?id=78
My TinyMCE initialization code is as follows:
tinyMCE.init({
// General options
mode : "specific_textareas",
editor_selector : "mceEditor",
width : "94%%",
height : "449px",
theme :"advanced",
plugins : "autolink,lists,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
// Theme options
theme_advanced_buttons1 : "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,|,bullist,numlist,|,outdent,indent,blockquote,|,link,unlink,|,undo,redo",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_resizing : false,
//content_css : "css/word.css",
convert_urls : false,
extended_valid_elements: 'script[src|title|type],title[dir<ltr?rtl|lang]',
});
By default TinyMCE only allows editing of the body part of a HTML page, as this is the most common use case. If you want to use it to edit a full HTML page I'd suggest using the fullpage plugin: http://www.tinymce.com/wiki.php/Plugin:fullpage
Add plugin to TinyMCE plugin option list example: plugins : "fullpage".
You had an error in your tinymce config (height and width need to get set as a value without 'px'). Check this fiddle out. The element stay there and do not get stripped out (you may verify this using the html/code button).
I just started using TinyMCE as a WYSIWYG editor, I'm wondering if someone sees my question have used this nice editor can help me, here is my script:
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "comment",
theme : "advanced",
plugins : "emotions,spellchecker,advhr,insertdatetime,preview",
// Theme options - button# indicated the row# only
theme_advanced_buttons : "undo,redo,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,|,forecolor,backcolor,link,unlink,image,charmap,emotions",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
skin : "o2k7",
skin_variant : "silver"
});
</script>
but I get others icons, really don't know how to remove it, such as : 'sub,'sup,'HTML editor', ..
Thanks in advance,
My regards.
You need to define the buttons for all 3 rows of the toolbar, even if you don't want buttons in them. Example:
theme_advanced_buttons1 : "undo,redo,|,bold,italic,underline,|,justifyleft,justifycenter,justifyright,fontselect,fontsizeselect,|,forecolor,backcolor,link,unlink,image,charmap,emotions",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
Reference: http://tinymce.moxiecode.com/wiki.php/Configuration:theme_advanced_buttons_1_n
Otherwise, I believe you will get some default behavior. Give that a try and see if it helps.
theme_advanced_buttons1 does not worked for me so you can try this
$(window).load(function(){
$('#mce_14-body').hide();
$('#mce_28-body').hide();
$('#mce_20-body').hide();
});
id selector can point to panel or button etc.
I want to disable tinymce editor using Javascript. Actually, I have two radio buttons: 1) On & 2) Off.
When the user selects the Off radio button, my tinymce editor should be readonly/disabled & when the user selects the On radio button, my tinymce editor should be enabled.
How can I achieve that?
EDITED:- (As it is not working in IE8)
tinyMCE.init({
force_p_newlines : false,
force_br_newlines : false,
forced_root_block : false,
convert_newlines_to_brs: false,
// Not to add br elements.
remove_linebreaks : true,
mode : "textareas",
theme : "advanced",
plugins : "safari",
convert_urls : false,
width : "560",
height : "15",
theme_advanced_buttons1 : "fontselect,fontsizeselect, separator, bold,italic,underline,separator,forecolor,backcolor,justifyleft,justifycenter,justifyright,justifyfull",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", extended_valid_elements : "a[name|href|target|title|onclick],img[class|src| border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name], hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
This code is used to disable:
function tinymce_state(id, disable){
var state = (disable==true)? 'Off' : 'On'
tinymce.get(id).getDoc().designMode = state;
tinymce.get(id).controlManager.get('fontselect').setDisabled(disable);
tinymce.get(id).controlManager.get('fontsizeselect').setDisabled(disable);
tinymce.get(id).controlManager.get('bold').setDisabled(disable);
tinymce.get(id).controlManager.get('italic').setDisabled(disable);
tinymce.get(id).controlManager.get('underline').setDisabled(disable);
tinymce.get(id).controlManager.get('forecolor').setDisabled(disable);
tinymce.get(id).controlManager.get('backcolor').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyleft').setDisabled(disable);
tinymce.get(id).controlManager.get('justifycenter').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyright').setDisabled(disable);
tinymce.get(id).controlManager.get('justifyfull').setDisabled(disable);
}
You may use the following to block input in the editor:
// blockeditor input
tinymce.get('editor_id').getDoc().designMode = 'Off'; // switches editable off
// turn it on again
tinymce.get('editor_id').getDoc().designMode = 'On'; // switches editable on
You still need to find a way to block the tinymce UI. You could deactivate EACH control you have loaded (in the init function) using a line for EACH one of them
// example control bold
tinymce.get('editor_id').controlManager.get('bold').setDisabled(true);
// turn it on again
tinymce.get('editor_id').controlManager.get('bold').setDisabled(false);
EDIT:
You could change the contenteditable property of your rtes iframe body.
Downside will be that you will have to disable the tinymce UI (buttons) seperatly
// disable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'false');
// enable contenteditable
tinymce.get('editor_id').getBody().setAttribute('contenteditable', 'true');
For some reason the collection of editors has two type of ID, the numeric ID (0,1, ... n) and an alpha ID (Testing1, testing2, ... xyx)
the commands in the code snippet only work with the aplha-based ID e.g. "Testing1"
I have twelve tinyMCE version 4.1.5 editors in my project and can disable all of them with this code:
for (editor_id in tinyMCE.editors) {
if (editor_id.length > 2) { //there are twelve editors in my project so ignore two-digit IDs
tinyMCE.editors[editor_id].getBody().setAttribute('readonly', '1');
tinymce.EditorManager.execCommand('mceRemoveControl', true, editor_id);
tinymce.EditorManager.execCommand('mceRemoveEditor', true, editor_id);
tinymce.EditorManager.execCommand('mceAddControl', true, editor_id);
tinymce.EditorManager.execCommand('mceAddEditor', true, editor_id);
}
}
This site helped me figure it out: http://jeromejaglale.com/doc/javascript/tinymce_jquery_ajax_form
To disable the editor use:
tinymce.activeEditor.mode.set('readonly');
To enable the editor use:
tinymce.activeEditor.mode.set('design');
Tested on version 5.x
You can cover with a white div opacity .7 and higher z-index.
You can use in 3.x the option
editor_deselector : "no_mce",
to disabled (so give the textarea the css class no_mce). You can toggle the CSS Class with jQuery for example.
In 4.x you can use the option
selector:'textarea.not(.no_mce)'
Hope that helps.
(Oviously you can change the CSS Class to whatever you want)
For old 3 ver you can use:
tinyMCE.getInstanceById(tinyMCE.activeEditor.id).getBody().classList.add("mceNonEditable");
I'm trying to add a custom tag to content selected in the editor, but <title> content </title> does not work. This works though: [title] content [/title]
Googling leads me to believe that I need to use these lines as well, but it does not help:
extended_valid_elements : "title",
custom_elements: "title",
Example:
For some reason this code does not work:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("<title>" + ed.selection.getContent() + '</title>');
}
But this works:
setup : function(ed) {
// Add a custom button
ed.addButton('mybutton', {
title : 'My button',
'class' : 'Mybutton',
image : 'img/example.gif',
onclick : function() {
// Add you own code to execute something on click
ed.focus();
ed.selection.setContent("[title]" + ed.selection.getContent() + '[/title]');
}
This is the way to go
extended_valid_elements : "title",
custom_elements: "title",
You do not see anything because title is not defined elsewhere than in the head.
You will find your title-tag using firebug and it will hold what you expect to hold (ed.selection.getContent() wrapped into a title-tag.):
Often I find that I need to use jeditable on several areas each requiring different parameter settings.
For example I use jeditable with autosuggest input type, and then I need to pass different data sources to the different inputs.
I wanted to use just one instance of the editable plugin, and have tried to assign attr-values to the script, but obviously this does not work the way I'm approaching it..
I'm hoping someone can guide me a bit..
Essentially I would like to be able to set a jeditable parameter value based on the value of an ttribute of the dom element it is manipulating.
something like:
$('.editme').editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
then I could simply specify different load sources with:
<div id="fruits" class="editme" rel="myfruits">apples</div>
I didn't find the keyword this to work in this way..
How can I access the attributes of the dom element being manipulated dynamically for each jeditable binding?
here is another example of what I want to do:
authorsList = "".split(",");
// extend jeditable with autocomplete
$.editable.addInputType('autoc', {
element: function(settings, original) {
var input = $("<input />").autocomplete(settings.mdata, settings.autoc);
$(this).append(input);
return input; }
});
$('.editable.authors').editable('savedata.php',{
type : "autoc",
mdata : $(this).attr('rel'), // should hold the name 'authorsList'
onblur : 'ignore',
autoc : { multiple: true,
multipleSeparator: ',' },
loadurl : 'loaddata.php',
loadtype : 'POST',
loaddata : {handle: function(){ return eval($("#objhandle").val())}, lookuptype: 'mirror'},
submit : 'save',
cancel : 'cancel',
tooltip : "Click to edit",
style : "inherit",
cssclass : 'jedi',
id : "field",
name : "data",
submitdata : {
storetype: 'mirror',
handle: function(){return eval($("#objhandle").val())},
timestamp: function(){return eval($("#objtimestamp").val())}
}
});
Warning, totally untested code but something like following should work:
$('.editme').each(function() {
$(this).editable('savedata.php',{
loadurl : 'loaddata.php',
loaddata : { handle: $(this).attr('rel') }
});
});
This way the score of this should be correct when initializing Jeditable on the element.
this worked for me
$(this).data('rel)
and for the html
<div id="fruits" class="editme" data-rel="myfruits">apples</div>