Tinymce resize vertical only - tinymce

Is there anyway to force tinymce to resize vertical only? It breaks my layout when resized horizontal.
So that this works the same as a default textarea resize: vertical;

tinymce.init({
selector: 'textarea', // change this value according to your HTML
resize: true
});
resize option has 3 values:
false: to disable.
true: enable only Vertical resize
'both': enable both resize directions
check the Documentation
IMPORTANT NOTE: to make it work you have to enable the statusbar option, it's enabled by default, but in case if turned it to statusbar: false you will have to re-enable it statusbar: true

you can use:
tinyMCE.init({
// other stuff...
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false
});

Related

Configure the user's default choice on tinyMCE toolbar

I am using v5 of TinyMCE. By default, the style selected is 'Paragraph', as shown in this image :
[tinyMCE toolbar, as the user sees before he mades any format configuration]
But I know my users will all prefer to use 'Div' style. So I would like 'Div' to be selected by default. The toolbar should therefore appear like in this image :
[tinyMCE toolbar, as I want it to be configured by default]
Is it possible ?
I haven't find my answer in tinyMCE documentation.
Same question if you want for instead "bold" button to be selected by default, etc.
Thank you !
To replace the default <p> blocks with <div>, use forced_root_block: https://www.tiny.cloud/docs-3x/reference/Configuration3x/Configuration3x#forced_root_block/
tinymce.init({
// ...
forced_root_block : 'div'
});
To select the bold button by default, you could use execCommand: https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#execcommand
tinymce.init({
// ...
setup: function(editor) {
editor.on('init', function() {
this.execCommand('Bold');
});
}
});
Example fiddle combining both: https://fiddle.tiny.cloud/YShaab/1

TinyMCE 5 - How to control which buttons are shown in toolbar?

I have to remove some buttons from the tinyMCE 5 Editor.
How can I control which buttons are being shown?
I can't find anything in the documentation.
This is my init code:
tinymce.init({
selector: 'textarea.property_remark'
,branding: true
,menubar: false
,statusbar: true
,toolbar: true
});
I found it here
tinymce.init({
selector: 'textarea.property_remark'
,branding: true
,menubar: false
,statusbar: true
,toolbar: 'undo redo | styleselect | bold italic | link image'
});
In order to use certain toolbar buttons or menu options you need to load some plugins. check this link

Remove status bar and keep resize icon in tinymce 4

I am trying to remove the status bar and keep the resize icon in tinymce just like a normal text area resizer. Any idea ?
elementpath
This option allows you to disable the element path within the status bar at the bottom of the editor.
Type:
Boolean
Default Value:
true
Possible Values:
true, false
Example
tinymce.init({
selector:'textarea',// change this value according to your HTML
elementpath:false
});
TinyMCE does not support what you are trying to do via configuration. The resize handle is only visible via the status bar.
Unfortunately, there is no way to do it via component settings. But you can try and change css:
your-tiny-mce-textarea .mce-path.mce-flow-layout-item {
display: none !important;
}
UPD: This one seems more pretty:
your-tiny-mce-textarea.mce-statusbar {
border: 0 !important;
}
your-tiny-mce-textarea.mce-path {
display: none !important;
}
Maybe this will help someone in future, you can remove the entire status bar with the following option
tinymce.init({
selector: 'textarea', // change this value according to your HTML
statusbar: false
});
https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar

Edit TinyMCE style options

On a form, I work with TinyMCE for editing textarea's.
Now I just want to offer the options "bold", "italic" and "underline" in TinyMCE.
Which settings should I do in the tinymce.init();?
See the tinymce fiddle here.
Here is the code:
tinymce.init({
selector: "textarea", // change textareas into tinymce editors
plugins: [], // no additional plugins needed
toolbar: "bold italic underline", // only those three buttons
menubar: false // no display of the top menubar
});

how to disable tinymce editor

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");