I want to call function after cut/paste event fires.
For example I want to count number of characters entered by user when user do cut/paste in editor via keyboard or mouse (with context menu) also.
Is there any way to call our own function after user do cut/paste ?
Yes, this is possible.
Use the paste plugin.
tinyMCE.init({
// General options
//mode:'exact',
mode: "textareas", // none, textareas, exact, ...
theme: "advanced", // also simple available
plugins : "paste",
paste_postprocess : function(pl, o) {
// o.content holds the pasted content o.content.length will give you the number of characters the user entered
alert(o.content.length);
},
Related
I have initiated the tinyMCE for the list of textarea's (around 12) using the below code (generated from TypeScript code).
tinymce.init({
selector: this.selector,
setup: function (editor) {
editor.on('change blur', function () {
editor.save();
tinymce.triggerSave();
console.info('tinyMCE change event fired.');
});
},
branding: this.branding,
menubar: this.menubarFlag,
browser_spellcheck: this.browser_spellcheck,
fontsize_formats: this.fontsize_formats,
block_formats: this.block_formats,
toolbar1: this.toolbar1,
height: this.height,
plugins: this.plugins
});
I tried both editor.save(); and tinymce.triggerSave(); on tinyMCE change event. But still hidden textarea change event is not firing though content is updated to textarea.
I need textarea's event to actually add an element to the form by adding name attribute.
$(divObj).find('.segment-input').change(function () {
$(divObj).find('input[type="hidden"]').attr('name', $(divObj).find('input[type="hidden"]').attr('name-nochange'));
$(divObj).find('input[type="hidden"]').removeAttr('name-nochange');
});
Per your comments above check out this fiddle:
http://fiddle.tinymce.com/Cogaab
The editor.on() function has access to the editor (e in the fiddle) upon which it was triggered. You can get (among other things) the target ID of the underlying text area. In the fiddle I provided I log that to the console for each of the editors on init, change, and blur.
Once you know the ID you can find that using JavaScript and do what you need to that native element.
There is a variety of useful data in that editor (e) object - its worth logging e and looking at what else is there as other data there may also be helpful for your scenario.
I have correctly configured MoxieManager to be integrated with TinyMCE and all works fine. But I'd like to remove the "browse" button (which opens the MoxieManager dialog) from the "Insert link" dialog.
So from the following screenshot, the green should stay but the red should go.
Self answer, but I guess it will be helpful to other people as well.
Each TinyMCE plugin usually has a JS file located under plugins/[plugin_name]/plugin.js (or plugin.min.js, depending on if you are using the minified version). Those plugins usually call the editor.windowManager.open(), passing an object of configuration options to be applied to the newly opened window.
One of the values this object can have is body which is an array of the items to be displayed in the dialog. Each item has some options to be configured on its own, including the type property.
In the below example, I have used plugins/link/plugin.js to show the difference needed to replace the (default) text field with the file browser button - with the standard text field without the browse button.
win = editor.windowManager.open({
// ...
body: [
{
name: 'href',
type: 'filepicker',
filetype: 'file',
// ...
},
// More code follows here
And the new version:
win = editor.windowManager.open({
// ...
body: [
{
name: 'href',
type: 'textbox',
filetype: 'file',
// ...
},
// More code follows here
Or, if you don't want to change the source .. say you're using a minified version etc, you can disable it via CSS:
div[aria-label="Insert link"] .mce-btn.mce-open {
display: none;
}
add it to you config
file_picker_types: 'media image'
file_picker_types
This option enables you to specify what types of file pickers you need
by a space or comma separated list of type names. There are currently
three valid types: file, image and media.
https://www.tiny.cloud/docs/tinymce/6/file-image-upload/#file_picker_types
I have a page with multiple textareas to be replaced with TinyMCE.
Some of the Textareas take arabic text, some english text. The textareas have the dir-attribute set correctly according to the input they should receive.
How can I set the directionality of the different Editors according to their textareas?
I can set the directionality for all instances like this:
$('textarea.advanced_editor').tinymce({
⋮
plugins : "…,directionality,…",
directionality: "rtl",
⋮
});
But how can I set different direction for each editor?
In this case you will need different tinymce configurations - one with directionality set to rtl the other with the default.
UPDATE:
This is possible. You need to call this using the correct editor id
tinymce.get('my_editor_id').getBody().dir ="rtl";
In the end I came up with this:
$('textarea.advanced_editor').tinymce({
⋮
plugins : "…,directionality,…",
directionality: "ltr",
⋮
setup: function (ed) {
ed.onInit.add(function(ed) {
var direction = $('[name="'+ed.id+'"]').attr('dir');
ed.getBody().dir = direction;
});
},
⋮
});
I used the events-based solution like #Thariama supposed and referenced back to the dir-attribute, which I know to be always set correctly.
I edited toolbar of TinyMCE toolbar editor and there I gave both the options ltr and rtl over there to use.
Did like toolbar1: "ltr rtl | undo redo" in the function LoadTinyMCE()
So here user has both the options of writing as ltr and rtl comes as a toolbar. Did it in version 4.1.7.
I am using TinyMCE to create a WYSIWYG editor in my webapp. I need to configure it in advanced mode for some textarea's and in simple mode for some. I am configuring TinyMCE like this.
<head>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "simple"
});
tinyMCE.init({
mode : "textareas",
theme : "advanced"
});
</script>
</head>
This configuration works and shows me TinyMCE in simple or advanced mode, based on the class of the textarea.
However, the problem happens when I submit a form. The server gets a blank for the textarea. (this problem does not occur when I use only one configuration for TinyMCE)
I did some searching and came across a suggestion which said I should explicitly ask TinyMCE to save the content before doing a submit. I tried adding this code to my form.
$('#postFeedback').click( function(){
tinyMCE.triggerSave(true,true);
alert("TextArea val - " + $('input[name=email]').val() + "- " + $('textarea.simple').val());
$('form').submit();
});
The form does get submitted, but I have the same problem. The value in the textarea is blank. I also put an alert (as shown above) to check the value of the textarea, and it is indeed blank.
Some questions to start with:
TinyMCE works perfectly well, when I have just one configuration (init). However, it gets messed up the momnent I have two? Any clue why this might happen?
Is it necassary to explicitly ask TinyMCE to save the textarea contents?
How do I begin debugging this problem?
You should initialize your editors using mode: "exact", in your inits. Then you are able to initialize a single tinymce instance using
tinyMCE.execCommand('mceAddControl', false, editorid); //editorid should be the id of the textarea
and the configurations of your inits will be aplied (I somehow got the feeling there is something pretty bad using two inits for all the tinymce editors (because it looks they get both called for all of them)).
EDIT: In order to be able to use different inits you should call mceAddControl using an initialization_object instead of an editor id only. Example:
var config_tinymce_xy = {
mode: 'exact',
theme: "advanced",
content_css : "my.css",
plugins: "code,...",
theme_advanced_buttons1 : "code,...",
theme_advanced_buttons2 : "...",
...
};
var config_tinymce_xy2 = {
mode: 'exact',
theme: "simple",
content_css : "my.css",
...
};
init_obj = {element_id:'my_editor_id', window: window};
$.extend(true, init_obj, config_tinymce_xy);
tinyMCE.execCommand('mceAddFrameControl',false, init_obj);
I have a page that has multiple TinyMCE editors on it. i would like one of them to have the autoresize plugin loaded and the other one i would like to stay a fixed size.
Is there any way to do this?
You can, by simply instantiating the editors with different configurations.
For example, say you have two textareas (area1, area2). Instead of using
tinymce.init({
mode : "textareas",
...
});
which will load tinyMCE in for both textareas on the page, you can instead use
tinymce.init({
mode : "exact",
elements :"area1",
....
});
tinymce.init({
mode : "exact",
elements :"area2",
....
});
with different plugins in each config.
The exact mode is usefull but don't workout in this case and others.
I'm trying to show 2 editors one in Portuguese and other in spanish (I tried fist in Engish but i'm not sure of the language code) and the interface shows only with the last language (last tinymce.init)
tinymce.init({
mode : "exact",
elements : "area1",
language : 'es',
add_unload_trigger : false,
plugins : 'wordcount',
maxCharacters : 130 // this is a default value which can get modified later,
});
tinymce.init({
mode : "exact",
elements : "area2",
language : 'pt_PT',
add_unload_trigger : false,
plugins : "wordcount table",
maxCharacters : 50 // this is a default value which can get modified later,
});
I'll try some possible solutions and edit my answer today.