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>
Related
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
I'm using animate.css to add some transistions to my meteor app. However, there is this problem that animate.css creates an almost transparant overlay over my buttons/images etc.
I have a main div where the animate.css class is added depending on changing page views etc. Very simplified this is my HTML.
<body>
<header class="header></header>
<div class="animate-holder {{animated class}}>
<div class="class1></div>
<div class="class2></div>
</div>
</body>
From what I've tested this will happen all the time and it doesn't matter how I use transistions. Is there a simple way to NOT have this overlay?
EDIT:
I can hack it like this, but this is very very ugly. But maybe it creates more insight into the problem:
Template.DetailsSubmit.rendered = function() {
Meteor.setTimeout(function() {
var classes = $('div.animated').attr('class');
$('div.animated').removeClass(classes);
}, 1000)
}
You can make this specific div clickable through using the very useful (and not famous enough) pointer-events css property:
div.animated {
pointer-events: none;
}
I am using a responsive image technique setting a max-width of 100% with CSS.
This isn't working for any images added through CKEditor, as an inline style is added.
In CSS I have added a style to override the width, which works, but height: auto doesn't, so the images is stretched.
I need to find a way to stop CKEditor from adding the inline style in the first place.
I am using CKEditor 4.x
Thank you
A far better alternative to the accepted answer is to use disallowedContent (see docs), as opposed to allowedContent.
Using allowedContent requires you to create a rather large white-list for every possible tag or attribute; where as disallowedContent does not; allowing you to target the styles to ignore.
This can be done like so:
CKEDITOR.replace( 'editor1', {
disallowedContent: 'img{width,height};'
});
Since version 4.1, CKEditor offers so called Content Transformations and already defines some of them. If you restrict in your config.allowedContent that you don't want to have width and height in <img> styles, then editor will automatically convert styles to attributes. For example:
CKEDITOR.replace( 'editor1', {
allowedContent:
'img[!src,alt,width,height]{float};' + // Note no {width,height}
'h1 h2 div'
} );
then:
<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>
becomes in the output:
<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p>
and, as I guess, it completely solves your problem.
You can listen to instanceReady event and alter any element before saving, in your case the img tag
CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
{
elements:
{
$: function (element) {
// check for the tag name
if (element.name == 'img') {
var style = element.attributes.style;
// remove style tag if it exists
if (style) {
delete element.attributes.style;
}
}
// return element without style attribute
return element;
}
}
});
});
I'm using CKEditor as part of the WYGWAM plugin for ExpressionEngine, but at the core my issue is a CKEditor issue.
I have some custom HTML markup for certain UI elements and thus far have had no problems using the templates_files and CKEditor 3 Templates to use them.
However, for some reason, not all the markup of each HTML template is being preserved. In the following case with applying expand/collapse accordion list, the first "toggler" isn't preserved when going to the next < li > item.
The code:
CKEDITOR.addTemplates( 'default',
{
imagesPath : CKEDITOR.getUrl( CKEDITOR.plugins.getPath( '../../../../wygwam_assets' ) + 'template-thumbs/' ),
// Template definitions.
templates :
[
/* toggler */
{
title: 'Expand & Collapse List',
image: 'testing.png',
description: 'Create a collapsed list of expandable items. When each title is clicked, the content below will animate open and reveal the full content.',
html:
'<div class="toggle_wrap"><ul>' +
'<li><div class="toggler">ITEM_TITLE</div><div class="togglee">ITEM_CONTENT</div></li>' +
'</ul></div>'
}
]
});
Oddly enough, when pressing enter at the end of the last line for the < li >, the next item on the list is added with the following output:
<li>
<div class="togglee">
</div>
</li>
The togglee div is there! But why oh why not the toggler?!
See if setting allowedContent to true in your config for CKEditor makes a difference. This is used to strip style and class attributes etc. so basically strip out content that is not allowed by default.
e.g.
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = true;
};
I have some page with something like this:
<div id="editor" contenteditable="true">SomeText</div>
I have an selfmade JS editor which actually issues
document.execCommand(some_command,false,optional_value);
when user presses a button in the editor. (For example I have plain, simple [Bold] button).
Everything is fine as long as I apply editing to part of "SomeText". For example selecting "Text" with mouse and pressing [Bold] button (which leads to document.execCommand("bold",false,false);) will produce:
<div id="editor" contenteditable="true">Some<span style="some-css-here">Text</span></div>
but when I select entire content of the div ("SomeText" in this example) and press [Bold] in my editor, FF will not produce expected
<div id="editor" contenteditable="true"><span style="some-css-here">SomeText</span></div>
but rather
<div id="editor" contenteditable="true" style="some-css-here">SomeText</div>
Notice the "style" attribute went into the editable div!
Why this makes a difference to me?
--It's because after editing is done I would like to take the content of the editable div, along with all styles, formating etc and further use it on the page. But I can't -- all the styling now sits inside the div.
A solution when I would be advised to extract styles from the div is not acceptable -- the div during its life takes a lot of styles from other active elements of the page (heavy jQuery usage)
So in brief:
How to tell FF to never touch editable div and apply all styling to its inner contents only?
Sincere thanks for you time.
(just pulled last of my hair, browsing FF dev site along with many others(((( )
Call once before any other execCommand and switch FF to tag mode
document.execCommand('StyleWithCSS', false, false);
Sometimes organizing and writing my thoughts brings me very positive results.
I have found satisfactory solution.
1)insert hidden div as a first child node into your editing div:
<div id="editor" contenteditable="true">
<div class="edit_text_mozilla_hack"></div>
SomeText
</div>
2) The CSS for it:
.edit_text_mozilla_hack {
display: block;
width: 0;
height: 0;
-moz-user-edit: none;
-moz-user-select: none
}
3)Now you can edit. I tested it with this my small test (actually I need all this stuff to edit short pieces of text like like captions, news subjects etc)
4)Before you use the content -- obious -- remoe that div.
5)When you want to return to editing -- insert it again.
Some bits of code from working (finally! ))) project:
//adds hidden div to all editable regions 'editables'
//the parameter is for speeding the thins up -- I'm often working with all or a lot of editable regions
function editAddMozillaHack(editables) {
if (!editables) {
editables = editGetEditables();
}
$("." + adminOptions["admin_loader"]).remove();
editables.each(function() {
$(this).prepend('<div class="edit_text_mozilla_hack"></div>')
});
}
//removes the hack from all regions
function editRemoveMozillaHack() {
$(".edit_text_mozilla_hack").remove();
}
//just returns all the editable regions -- my project often requires them all
function editGetEditables() {
return $("[contenteditable=\"true\"]");
}
of course -- testing pending.
I would like to hear from you ;)
regards.
I had the similar problem, when select all in contenteditable area with mouse or use CTRL-A there and then press CTRL+B for example, Firefox put style to the contenteditable container instead it's content.
<div contenteditable="true" style="font-weight: bold;"><p>..content..</p></div>
Same applyed for italic, font size, font-family and other inline styles.
I wrote a function which fixing that issue. It creates new element below the content and changes selected range till that element:
function checkSelectAll (container, cmd, args) {
if(document.getSelection) {
var cn = container.childNodes,
s = document.getSelection(),
r = s.getRangeAt(0);
if(r.startContainer == container && r.endContainer == container){
var endMarker = document.createElement('SPAN')
container.appendChild(endMarker);
r.setEndBefore(endMarker);
s.removeAllRanges();
s.addRange(r);
document.execCommand(cmd,false,args);
container.removeChild(endMarker);
} else {
document.execCommand(cmd,false,args);
}
} else {
document.execCommand(cmd,false,args);
}
};
this code affects only FF, for other browsers it will just apply execCommand