I use custom format presets to apply bold / italic via the inline styles:
formats: {
bold: {inline: 'span', selector: 'span,a,sub,sup', styles: {fontWeight: 'bold'}},
italic: {inline: 'span', selector: 'span,a,sub,sup', styles: {fontStyle: 'italic'}},
}
After both of the formats are applied to the selected text, there's no possibility to turn off them: if a user clicks on the 'Bold' or 'Italic' button, it doesn't become 'unpressed' and the corresponding format is not removed. This problem occurs only when more than one word is selected.
Maybe there are some options to fine-tune TinyMce behavior when removing format?
(UPD):
TinyMCE Fiddle: http://fiddle.tinymce.com/BVfaab
Tested in Chrome 59.0.3071.104 for Linux.
Related
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
In TinyMCE v4.x we used the textcolor plugin which added a toolbar button for choosing the font color. Using the textcolor_map configuration property we could provide an array of specific colors.
TinyMCE v5 has moved this functionality into the default code. I can't find any documentation on if, and how we can customize the available colors.
This worked in tiny v4 using the textcolor plugin, but doesn't in v5:
textcolor_cols: 2,
textcolor_rows: 1,
textcolor_map: [
'363E47', 'Black',
'E74C3C', 'Red'
]
This function still exists in TinyMCE 5:
https://www.tiny.cloud/docs/configure/content-appearance/#color_map
For example:
tinymce.init({
selector: 'textarea', // change this value according to your HTML
toolbar: 'forecolor backcolor',
color_map: [
'FF0000', 'Red',
'FFFF00', 'Yellow',
'008000', 'Green',
'0000FF', 'Blue'
]
});
Here is a working TinyMCE Fiddle: https://fiddle.tiny.cloud/bAhaab
I have this tinyMCE init:
tinymce.init({
selector: "textarea",
theme: "modern",
readonly:1,
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar: "print",
readonly:1,
height : 500
});
but with readonly:1 but all the menubar is disabled and I would like to have
the print option activated.
It's no difficult to have print option active in menu and, otherwise, not allowed to edit the textarea.
Just add the plugin "noneditable" in the lists of your plugins.
Add also these two statements in your tinymice.init:
content_css : "css/noneditable.css",
noneditable_regexp: /\[\]/g,
Delete the readonly statement.
With the definition of regexp all text inside "[]" is not editable. You can use any character instead of [].
If you want to put into noneditable all the textarea, use :
$foo="<div class='mceNonEditable'>[". $foo."]</div>";
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 can I add custom classes to tinymce 4? I want to have a select in where users can select a class to use on their text. I don't want to use the standard plugins like forecolor, because I want to give certain classes that my users can use.
Short example:
tinymce editor "select class" (button in the toolbar)
Red
Blue
Green
my_custom_css.css
.red { color: red; }
.blue { color: blue; }
.green { color: green; }
You can use the style_formats configuration option for this. The TinyMCE documentation provides all information you need: http://www.tinymce.com/wiki.php/Configuration:style_formats
The styles specified in that option will appear in a dropdown menu and can be applied as inline styles as well as classes. If you choose to apply classes to the selected elements, you'll probably like to include a custom stylesheet for the editor's content using the content_css option.
In your example, the respective part of the configuration would look like this:
tinymce.init({
...
style_formats: [
{title: 'Red', inline: 'span', classes: 'red'},
{title: 'Green', inline: 'span', classes: 'green'},
{title: 'Blue', inline: 'span', classes: 'blue'}
],
content_css: 'my_custom_css.css'
});