How could I add a style using CK Editor ?
I want to create a style which I will use it in the class attribute on the liferay editor .
For example -
In the page javascript section
CKEDITOR.XXXX(// add style class for red color called 'myRed')
and then in the editor -
<p class="myRed">Text</p>
would give red text .
Place in your theme:
.myRed {
color: red;
}
Then only include the class in source mode of the editor like you described in your question:
<p class="myRed">Text</p>
that's it.
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 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
Is there any option in ckeditor by adding a css class by selecting a paragraph?
My requirements are that I have lengthy text in the field with some paragraphs. One of paragraph I want to change the style through css. So for that I want an option in the ckeditor toolbar from where I can add a css class to a paragraph, not from source and editing the html.
Like currently there is an option for the "Normal (DIV)" in the Format dropdown. Can I add another option in this dropdown with "DIV with class test" and it will add a div with a test css class?
Adding Styleset to ckeditor config. but it only add style attribute to div not class.
CKEDITOR.stylesSet.add('CustomStyle', [
{ name : 'TxtDanger', element : ['p','div','h1'], styles : {'color' : 'red' } }
]);
CKEDITOR.editorConfig = function( config ) {
config.stylesSet = 'CustomStyle';
};
Now you Can Get 'TxtDanger' style in your ckeditor style dropdown. But, 'CustomStyle' is replace your default ckeditor styles(Paragraph, Heading1,2..). so first add all default style into your 'CustomStyle'. here list of default styles.
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>
I have a map inside a TinyMCE editor in Joomla 3, and it seems like when it is saved Joomla is messing with the html. I just want no filtering or anything.
So this is the HTML I enter:
<img class="mapper noborder"
height="410"
id="Map_of_North_America"
name="Map_of_North_America"
src="/images/State Maps/Map_of_US_web_2014(1).png"
style="border-width: 0px; border-style: solid;"
usemap="#m_Map_of_North_America" width="476" />
and this is what Joomla saves:
<img class="mapper noborder"
src="images/State Maps/Map_of_US_web_2014(1).png"
width="476"
height="410"
name="Map_of_North_America"
style="border-width: 0px; border-style: solid;" />
It removes the id, as well as the usemap=
I have tried setting text-filtering to none, changing up the TinyMCE in the plugin manager etc... Thoughts?
I had the same problem however with JCE (I am not using TinyMCE) bu I guess, this could help :
in JCE / Edit Profile / Features and Layout: at the bottom : check the option "Adds support for OBJECT, EMBED, AUDIO, VIDEO and IFRAME elements. Required by the Media Manager and when inserting Adobe® Flash®, Quicktime® and other media file types"
in JCE / Edit Profile / Editor parameters/advanced : set all to yes
in JCE / Edit Profile / Plugin parameters/media support : set all to yes
This is what solve the problem for me :
Navigate to Content → Article Manager / Parameters (icon top right)
Scroll down to Filtering Options, highlight all Filter groups except Super Administrator, and select Filter type of Blacklist
You could also set the editor as No Editor in the Global Configurations and edit the article.
Go to: plugins/editors/tinymce
open tinymce.php
Find this
Found this section:
// advimage
$advimage = $this->params->def('advimage', 1);
if ($advimage)
{
$plugins[] = 'advimage';
$elements[] = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style]';
}
add |usemap after style, just like:
// advimage
$advimage = $this->params->def('advimage', 1);
if ($advimage)
{
$plugins[] = 'advimage';
$elements[] = 'img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name|style|usemap]';
}