I'm sorry if this question has been asked before, I've tried googling/looking on here/browsing the CKEditor forums and not come up with anything that I can seem to understand and implement (apologies, I'm not that great at this JavaScript stuff)
Basically, I want to add one custom option to the format dropdown list of CKEditor, it should create a span with a class like below:
<span class="custom-font"></span>
I've tried using the below in the "config.js" file, but it doesn't seem to work:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div;span'
config.format_span = { element : 'span', attributes : { 'class' : 'cutsom-font' } };
Can anybody point me in the right direction here?
The "format" only deals with block level elements so you can't use that to add span tag around selected text. You need "style" to do that. To add to the default styles that CKEditor comes with add your style object in the styles.js. That's where the default styles are defined. Also, you need to add "name" attribute to the object.
{ name: 'Your custom style', element: 'span', attributes: {'class':'custom-font'} }
If you want to make a list of your own styles to replace defaults you can find details HERE.
According to the link you can also use your own .js file to define styles or use stylesheet to fetch css styles.
Related
I am trying to add styles to my dialog header of my ui5 application, but the effect is not applied.
Here is the code:
`
onValueHelpRequest : function(oEvent) {
var sInputValue = oEvent.getSource().getValue(),
oView = this.getView();
if (!this._pValueHelpDialog) {
this._pValueHelpDialog = sap.ui.xmlfragment(
"zpractice.fragment.ValueHelp", this);
this._pValueHelpDialog.addEventDelegate({
onAfterRendering : function(oEvent) {
$("#selectDialog-dialog-header-BarPH").css({
"background-color" : "white"
});
}
})
var oDialog = this._pValueHelpDialog;
this.oView.addDependent(oDialog);
oDialog.getBinding("items").filter(
[ new Filter("name", FilterOperator.Contains,
sInputValue) ]);
}
this._pValueHelpDialog.open(sInputValue);
},
`
Could anyone help me with this?
Thanks in advance!
I tried to change the background of the header of the dialog box into white using jQuery.
The effect is nit getting apllied!
Instead of adding the background style manually in the controller you should style the dialog in the XML of the dialog. If there's no UI5 element (in the linked docs it's the sap.m.Button in your case it's the header) which you could style using a class attribute and corresponding css selectors in your stylesheet you could either use the dialog itself and the programmatic approach (see last section of previous link) or override the UI5 provided style classes. This approach is however not recommended as it is not upgrade-safe.
In general I would highly discourage using jQuery to manipulate your UI5 applications as there's almost always a better supported and less intrusive way to achieve the desired outcome.
Also as mentioned in the linked doc the inline stylesheet should not be used and an external stylesheet (in your project) should be used instead. An example for this can be found here: https://ui5.sap.com/#/topic/723f4b2334e344c08269159797f6f796.html
$("#selectDialog-dialog-header-BarPH").css("background-color", "white");
I want to use CSSStyleSheet.insertRule() to insert a new class inside a specific stylesheet. That stylesheet has the id "customStylesheet" for example.
This page says "A specific style sheet can also be accessed from its owner object (Node or CSSImportRule), if any.". However I can't figure out how to access that specific stylesheet.
It is fairly straight forward.
var sheet = document.getElementById('customStylesheet').sheet;
sheet.insertRule('.someclass {display: none;}'); // was missing a ' here
Here is a fiddle showing it working. I have updated the fiddle to show it working on a style tag in the head also.
This can be done with no jQuery. Say that you wished to set everything with the class purpleText to color: purple. First, you would get the stylesheet using document.styleSheets[_index_].ownerNode.sheet. Next, use the insertRule() method. The parameter is just a string holding the CSS code, as in ".purpleText{color: purple}". So, for the first stylesheet, the whole command would be document.styleSheets[0].ownerNode.sheet.insertRule(".purpleText{color: purple}");
To get a styleSheet by ID, use this:
document.getElementById('stylesheet').sheet;
What I want to do is something similar to the native foreground / background colors dialog. The difference is, it will have buttons with colors directly in a toolbar. So one plugin has to have multiple buttons, with different styles (colors). The other problem is, that this native plugin sets CSS color and background-color properties. I need to use classes instead, like this:
text <span class="fg red">colored text</span> text
and
text <span class="bg blue">colored background</span> text
Clicking into colors have to change color of a span with fg class (and background colors - bg class)
How can I achieve this?
First of all you have to add your own buttons. Check source of any plugin that does this - e.g. basicstyles/plugin.js. You've got to create command for each button and then register all buttons. Simple.
Then I propose to use our styles implementation. It allows to apply/remove defined style from the given selection/range. In the style definition you can specify that it will apply span element with given classes. Check this style definition.
And the last step - join these things together. Command associated with button should apply/remove this style. There's ready to use one - check CKEDITOR.styleCommand usage here.
Everything you need is in basicstyles plugin, so just refer there.
Pozdrawiam :)
If you're flexible about the interface, you could just add your styles to the "Styles" selector.
It would be less work than creating your own plugin. Especially if you're using CKEditor 3.6 or later where you could use the new Stylesheet Parser Plugin.
You're welcome to use the plugin from the answer where you asked me to look at this question.
It's based on the "basicstyles" plugin. If you look at the comments I included, you'll see that you can use it to add multiple buttons and multiple styles.
// This "addButtonCommand" function isn't needed, but
// would be useful if you want to add multiple buttons
You would have multiple calls to the addButtonCommand method.
addButtonCommand( 'Fg_red' , 'Label' , 'fg_red' , config.coreStyles_fg_red );
addButtonCommand( 'Bg_blue' , 'Label' , 'bg_blue' , config.coreStyles_bg_blue );
The last line of code after the plugin code is what you add to your configuration. You can use any attributes that you like:
CKEDITOR.config.coreStyles_fg_red = { element : 'span', attributes : { 'class': 'fg red' } };
CKEDITOR.config.coreStyles_bg_blue = { element : 'span', attributes : { 'class': 'bg blue' } };
You could also create a plugin based on the "colorbutton" plugin. It creates the native foreground / background colors dialog.
Does anyone know how i can make my textarea in a ckeditor object, use a class or custom style so i can show to the user something similar to what is getting rendered in the site?
Thanx
So i'm using bodyClass: 'class' in the config object, i use firebug and see the iframe body has my class applied, but it doesn't get the classes properties neither from my CSS, nor from contents.css (ckeditor)...
Well i was able to do it, adding an event to the object like this:
editor.on('instanceReady', function(){
$('#'+divname).find('iframe:first').contents().find('body').css({
'background-color':'#000000',
'font-family':'arial',
'font-size':'12pt',
'color':'#cdcdcd'
});
});
if anyone has the real solution, i think bodyClass should be it, i will gladly change my code.
Thanx
Simply edit the css file located at contents.css - edit the .cke_editable class to whatever suits your needs. Works 24/7
I'm using a WYSIWYG Editor called CKEditor and its really awesome. Inside the editor, whenever I add a new Heading/Text/DIV/Image/ anything else for that matter, I want it to stay attached with a class:
Like
<h2 class="blah">Sample Text</h2>
<img src="/abc.png" class="blah1" />
Here's a reference link:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide
I'm not good with Javascript, if anyone can help me out, I would be really Grateful!
Thank you.
For example, the following code will ensure that elements will have their "alt" attribute filled:
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
img : function( element )
{
if ( !element.attributes.alt )
element.attributes.alt = 'An image';
}
}
});
Read the Overview (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Data_Processor) this example was taken from there.
You can do the same for "class". Take a look at the existing output, then either add "class" if it's missing or replace them if that's your intent.
take a look at answers for this question.
customize the dialogs during the define, add a "class" field and then set and get the contents in the setup and commit functions.
look at ckeditor/_samples/api_dialog.html for background on modifying dialogs.
for the Headings you'd have to look at modifying the commands. Those don't have dialogs.
There's probably a way to always apply the same class based on the particular tag in the "data processor". Do you want to always set the same class everytime or allow the user to choose the class, that's important because it changes your options quite a bit.