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'
});
Related
I would like to provide a .lead custom style in Tiny with some concerns:
.lead class applies only on p tag
.lead class is removed from any other tags like h2.
when.lead class is apply, only Lead style is highlighted in style dropdown, not p tag.
I am able to achieve this with following code:
style_formats: [
{ title: 'Paragraph', block: 'p', attributes: { 'class': '' } },
{ title: 'Lead', block: 'p', attributes: {'class':'uk-text-lead'} },
{ title: 'Headline 2', block: 'h2', attributes: {'class': ''} },
],
available to test here https://fiddle.tiny.cloud/paiaab/5
The issue is: if I use code editor to add a custom class to eg. h2 tag and save, Headline 2 is not highlighted as class is not empty (I guess). No style is highlighted in dropdown.
Please see https://cln.sh/4pwR5g
Is there a way to remove only .lead class from other tag than p when switching tag and allow other class. Or allow class that contain lead
A solution would maybe be remove only .lead class from h2 attributes?
Any help would be appreciated ;-)
When activating the row editing plugin, the padding is bigger than usual:
Any idea of what can be affecting the layout or how to fix it?
Are you using a custom theme? It looks like the theme variables for rowediting are modified.
You can write changing the following variable: $grid-row-editor-padding
Details on how to manage theme variables here: Theming Ext JS. You could also use the Sencha Themer tool.
The grid is inside a form definition. It inherited the fieldDefaults, so I had to move them inside the fieldset definition and leave the grid outside of it:
Ext.define('App.view.Test', {
extend: 'Ext.form.Panel',
xtype: 'test-form',
layout: 'vbox',
bodyPadding: 20,
fieldDefaults: { //defined here will affect the roweditor plugin
labelAlign: 'top',
margin: 20
},
items: [
{
xtype: 'fieldset',
//fieldDefaults should be moved here and leave the grid untouched
items: [...]
},
{
xtype: 'grid',
[...]
}
});
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 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.
I have looked everywhere and I can't figure out how to add another option to tinyMCE's drop-down for formatting. I would like to duplicate and modify the formatting for the pre tag to also give it a class of .prettyprint so that I can quickly add code snippets to my posts.
It should be technically possible, but how and which file should I amend. Alternatively can I add a button that applies this formatting
You may add something like the following (style_fomats setting) to your tinymce init function in order to add a new option to the styles dropdown. Be aware that the class to be applied should be made available using the content_css configuration setting
style_formats: [{
title: 'block styles'
}, {
title: 'Name_to_be_displayed',
block: 'p',
classes: 'class_to_be_applied',
exact: true
}, {
title: 'inline styles'
}, {
title: 'Red text',
inline: 'span',
classes: 'red',
exact: true
}, {
title: 'Pre formatting',
inline: 'pre',
classes: 'xyzpre',
exact: true
}],
Alternatively can I add a button that
applies this formatting
Yes, you will need to write your own plugin, which is not that difficult.