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 ;-)
Related
I wanted to apply style for Icon in Select component with "filled" variant and opened state. I'm using createMuiTheme. As I understand, I need to overwrite style, when Icon has two classes at once:
MuiSelect-iconFilled-32 MuiSelect-iconOpen-31.
I got:
MuiSelect: {
iconFilled: {
borderLeft: `1px solid ${colors.lightGray}`,
'&.MuiSelect-iconOpen': {
borderLeft: 'none',
},
},
},
&.MuiSelect-iconOpen doesn't work...
Here is a html representation of Select:
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',
[...]
}
});
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'
});
I would like to split a form across several tab panels to avoid a (very) long form (forcing the user to scroll quite a lot to fill every field).
For the moment, I use fieldsets to group fields, but I would like to put the respective fields in separate tabs.
Is there a way to do that ?
Thanks
Actually, it is simply possible to add a 'tabpanel' inside the 'formpanel', and the fields values will still be accessible (when using getValues() or submit())...
Simple enough ;)
Yes, Create a tab panel and put each respective field(s) in its own tab
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Tab1',
html: 'Tab 1',
items:[{
xtype:'textfield',
fieldLabel:'Name'
}]
},
{
title: 'Tab2',
html: 'Tab 2',
items:[{
xtype:'textfield',
fieldLabel:'Date'
}]
}
]
});
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.