when I paste stuff from word to ckeditor(my version is 4.13.0) - it is pain in the ass how to set the right configuration.
I know that a lot of spans are coming from word so I try to escape them by changing text colors and text formats to 'font' instead like this
//default for font and color are span but change to font because need to escape span when paste from word
config.fontSize_style = {
element: 'font',
styles: { 'font-size': '#(size)' },
overrides: [ { element: 'font', attributes: { 'size': null } } ]
};
config.font_style = {
element: 'font',
styles: { 'font-family': '#(family)' },
overrides: [ { element: 'font', attributes: { 'face': null } } ]
};
config.colorButton_foreStyle = {
element: 'font',
attributes: { 'color': '#(color)' }
};
config.colorButton_backStyle = {
element: 'font',
styles: { 'background-color': '#(color)' }
};
but I still need span for specific class like
config.allowedContent =
'h1 h2 h3 h4 strong u strike sub sup blockquote em ul ol li p ;table[*]{*}(*);font[*]{*}(*);s[*]{*}(*); td[*]{*}(*); th[*]{*}(*); tr[*]{*}(*);' +
'a[!href,target,class,onclick,id](*);' +
'img[!src,alt,width,height];' +
'span[!class](update,textnote,andy,footnote);' +
'div[*]{margin-left,margin-right,text-align}(*);'
;
but when I copy and paste some stuff ckeditor tranforms
<span style="background-color:white>
into <font style="background-color:white>
I definitely don't want that - how can I disable it when paste from word?
I tried set config.pastefilter differently but nothing works!!
Related
I a project I work on we need to restrict users with predefined styles that can be changed by the user.
In my jsFiddle the function setStyle() works. You can try out by uncommentting the setStyle([]). It seems to me that I can use the config.stylesSet = assignment only once.
The function to change the style does not work after a button click nor after setTimeout.
Is there any way to set styles via a script in CKE4 more than once?
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
CKEDITOR.stylesSet.add( 'my_styles2', [
// Block-level styles
{ name: 'Default Title', element: 'h2', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
] );
var ckeditor = CKEDITOR.inline('editor1', {
removePlugins: 'exportpdf,sourcearea',
fillEmptyBlocks : false,
});
// setStyle([])
setTimeout(() => {
console. log("resetting styles")
setStyle([])
}, 5000);
function setStyle(style){
// ckeditor.config.stylesSet = style
CKEDITOR.config.stylesSet = style
// console.log(ckeditor)
console.log(style)
}
Looking at these docs: https://ckeditor.com/docs/ckeditor4/latest/features/styles.html
So adding a style set should go something like this, but I can't get the H2 or H3 items to appear in my toolbar:
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
] );
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'firstname,MediaEmbed,justify,image';
//config.forcePasteAsPlainText = true;
config.extraAllowedContent = 'iframe[*]';
config.toolbar = 'Normal';
config.toolbar_Normal = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }
];
config.toolbar_Emails = [
{ name: 'basicstyles', items: [ 'Bold', 'Italic','Underline','Strike' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'JustifyLeft', 'JustifyCenter', 'JustifyRight' ] }
];
config.removeDialogTabs = 'link:advanced;link:target';
config.stylesSet = 'my_styles';
};
As mentioned in the docs
Open the config.js file available in your ckeditor directory, and edit the config.format_tags entry in the following way to display the text formatting toolbar.
// Enable all default text formats:
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
// Enable a limited set of text formats:
config.format_tags = 'p;h1;h2;pre;div';
I'm building out a simple site building tool using CKEditor. The tool has the ability to choose from and set palettes, which should be reflected in the styles drop down of CKEditor. However, it seems to me that styles cannot be overwritten in CKEditor. The code I have at the moment is:
CKEDITOR.stylesSet.add( 'styles', [
// Block-level styles
{ name: 'blah 1', element: 'h2', styles: { 'color': '#xxxxxx' } },
{ name: 'blah 2', element: 'h3', styles: { 'color': '#xxxxxx' } },
{ name: 'blah 3' , element: 'h4', styles: { 'color': '#xxxxxx' } },
{ name: 'blah 4' , element: 'h5', styles: { 'color': '#xxxxxx' } },
] );
CKEDITOR.config.stylesSet = 'styles';
Now, if I repeat this with new styles, I get:
ckeditor.js:232 Uncaught Error: [CKEDITOR.resourceManager.add] The resource name "styles" is already registered.
I've tried using CKEDITOR.replace, but this doesn't fix the issue. I guess, the obvious solution is to iterate the style name with each use; style1, style2, style3... but that's not very resource friendly. Does anyone have an actual solution for this?
Thanks,
Lee
have you tried renaming styles to default?
I use this and it works, mine loads an external style file. But same array structure.
CKEDITOR.config.stylesSet = 'default:http://' + window.location.host + '/folder/fckeditor.styles.js';
So, I figured out a solution by always destroying the panel, if it exists, before re-creating it. For instance:
if (CKEDITOR.instances['footer-' + i]) {
CKEDITOR.instances['footer-' + i].destroy(true);
}
var editor = CKEDITOR.inline('footer-' + i, {
stylesSet: [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
{ name: 'Brown Title' , element: 'h4', styles: { 'color': 'Red' } },
{ name: 'Purple Title' , element: 'h5', styles: { 'color': 'Red' } }
]
});
Now, this does throw up a warning each time, saying:
[CKEDITOR] For more information about this error go to http://docs.ckeditor.com/#!/guide/dev_errors-section-editor-incorrect-destroy
However, theres no clean way to do this otherwise with the CKEditor API, so since it works, I'm marking it as the answer.
How to draw a vertical line in a line chart using Html5 and kendo UI ? can anyone help me out to solve this problem ?
Try this:
// let chart be the id
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
data: [{
value: new Date(2012, 0, 3),
label: {
text: "-" //text you want to show
}
}]
}
}
});
Demo: http://jsbin.com/obuweca/26
/* WITHOUT CIRCLE */
$("#chart").kendoChart({
categoryAxis: {
notes: {
line: {
length: 300
},
icon: {
border: {
width: 0
}
},
// Initial notes
data: [{
value: new Date(2012, 0, 3)
}]
}
}
});
DEMO: http://jsbin.com/obuweca/29/
In kendo documentation is example how do draw custom lines on chart. Horizontal and vertical.
http://docs.telerik.com/kendo-ui/controls/charts/how-to/custom-plot-bands
You can customize lines by editing stroke:
stroke: {
color: "red",
width: 1,
dashType:"dash"
}
You can also try to use the column-Chart.
Just extend the series:
series: [{
type: "line",
field: "value",
categoryField: "date"
},
{
type:"column",
field: "valueColumn",
gap: 300
}]
and the dataSource.data with a new field like: valueColumn.
See also the Example.
The YUI MenuBar seems to have an issue with being below a header.
HTML:
<body class="yui-skin-sam">
<a id="headerStyle"><img href="/" src="/images/Header.jpg" alt="Home"/></a>
<div id="menuPanel" style="padding:1px">
CSS:
#headerStyle {
position:relative;
width:600px;
height:100px;
}
Javascript:
var oMenu = new YAHOO.widget.MenuBar("mymenu");
oMenu.addItems([
{
text: "Main",
submenu: {
id: "menu1",
itemdata: [
{ text: "1" },
{ text: "2" },
{ text: "3" },
{ text: "4" },
{ text: "5" },
{ text: "6" },
{ text: "7" },
{ text: "8" }
]
}
}
]);
oMenu.render($("#menuPanel").get(0));
oMenu.show();
Clicking MenuBar for the first time, it displays only 3 items with scrolling.
The issue goes away after the first click.
Any ideas?
Specifying the height property in the CSS file seems to cause this issue.
Simple removing it makes it function as it should.