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;
}
}
});
});
Related
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>
There is one problem when I work with ckeditor. I press on icon for adding images, then modal window appears and I put direct image link in the special field, in this moment width and height detected automatically and it writes to style for ex:
<img src='#some images direct link' style='width:SOME WIDTH;height:SOME HEIGHT'>
Can I disable this automatic function? Or I have to delete this style by myself every time?
You could write a rule for your config that would remove the style tag on elements.
var editorRulesObject = {
elements: {
img: function( el ) {
if(el.attributes.style) {
el.attributes.style = '';
}
}
}
};
CKEDITOR.on('instanceReady', function( e ) {
// Ensures that any non-styled text, or text input without any tags will be correctly styled.
CKEDITOR.instances[e.editor.name].dataProcessor.dataFilter.addRules( editorRulesObject );
CKEDITOR.instances[e.editor.name].dataProcessor.htmlFilter.addRules( editorRulesObject );
});
In 2020, since version 4.5.0, it is much easier to switch off the annoying automatic filling in of height and readiness.
New there is the config option "image_prefillDimensions".
config.image_prefillDimensions = false;
Documentation: http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-image_prefillDimensions
The user still has the possibility to fill in the height and width automatically by clicking on the button [Reset size (circle arrow)].
I am looking for a way to make the CKEDITOR wysiwyg content interactive. This means for example adding some onclick events to the specific elements. I can do something like this:
CKEDITOR.instances['editor1'].document.getById('someid').setAttribute('onclick','alert("blabla")');
After processing this action it works nice. But consequently if I change the mode to source-mode and then return to wysiwyg-mode, the javascript won't run. The onclick action is still visible in the source-mode, but is not rendered inside the textarea element.
However, it is interesting, that this works fine everytime:
CKEDITOR.instances['editor1'].document.getById('id1').setAttribute('style','cursor: pointer;');
And it is also not rendered inside the textarea element! How is it possible? What is the best way to work with onclick and onmouse events of CKEDITOR content elements?
I tried manually write this by the source-mode:
<html>
<head>
<title></title>
</head>
<body>
<p>
This is some <strong id="id1" onclick="alert('blabla');" style="cursor: pointer;">sample text</strong>. You are using CKEditor.</p>
</body>
</html>
And the Javascript (onclick action) does not work. Any ideas?
Thanks a lot!
My final solution:
editor.on('contentDom', function() {
var elements = editor.document.getElementsByTag('span');
for (var i = 0, c = elements.count(); i < c; i++) {
var e = new CKEDITOR.dom.element(elements.$.item(i));
if (hasSemanticAttribute(e)) {
// leve tlacitko mysi - obsluha
e.on('click', function() {
if (this.getAttribute('class') === marked) {
if (editor.document.$.getElementsByClassName(marked_unique).length > 0) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked_unique);
}
} else if (this.getAttribute('class') === marked_unique) {
this.removeAttribute('class');
} else {
this.setAttribute('class', marked);
}
});
}
}
});
Filtering (only CKEditor >=4.1)
This attribute is removed because CKEditor does not allow it. This filtering system is called Advanced Content Filter and you can read about it here:
http://ckeditor.com/blog/Upgrading-to-CKEditor-4.1
http://ckeditor.com/blog/CKEditor-4.1-Released
Advanced Content Filter guide
In short - you need to configure editor to allow onclick attributes on some elements. For example:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'strong[onclick]'
} );
Read more here: config.extraAllowedContent.
on* attributes inside CKEditor
CKEditor encodes on* attributes when loading content so they are not breaking editing features. For example, onmouseout becomes data-cke-pa-onmouseout inside editor and then, when getting data from editor, this attributes is decoded.
There's no configuration option for this, because it wouldn't make sense.
Note: As you're setting attribute for element inside editor's editable element, you should set it to the protected format:
element.setAttribute( 'data-cke-pa-onclick', 'alert("blabla")' );
Clickable elements in CKEditor
If you want to observe click events in editor, then this is the correct solution:
editor.on( 'contentDom', function() {
var element = editor.document.getById( 'foo' );
editor.editable().attachListener( element, 'click', function( evt ) {
// ...
// Get the event target (needed for events delegation).
evt.data.getTarget();
} );
} );
Check the documentation for editor#contentDom event which is very important in such cases.
I'm new to AngularJS and I'm making made a couple of custom Angular directives to do what I used to do with Jquery, however there is one case where I'm not sure if I'm doing it the "the angular way". It works but I think there might be a better way.
I want to do is this for a search box:
When focus is on the search box the app must change the color of the text in the box from grey to black. The app must also then check the current text in the box, if it is the default text then the app must clear the text.
When the box loses focus (blur) the app must change the box's text back to grey. It must then put back the default text only if the text box is empty upon losing focus.
Here is a jsfiddle that has a directive set up to do all of this perfectly.
http://jsfiddle.net/Rick_KLN/5N73M/2/
However I suspect there is an even better way to do it.
It seems like all three those variables in the controller should be unnecessary.
I also seems like having 4 if, else statements is too much and that binding to all the events is overkill seeing as only focus and blur are used and they are specified in the if statements.
Any ideas on optimizing this directive?
The "default text" behavior you are looking for is automatically handled by the HTML5 placeholder attribute. It is supported in just about any modern browser, and can be styled using CSS, as follows:
Markup:
<input id="searchBar" type="text" placeholder="Search" />
CSS:
#searchBar { color: #858585; }
#searchBar:focus { color: #2c2c2c; }
#searchBar:focus::-webkit-input-placeholder { color: transparent; }
#searchBar:focus::-moz-placeholder { color: transparent; }
#searchBar:focus:-moz-placeholder { color: transparent; }
#searchBar:focus:-ms-input-placeholder { color: transparent; }
It's that simple.
Notes:
The pseudo-elements & pseudo-classes (-webkit-input-placeholder, etc) are what hide the placeholder text on focus. Normally it stays until you start typing.
I forked your original jsFiddle. It's not really an AngularJS app anymore:
http://jsfiddle.net/Smudge/RR9me/
For older browsers: You can still use the same code as above, but you could use Modernizr (or something similar) to fall-back to a javascript-only approach if the attribute is not supported.
You can create a custom directive that requires the ng-model directive and then within your directive's link function supply a fourth parameter that is a reference to the model. This will allow you to watch the model for changes and react accordingly. Here is the fiddle:
http://jsfiddle.net/brettlaforge/6t39j/3/
var app = angular.module('app', []);
app.directive('searchbar', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, model) {
var options = scope.$eval(attrs.searchbar);
scope.$watch(attrs.ngModel, function(value) {
// If the input element is currently focused.
if (!elm.is(":focus")) {
// If the input is empty.
if (value === undefined || value === "") {
// Set the input to the default. This will not update the controller's model.
elm.val(options.default);
}
}
});
elm.on('focus', function(event) {
// If the input is equal to the default, replace it with an empty string.
if (elm.val() === options.default) {
elm.val('');
}
});
elm.on('focusout', function(event) {
// If the input is empty, replace it with the default.
if (elm.val() === '') {
elm.val(options.default);
}
});
}
};
});
function FormCtrl($scope) {
$scope.search = "";
}
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