In my project I have a requirement to remove the paragraph format like "Address" and "Formatted" from the drop down and to add a new custom format called "Links" which would be Arial, 14px, bold, red. Is it possible to add custom paragraph format in CKEditor?
Use CKEDITOR.config.formatTags to specify some new formatting:
CKEDITOR.replace( 'editor1', {
format_tags: 'p;h2;h3;pre;links', // entries is displayed in "Paragraph format"
format_links: {
name: 'Links',
element: 'span',
styles: {
color: 'red',
'font-family': 'arial',
'font-weight': 'bold'
}
}
} );
To know more about styles see how CKEDITOR.styleSet works. Also note that since CKEditor 4.1, removing styles from "Paragraph format" has an impact on Advanced Content Filter.
Since you're working with Drupal, ckeditor.styles.js is the file you're looking for, this will allow you to add/edit/remove entries in the Styles menu.
Comment out any entries you don't want, and use something like this to add a new paragraph format:
{ name : 'Links', element : 'p', attributes : { 'class' : 'links' } },
This will add the CSS class links to whatever paragraph you want, and you can define the class in your theme stylesheet. Make sure to define the class in ckeditor.css if you don't see the changes applied in the CKEditor instance.
Alternatively, you could also apply the inline styles directly:
{ name : 'Links', element : 'p', attributes : { 'style' : 'font: bold 14px Arial, sans-serif; color: red;' } },
But the first method is clearly more flexible/clean.
Make sure to clear your Drupal and/or browser cache if you don't see your changes show up immediately.
Related
The Gutenberg editor comes with an embedded stylesheet. Here's a snippet from that stylesheet:
...
.editor-styles-wrapper {
font-family: "Noto Serif", serif;
font-size: 16px;
line-height: 1.8;
color: #191e23;
}
.editor-styles-wrapper p {
font-size: 16px;
line-height: 1.8;
}
...
I've enqueued my own editor stylesheet using the following:
add_action("enqueue_block_editor_assets", "enqueue_custom_block_editor_assets");
function enqueue_custom_block_editor_assets() {
wp_enqueue_style("editor-style", get_stylesheet_directory_uri()."/editor-style.css", null, null);
}
Since I have my own editor stylehseet, I'd like to get rid of the default one. A search on this topic yields lots of results for removing default block styling on the front end, but I'm referring to the editor styling on the back end. Thanks for your help!
I drilled down into how it was being injected and found a way to nuke it out via the block_editor_settings filter. There is a styles key with an array that contains the css. The only iffy thing about this for me is that I'm assuming the shape of the array will always be the same, I should be doing some type of check here.
add_filter( 'block_editor_settings' , 'remove_guten_wrapper_styles' );
public function remove_guten_wrapper_styles( $settings ) {
unset($settings['styles'][0]);
return $settings;
}
My solution was a workaround to automatically override any styles within the .editor-styles-wrapper. Using LESS:
editor-style.css
.editor-styles-wrapper {
#import "style.less";
}
I would still love to disable that embedded stylesheet though, if anyone knows how to do that.
For CKeditor, is there a way to have it apply a class name instead of a style? So instead of doing:
<span style="color: #ffffff;">Text</span>
It would do:
<span class="white">Text</span>
Simplified to make more sense, but except for the typical bold/italics/underline, we need to be able to use variables in a SCSS sheet for consistency and multiple clients. This would not be something picked from a custom style list - it needs to be automatic when people click on existing toolbar options. Has anyone managed something like this?
Try to put this code in your config.js file:
config.stylesSet = [
{ name: 'CSS White', element: 'span', attributes: { 'class': 'white' } }
]
It will show you a 'CSS White' option in the style select field of your ceditor.
I'm using Redactor v9.2.1. I'm trying to allow my customers to use style tags in their CMS, but redactor strips them from the content.
When I add the following:
<style type="text/css">
.red{color:red;}
</style>
redactor strips it to:
<p>
.red{color:red;}
</p>
I've made sure that deniedTags is not including 'style' in my settings object and I'm not using the allowedTags attribute since it conflicts with deniedTags.
Here is my settings object that I'm passing to the redactor init:
var settings = {
deniedTags:[
'html', 'head','link', 'body', 'meta', 'applet'
],
observeLinks: true,
iframe: true,
convertVideoLinks: true
};
Any help is appreciated.
http://imperavi.com/redactor/docs/settings/clean/#setting-deniedTags
Top-level HTML tags ('html', 'head', 'link', 'body', 'meta', 'style',
'script', 'applet') will always be removed regardless of this setting,
unless wrapped in 'pre' tag (formatting option 'Code')
Edit
So you can't add a style tag inside the editor, as I read in the docs. Seems like you have these options:
Style individual tags outside the editor: You add the parent selector .redactor-editor and then the tag name. See http://imperavi.com/redactor/examples/typography/
Add several formattingAdd options to let users pick up custom styles from the formatting dropdown:
$('#redactor').redactor({
formattingAdd: [
{
tag: 'p',
title: 'Red Block',
class: 'red-style'
}
]
});
/**
* The above would create a new formatting entry,
* which you define with 2 css selectors:
* one for the class of the entry, another for the dropdown entry
*
* .red-style, .redactor-dropdown .redactor-formatting-red-style {
* color: red;
* }
*/
Notice css selector rule for the dropdown, which is .redactor-dropdown .redactor-formatting-YOUR_CSS_CLASSNAME. This also is important:
formattingAdd can only be applied to p, pre, blockquote and header
tags.
So you can't apply it to <div>. If you need block element, use <p>. Also, if you need inline, you CAN use <span>... it works, see fiddle: http://jsfiddle.net/a4df10vj/1/
Good day, I am building a web application and the user is allowed to upload a photo using a fileField. I am trying to style the button, however, nothing I try seems to work. At first I tried using the element inspector to look for the proper class type but that did not give the results I wanted. Next, I assigned a class to the fileField and created a css for that style but it did not work either. Here is my code:
my filefield
{
xtype: 'filefield',
x: 200,
y: 910,
cls: 'fileBtnClass',
width: 200,
fieldLabel: 'LABEL',
hideLabel: true,
labelStyle: 'text-align: center; color: white',
labelWidth: 140,
buttonOnly: true,
buttonText: 'Browse'
}
my css:
.fileBtnClass {
font-size: 40px !important;
font-family: 'Arial' !important;
font-weight: normal !important;
color: black !important;
background-color: white !important;
border-radius: 15px !important;
text-align: center;
}
What happens is that the button size gets larger to accommodate the text. However, the text itself does not get larger in any way.
Can anyone help me with my situation? Styling certain fields in ExtJS proves to be a pinch at times. Any help is very much appreciated. Thank you.
A Ext.form.field.File has a buttonConfig property which expect a Ext.button.Button configuration. If you filter for Cls within the button API you get at least 10 Cls properties that can all be used to style the button.
arrowCls : String
The className used for the inner arrow element if the button has a menu. ...
baseCls : String
The base CSS class to add to all buttons. ...
cls : String
A CSS class string to apply to the button's main element.
componentCls : String
CSS Class to be added to a components root level element to give distinction to it via styling.
disabledCls : String
CSS class to add when the Component is disabled. ...
focusCls : String
The CSS class to add to a button when it is in the focussed state. ...
iconCls : String
A css class which sets a background image to be used as the icon for this button. ...
menuActiveCls : String
The CSS class to add to a button when it's menu is active. ...
overCls : String
The CSS class to add to a button when it is in the over (hovered) state. ...
pressedCls : String
The CSS class to add to a button when it is in the pressed state. ...
Additional Info
cls -> the additional one
This class is added to the inner element of the button
baseCls -> the one who change it all
// following the template that is used to render a button
'<span id="{id}-btnWrap" role="presentation" class="{baseCls}-wrap',
'<tpl if="splitCls"> {splitCls}</tpl>',
'{childElCls}" unselectable="on">',
'<span id="{id}-btnEl" class="{baseCls}-button" role="presentation">',
'<span id="{id}-btnInnerEl" class="{baseCls}-inner {innerCls}',
'{childElCls}" unselectable="on">',
'{text}',
'</span>',
'<span role="presentation" id="{id}-btnIconEl" class="{baseCls}-icon-el {iconCls}',
'{childElCls} {glyphCls}" unselectable="on" style="',
'<tpl if="iconUrl">background-image:url({iconUrl});</tpl>',
'<tpl if="glyph && glyphFontFamily">font-family:{glyphFontFamily};</tpl>">',
'<tpl if="glyph">&#{glyph};</tpl><tpl if="iconCls || iconUrl"> </tpl>',
'</span>',
'</span>',
'</span>',
// if "closable" (tab) add a close element icon
'<tpl if="closable">',
'<span id="{id}-closeEl" role="presentation"',
' class="{baseCls}-close-btn"',
'<tpl if="closeText">',
' title="{closeText}" aria-label="{closeText}"',
'</tpl>',
'>',
'</span>',
'</tpl>'
The classes that are directly affected by baseCls:
// applied in the template
{baseCls}-wrap
{baseCls}-button
{baseCls}-inner
{baseCls}-close-btn
// just a view that are (may be) applied in code
{glyphCls}
{innerCls}
In a sencha app, I want to create two or more "Panel" in the same page, but with different Style.
Panel_1.js:
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title",
//some try
componentCls:'panel_1',
cls:'panel_1'
...
});
Panel_2.js:
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title",
componentCls:'panel_2'
});
I add these two panels in one page, eg. the "center" of mainview. Add for css file with css class panel_1 and panel_2. But does not work.
how can I set these two panel with different Title, Background color, color, border, and so on.
Add the same question, I want different Button, eg. Blue Button with yellow text, red Button with white text, in a same toolbar.
I try override the extjs css class, eg. x-panel-body . You know, all compoent will be changed. That is not what I want.
It's hard to tell what you're having a hard time with. What you seem to be trying to do does work. I'll just provide a simple example, see https://fiddle.sencha.com/#fiddle/ecd
The easiest way is to add a cls to your panel, then you can use CSS to apply only within those classes. You can also add cls to items inside of your component. Also, Ext has some classes it already applies so you can use them (x-body, x-header for Ext.panel.Panel). The following example shows you how to scope your .x-header definitions so they only apply to your class
JavaScript
Ext.define("MyApp.view.Panel_1",{
extend:'Ext.panel.Panel',
title:'Panel 1 title',
cls:'panel_1',
html: 'Here I am',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
Ext.define("MyApp.view.Panel_2",{
extend:'Ext.panel.Panel',
title:'Panel 2 title',
cls:'panel_2',
html: 'Here I am again',
buttons: [{text: 'OK', cls: 'ok'}, {text: 'Cancel', cls: 'cancel'}]
});
CSS
.panel_1 .x-header{
background-color: blue;
}
.panel_1 .ok{
background-color: green;
}
.panel_2 .x-header{
background-color: yellow;
}
.panel_2 .cancel{
background-color: red;
}
Most typically, you would extend your sass resources to create custom classes for your both Panels (or at least for the one you wish to change).
You could do it with the Sencha Architect, which has a 30 day trial period.
The trick would then be to add a ui tag, that would then be added to your generated class name
Ext.define("MyApp.view.Panel_2", {
ui: 'black'
});
would then be generated with a class called like
.panel-default-black
for this class you could then create your sass for all internal elements
sass/component.css would then for eg contain
.panel-default-black {
background-color: black;
color: #ffffff;
.panel-default-header {
background-color: $some-predefined-value-in-another-sass-file;
}
}
another option would be to use the UI-label, like:
#include extjs-panel-ui(
$ui-label: 'black',
$ui-background: black;
$ui-color: white;
$ui-header-background-color: blue;
);
After compiling the theme, you would then see the changes between the 2 panels.
More info, you could find on the site of Sencha
Yet another none recommended way, would be to use the style tag, and to directly give your style for your panel, but that is not recommended to use