I cannot seem to apply styles using this style definition:
var object = {
type: CKEDITOR.STYLE_BLOCK,
attributes: {
'class': 'foo'
}
};
var style = new CKEDITOR.style(object);
I have allowedContent set to true in my configs.
Styles definitions in CKEditor don't have the type property. CKEditor uses element property to know when and how to apply the style:
var object = {
element: 'h1', // This style will be applied to h1 element
attributes: {
'class': 'foo'
}
};
More examples on defining styles can be found in official guide.
Related
I made a inline widget similar a placeholder (ckeditor4), but now I want to render a dropdown when the widget is selected to show options values to replace the placeholder. I trying use BalloonPanelView but no success until now, someone have a idea about how to make it?
this.editor.editing.view.document.on('click', (evt, data) => {
evt.stop();
const element = data.target;
if (element && element.hasClass('placeholder')) {
if (!element.getAttribute('data-is-fixed')) {
const balloonPanelView = new BalloonPanelView();
balloonPanelView.render();
['option1', 'option2', 'option3'].forEach((value) => {
const view = new View();
view.set({
label: value,
withText: true
});
balloonPanelView.content.add(view);
});
balloonPanelView.pin({
target: element
});
}
}
});
I found the solution using ContextualBalloon class:
import ContextualBalloon from "#ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon";
// Define ballon
const balloon = editor.plugins.get(ContextualBalloon);
const placeholderOptions = // Here I defined list with buttons '<li><button></li>'
// Finnaly render ballon
balloon.add({
view: placeholderOptions,
singleViewMode: true,
position: {
target: data.domTarget
}
});
I'd like to restrict the nesting of specific classes which were made available in the styles dropdown.
A span.my-style-1 should not be able to nest a span.my-style-2.
I was hoping to use the disallowedContent rule to at least recurse the selected elements and return true or false based on the classes applied to it's selection.
In fact it's stuck and only prints a fake element based on the first style (my-style-1).
CKEDITOR.stylesSet.add( 'my_styles', [
{ name: 'My Style 1', element: 'span', attributes: { 'class': 'my-style-1' } },
{ name: 'My Stile 2', element: 'span', attributes: { 'class': 'my-stile-2' } },
]
);
CKEDITOR.config.allowedContent = {
$1: {
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
CKEDITOR.config.disallowedContent = {
span: {
match: function( element ) {
console.log(element.classes, element.children.length, element.parent);
return false;
}
}
}
In CKEditor I'm having issues adding some dataProcessor rules.
I have a custom plugin defined in ckeditor/plugsin/x
I have added the plugin name to config.js extraPlugins
My plugin looks like
CKEDITOR.plugins.add('x',
{
init:function(editor)
{
editor.dataProcessor.htmlFilter.addRules(
{
elements :
{
div : function( element )
{
element.setAttribute("x","y");
}
}
});
editor.dataProcessor.dataFilter.addRules(
{
elements :
{
div : function( element )
{
element.setAttribute("x","y");
}
}
});
});
However it doesn't insert the attribute.
Am I doing something wrong here?
CKEDITOR.dataProcessor works with CKEDITOR.htmlParser.element instead of CKEDITOR.dom.element. CKEDITOR.htmlParser.element is not a real DOM element but an abstract object to make parsing and filtering much easier. It has own set of methods and attributes.
Also note that dataFilter works on input data (what comes to the editor) while htmlFilter deals with output data (content produced by the editor).
You should also get used to Allowed Content Filter because quite likely you need to configure it to have the editor working properly, i.e. config.extraAllowedContent = 'div[x]'.
See the fiddle.
CKEDITOR.replace( 'editor', {
extraAllowedContent: 'div',
on: {
pluginsLoaded: function() {
this.dataProcessor.dataFilter.addRules( {
elements: {
div: function( el ) {
console.log( 'processing', el, 'in dataFilter' );
el.attributes.datafilter = 'x';
}
}
} );
this.dataProcessor.htmlFilter.addRules( {
elements: {
div: function( el ) {
console.log( 'processing', el, 'in htmlFilter' );
el.attributes.htmlfilter = 'y';
}
}
} );
}
}
} );
I'm having some trouble adding toolbar options to the CKEditor4 inline toolbar option. I've been reading the docs and still can't figure out where my problem is.
I'm creating a div on the fly, then adding the CKEditor to the div. Everything works fine, but I want to remove some of the tool bar options and add some other ones. When I add parameters to the inline() call nothing changes?
Here is how I create the instance on the fly:
.on('dblclick', function(e){
e.preventDefault();
e.stopPropagation();
ed.ck_restore();
ed.ck_active_block = $(this).attr("id");
ed.ck_block_data = $(this).html();
var block_width = $(this).css("width");
var block_height = $(this).css("height")+20;
var block_padding_top = $(this).css("padding-top");
var block_padding_right = $(this).css("padding-right");
var block_padding_bottom = $(this).css("padding-bottom");
var block_padding_left = $(this).css("padding-left");
var padding = 'padding-top: '+block_padding_top+';padding-right: '+block_padding_right+';padding-bottom: '+block_padding_bottom+';padding-left: '+block_padding_left+';';
var editor = '<div id="edit" contenteditable="true" style="margin-top: -'+block_padding_top+'; margin-left: -'+block_padding_left+';'+padding+' width: '+block_width+'; height: '+block_height+';background-color: #fff;position: absolute;">'+ed.ck_block_data+'</div>';
$("#"+ed.ck_active_block).prepend(editor);
if(CKEDITOR.instances.edit)
{
CKEDITOR.instances.edit.destroy(); //remove any previously created instances
}
CKEDITOR.inline("edit",
[CKEDITOR.config.fontSize_style = {
element: 'span',
styles: { 'font-size': '#(size)' },
overrides: [ {
element: 'font', attributes: { 'size': null }
}]
}]
);
$("#edit").click(function(e){e.stopPropagation();}).focus();
$("w_save").text("1");
});
http://docs.ckeditor.com/#!/api/CKEDITOR-method-inline
The docs imply I can pass a configuration parameter to change the options, but I'm missing something and after 3 hours of trying I need a bit of help.
Any help is appreciated.
Thanks.
I don't know what that meant to be:
CKEDITOR.inline("edit",
[CKEDITOR.config.fontSize_style = {
element: 'span',
styles: { 'font-size': '#(size)' },
overrides: [ {
element: 'font', attributes: { 'size': null }
}]
}]
);
It is invalid JavaScript code. Have you checked your JS console?
Anyway, CKEDITOR.inline accepts two arguments - name and config object.
CKEDITOR.inline( 'edit', {
fontSize_style: {
element: 'span',
styles: { 'font-size': '#(size)' },
overrides: [
{ element: 'font', attributes: { 'size': null } }
]
},
language: 'pl',
removeButtons: 'Bold,Italic' // or set toolbar or toolbarGroups.
} );
Thanks for the reply Reinmar. I was able to find another solution. Here is the code for others:
CKEDITOR.inline("edit",{customConfig : "mycustomConfig.js"});
This referenced a custom config file, I just pulled it from an example config on the CKEditor site and changed some of the options. Works now.
If I add a paragraph style to the CKEdtior
eg:
format_p: { element : 'p', attributes : { 'style' : 'FONT-SIZE:16px;color:#000000;FONT-STYLE:normal;FONT-FAMILY:Arial, Helvetica, sans-serif;font-weight:normal;' } }
The default style when pressing the enter key is blank. However, if I set the style to "Normal" the style is applied and subsequent p's created by clicking the enter key include the style above.
What I want is for all paragraphs (tag 'p') to use the "Normal" style by default. Is there a way to achieve this?
I think you have use 'contentsCss', have you try 'dataProcessor' like this :
CKEDITOR.on('pluginsLoaded', function (event) {
event.editor.dataProcessor.dataFilter.addRules({
elements: {
p: function (element) {
// element.attributes
}
}
});
event.editor.dataProcessor.htmlFilter.addRules ({
elements: {
p: function (element) {
// element.attributes ...
}
}
});
});