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
Related
In prior versions the styles of menuitems could be adjusted in the creation, 'style' is not used in v6.
I am specifically trying to style menus in a custom plugin menubutton each with their own color.
How can this be adjusted in v6.
for example
{ type: 'menuitem', text: 'blue item', style: 'background:blue;', onAction: function() { ... }
style is ignored
I am using summernote in my project and i want customize style button with "magic pen" icon. In this button you can set h1-h6 or quotes, code(pre tag)....
There is my summernote toolbar settings:
toolbar: [
['style', ['style']],
['style', ['bold', 'italic', 'underline', 'clear']],
['view', ['fullscreen', 'codeview']],
['help', ['help']]
]
first style setting is for "magic pen" button (first from left on toolbar), second style is for bold italic... button group (second from left on toolbar).
So is there some possibility customize first style button with "magic pen" icon?
I need remove some options from there... h1, h5, quotes, code...
On internet i was find some solutions which not work:
StyleTags options (not toolbar):
styleTags:
['p', 'blockquote', 'pre']
Or specify first 'style':
toolbar: [
['style', ['blockquote', 'pre']],
but without success can anybody help?
Not sure if you got sorted with this but had this issue today, Summernote documentation wouldn't be the best but this worked for me and might help someone else out in the future.
$(document).ready(function() {
$('textarea[data-content~=summernote-content]').summernote({
height: 400,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['help', ['help']]
],
styleTags: ['p', 'h1', 'h2', 'h3', 'h4', 'h5'],
});
});
So you just define the style as normal in the toolbar tags but then below it you specify the actual attributes you wish to show.
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.
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'
});