popups.inline#
Type: Array
Default: array
By default, the following array is set in the inline popup for inline tags:
['code', 'underline', 'sup', 'sub', 'highlight', 'removeinline'] You can take out what's unnecessary and add what's needed:
Redactor('#entry', { popups: { inline: ['code', 'underline', 'removeinline'] } }); Of course you can change the order of popup items like this:
Redactor('#entry', { popups: { inline: ['highlight', 'code', 'sup', 'sub', 'underline', 'removeinline'] } }); inlineItems#
Type: Object
Default: false
You can add your own styles in the Inline dropdown. To do this, you need to specify an object in the setting, like this:
Redactor('#entry', { inlineItems: { 'color-red': { title: '<span style="color: #F93943">Color Red</span>', params: { tag: 'span', style: { color: '#F93943' } } }, 'color-green': { title: '<span style="color: #1CAC2B">Color Green</span>', params: { tag: 'span', style: { color: '#1CAC2B' } } }, 'text-24': { title: '<span style="font-size: 24px">Class Text 24px</span>', params: { tag: 'span', classname: 'text-24' } }, 'text-red': { title: '<span style="color: #F93943">Class Text Red</span>', params: { tag: 'span', classname: 'text-red' } }, 'boldmark': { title: '<span style="font-weight: 700; color: #ff3265;">Boldmark<span>', params: { tag: 'span', classname: 'boldmark' } } } }); Since all styles are reset inside the editor, you need to specify the CSS for the style to be displayed in the content, for example, like this:
.rx-content .text-24 { font-size: 24px; } .rx-content .text-red { color: #F93943; } .rx-content .boldmark { font-weight: 700; color: #ff3265; } You can specify more than one class:
classname: 'mystyle1 mystyle2'Inside the "title" you can specify a style for the item that shows visually what the style looks like:
title: '<span style="color: red; font-weight: bold;">My Style</span>'Styles work for the following types of blocks in the editor:
See the work example for more details.