I am using CKeditor and I want to set margin-top and margin-bottom for many paragraphs in my text but it does not work. These what I have tried till now:
1- use margin top directly inside the editor
<h2 style="margin-top:40px">What are tokens?</h2>
2- I added a new style to contents.css:
p.ex1
{
margin-top: 100cm;
}
then in the editor I wrote:
<p class="ex1">What are tokens?</p>
Both ways did not work for, I am using a full toolbar of CKeditor v4.6.2
Any other way to try?
You need to tell CKEditor to load your CSS rules and to allow your class attributes in <p> tags:
Create a new file, let's say, my.css and put it in CKEditor root folder.
Inside my.css type your attributes, for example:
p.ex1
{
margin-top: 100px;
}
p.ex2
{
margin-top: 50px;
}
Now, in your config.js type this:
config.contentsCss = [CKEDITOR.getUrl('contents.css'), CKEDITOR.getUrl('my.css')];
config.extraAllowedContent = 'p(ex1,ex2)';
This will load my.css in addition to the CKEditor's own contents.css and instruct CKEditor to allow <p> tags with class attributes named "ex1" and "ex2", so you can have <p class="ex1">What are tokens?</p>
More info:
contentsCss and extraAllowedContent
Related
In my document I want to render menu chains italic and with arrows between the entries, like this:
File → Save As...
Is there a way to do this with the menu macro?
I couldn't find a way to customize the macro.
I also thought about writing a custom converter but I was hoping for a simpler way.
Edit
The answer by #Kiroul worked. I had to add some css to get the → in there. My docinfo.html ended up looking like this:
<style>
/* Customizing Menu Macro */
.menuseq b:before {
content: "\00a0";
padding-right: 0.2em;
}
.menuseq b:not(.caret),
.menuref {
font-style: italic;
}
.menuseq i.caret:before {
content: "\2192";
}
.menuseq:after {
content: "\00a0";
padding-right: 0.2em;
}
</style>
In order to do that you will need to change the styling for the menu macro. If you look at the source HTML you will see that the styling for the menu macro is done by the following CSS:
.menuseq,.menuref{color:#000}
.menuseq b:not(.caret),.menuref{font-weight:inherit}
.menuseq{word-spacing:-.02em}
.menuseq b.caret{font-size:1.25em;line-height:.8}
.menuseq i.caret{font-weight:bold;text-align:center;width:.45em}
You could make use of the docinfo file to inject some CSS code into your HTML. Create a resources folder and create a docinfo.html file inside it, copy the following content:
<!--docfile.html-->
<style>
.menuseq b:not(.caret),.menuref{font-style:italic}
</style>
Applying this style to the example in the documentation could look like this:
:experimental:
:docinfo: shared
:docinfodir: resources
To save the file, select menu:File[Save].
Select menu:View[Zoom > Reset] to reset the zoom level to the default setting.
I'm using Ck Editor in a program that builds email templates. Every email template has it's own styles that overwrites text inside the content blocks.
So currently when I add a smiley in the text block with Ck Editor, the template styles adds float left and display block to images inside the text block.
Which means that all smileys are floated to the left.
Is there a way that I can add inline styles to the actual smiley image that's inserted so that it looks like this:
<img alt="cool" height="23" src="/vendors/ckeditor/plugins/smiley/images/shades_smile.png" title="cool" width="23" style="float: none; display: inline-block;">
Thank you in advance.
You can try to check when inserting an element if it the src attribute contains a string like "smiley" for example and then add a class or inline style to the element:
CKEDITOR.replace('editor1', {
on: {
insertElement: function(e) {
if (e.data.getName() !== 'img') return;
if (e.data.getAttribute('src').indexOf('smiley') > -1) {
e.data.addClass('smiley-class');
}
}
}
});
<script src="https://cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
<textarea name="editor1"></textarea>
When changing the background-color, CKEditor wraps the selected content in a span element where the inline style is set.
I have an application to create interactive videos: it is possible to stop the playback in desired moments and, in these pauses, the viewer can jump to key moments of the video, or answer to quizzes, returning to specific points of the video if the answer was wrong, and so on. To create this interactive layer above the player I use the CKEditor with some custom plugins to create the interactive elements.
One of the plugins is used to create span elements with a custom attribute data-player-control:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play">My element</span>
The value of the data-player-control attribute is not fixed (it can be specified in the plugin), and it is used to control the exhibition of the video.
When the editor is used to change the element background color, it wraps the element text in a new span, what results in:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play">
<span style="background-color:#FF0000">My element</span>
</span>
These two nested span elements, with two distinct background colors, are undesired.
What I need is the inline style to be applied to the existing span element, resulting in:
span[data-player-control] {
background-color: #3366FF;
color: #FFF;
border-radius: 10px;
padding: 10px;
}
<span data-player-control="play" style="background-color:#FF0000">
My element
</span>
How can this be achieved?
Using dataFilter or htmlFilter is not a feasible solution, as they are executed in input or output data, when entering or existing the inline instance of the CKEditor. Using a transformation also is not a solution, as it uses a simplified form to represent the elements, not the real DOM.
Is there any callback function to use while editing the content (so I can change the DOM according to my needs)?
A simple solution is to listen to the change event in the editor instance and then modify the DOM in event.editor.ui.contentsElement.$ as desired.
You can try to use custom styles definition which is used for adding background-color. The colorButton_backStyle can be set in the editor config.
To override span element with some custom attributes, you can use:
config.colorButton_backStyle = {
element: 'span',
styles: { 'background-color': '#(color)' },
overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};
So basically overrides attribute is used when applying background-color and there is a span with such attribute - it is replaced (but then the attribute also gets removed ). You can add attributes:
config.colorButton_backStyle = {
element: 'span',
attributes: { 'data-player-control': 'play' },
styles: { 'background-color': '#(color)' },
overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } }
};
So that overriding span also has your attribute. The problem with this solution is that:
When applying background color to other elements, span will also have data-player-control attribute.
When removing background color, the whole span gets removed.
The above solution may not fit your needs. Maybe there is different approach to the problem you are trying to solve?
As I understand from the question you would like the HTML to have defined structure the whole time (not only as output data), is that correct? What problem is structure with nested spans causing in your application/implementation?
What I want to do is when i click on my image, i want the kendo dorpdownlist to propose me some options. Is it possible ?
I tried to replace the defautl template of dropdownlist with CSS without success.
Here i try simply to replace the default black arrow of the dropdownlist, with no success.
SOURCE : http://docs.kendoui.com/getting-started/web/appearance-styling?x=54&y=12
-----------------------------HTML
<select id="customList" class="k-widget k-dropdown"></select>
-----------------------------Javascript
$("#customList").kendoDropDownList().data("kendoDropDownList");
-----------------------------CSS
#customList .k-icon .k-i-arrow-s
{
background-image:url('../../resources/img/components/addtab.png');
}
But what i really want to achieve is to replace completely the default template of the kendo dropdownlist and to have instead my image.
There are a couple of question to keep in mind:
The HTML element that contains the arrow is not a descendant of customList but descendant of a sibling. This is because KendoUI decorates original elements with others.
You are only re-defining background-image but you there is two additional CSS attributes that you need to redefine: background-position and background-size since it is defined in Kendo UI CSS files for offsetting k-i-arrow-s icon.
So, you should either do:
span.k-icon.k-i-arrow-s {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
if you are ok with redefining every additional elements OR you do it programmatically defining a CSS:
.ob-style {
background-image:url('../../resources/img/components/addtab.png');
background-size: 16px 16px;
background-position: 0 0;
}
and a JavaScript:
var list = $("#customList").kendoDropDownList({...}).data("kendoDropDownList");
$(list.wrapper).find(".k-icon.k-i-arrow-s").addClass("ob-style");
I'm trying to get the dropdown styles option in CKEditor V4 configured. My test, shown below, does not work as expected. The dropdown style menu its self does display the "Green Check" option (label and the image used in the style) but its not applied to content of editor instance when used. I'm using the new inline editing feature (way cool it is too).
config.stylesSet = [
{ name: 'Green Check', element : 'ul li',
styles :
{
'background' : 'url(/images/bullets/greencheck.png) no-repeat top left;',
'list-style-type' : 'none;'
}
}
];
I specified the element element : 'ul li', because 'ul' obviously targets the ul element but when 'li' is specified, I get nothing in the dropdown menu or applied to content.
Here's more or less the complete style that I'm trying to configure...
ul.greencheck li{
list-style-type:none;
line-height:18px;
background: url(/images/bullets/greencheck.png) no-repeat center left;
padding-left:30px;
}
Any help gratefully received.
'ul li' isn't a valid element, you can use either 'ul' or 'li' but not both
You should remove also the ending semicolon in the styles 'none;' isn't valid, 'none' is the correct one
and instead of setting the inline styles it would be better to just apply a class to the UL and leave the styles to a separate css file.