Dynamically add contents style to CKEditor 4 instance - javascript

I have passed a CSS filepath to my CKEditor instance with the contentsCss option, which works great. However, I need to be able dynamically add more styles that I can't add in the CSS file. In version 3 it looks like one could use the addCss function (see this forum post). Unfortunately, this doesn't seem to work in version 4 (see this forum post). Does anyone have an alternative? I am using the jQuery adapter, so a solution using either API would work.

I think you can do something like
$(window).on('print',function(e){
e.preventDefault();
var styles = '<style>'+/*calculation of styles*/+'</style>'
$('head').append(styles);
window.print();
});
or
$(window).on('load',function(e){
var styles = '<style>'+/*calculation of media query print styles*/+'</style>'
$('head').append(styles);
});

Related

How to dynamically add css to ckeditor without a css file

I have a situation where I am storing dynamic css data about a text object in a database as json. I need to map that same css data into styles in CKEditor. I am successfully able to load the classes into the CKEDITOR styles dropdown by parsing the json into the style set by running:
CKEDITOR.stylesSet.add('myStyles',styleObj);
Unfortunately this does not fully work with the onscreen text because the css does not exists as a file.
I've also successfully generate the css into the head of the dom by appending the dynamically generated css to a style tag. Unfortunately this still does not connect the actual css generated to the CKEDITOR because it is in a separate context.
Does anyone know how I can either connect document level css to the CKEDITOR instance or generate the CSS in a way that CKEDITOR understands? I'd prefer not to write a temporary CSS file to disk for every single user who needs to view the text object.
I figured out the answer to this by using the CKEDITOR.addCss() function.
Instead of trying to load the css into the document head as styles, the process can be much simpler by running CKEDITOR.addCss() function.
The code looks like:
for each css style found in the json:
styleObj.push({name:this.name,element:'p',attributes: { 'class':cssClassName}});
var cssSheetString = '.'+cssClassName+' {font-family:'+this.fontFamily+'; font-size:'+fontSize+'; font-weight:'+this.fontStyle+'; text-decoration:'+textDecoration+'; } ';
CKEDITOR.addCss(cssSheetString);
after the loop ends then also add the styles object:
if(!CKEDITOR.stylesSet.registered.myStyles){
CKEDITOR.stylesSet.add('myStyles',styleObj);
}
Just for posterity. I've seen answers that say this will work
CKEDITOR.on('instanceCreated', function (event) {
event.editor.addCss(styles);
});
but it does not, you have to use
CKEDITOR.on('instanceCreated', function (event) {
CKEDITOR.addCss(styles);
});
also if your styles variable changes you have to destroy and recreate your ckeditor instance with the new styles.

Why is CKEditor removing links and attributes

I have a link with an inline attribute of style="color: #FF0000;". I recently upgraded to latest CKEditor, after years of neglect. Now when I call CKEDITOR.inline, it strips all the links.
I found http://docs.ckeditor.com/#!/api/CKEDITOR.dtd-property-S-editable, which doesn't have an a in there.
I did CKEDITOR.dtd.$editable.a = 1; and it still strips links. What am I missing here? I literally followed the flow from the API inline call to that, but it seems that I'm doing something wrong.
EDIT
I also find that is removing the class attribute from elements. Everything else seems okay.
Check out the guide about content filtering (ACF) in CKEditor. See also the working sample in CKEditor SDK which shows how ACF works in the default automatic mode and how to adjust it (which is what you need to do in your case).
try this:
CKEDITOR.config.allowedContent = true;
CKEDITOR.dtd.$removeEmpty['a'] = false;
CKEDITOR.config.extraAllowedContent = 'a[!href];' + '#';
CKEDITOR.config.protectedSource.push(/<a[^>]*><\/a>/g);
CKEDITOR.config.protectedSource.push(/<span*?[\s\S]*?\/span>/g);

Javascript remove ckeditor plugins on load

Html:
<textarea name="Editor" class="ckeditor" id="aboutme">#Model.Content</textarea>
Javascript:
<script>
config.removePlugins = 'elementspath,save,font';
</script>
When page load , i want to disable all ckeditor plugins.I tried above code however it did not work for me.
How can i remove plugins by javascript on load of page ?
Any help appreciates.
Thanks.
You can define a list of plugins to load (CKEDITOR.config#plugins):
config.plugins = 'wysiwygarea,toolbar,basicstyles,...';
But you can also restrict existing (default) list of plugins (CKEDITOR.config#removePlugins):
config.removePlugins = 'link,...';
Both options can be defined globally (config.js) or for a particular editor instance like
CKEDITOR.replace( 'editor1', {
removePlugins: 'link'
} );
Please refer to official Setting Configuration guide to know more.
Note: Since CKEditor 4.1, the presence of a plugin determines whether certain type content associated with that plugin is allowed or disallowed. Read more about Advanced Content Filter.
To answer my own question in the comment to oleq's answer:
I have a CKEditor instance that I'm using (with jQuery) like so:
window.onload = function () {
$ckTarget = $(".pageContentTextBox");
if ($(".pageContentTextBox").length > 0) {
$ckEditor = $ckTarget.ckeditor({
htmlEncodeOutput: true,
removePlugins: "link"
});
}
};
I was able to successfully remove the "link" plugin that way. I am going to set up an ASP.net User Control with public properties "extraPlugins" and "removePlugins" and insert the values using the client-side yellow tags ("code nuggets") to be able to use this on multiple pages with different plugins enabled/disabled.
I hope that helps someone!
You can also edit the config.js. This js is loaded/included from the ckeditor.js. config.js is a default custom editor js file. You can remove buttons or your plugins from the editor by including the list of names of elements to remove. For the list of names to remove from the editor please refer to the below link: https://ckeditor.com/old/forums/CKEditor-3.x/config.js-changes-not-reflected
Include the list of buttons or plugins to remove from the editor by appending them to the config.removebuttons and include this line of code in config.js
// Remove some buttons provided by the standard plugins, which are
// not needed in the Standard(s) toolbar.
config.removeButtons = 'Underline,Subscript,Superscript,Image,Flash,Table,HorizontalRule,Smiley...';

ckeditor setdata only using some of the HTML Loaded [duplicate]

I have been using CKEditor for some time and it has worked great. I've pretty much gotten rid of any problems that ive had but this one i cant seem to figure out. When i add inline attributes to elements for instance style = "color: #ff0;" on a <p></p> tag they are stripped out when i switch from wysiwyg to source view. No saving or submission is done and ckeditor is has been added to my site which is my own script. Any ideas as to what would cause this. All of the search results i can find correspond to this happening in Drupal but Drupal seems to be the problem not the editor in all instances. Thanks again!
It feels like you're using CKEditor 4.1+ that comes with Advanced Content Filter (ACF). If so, you need to specify config.allowedContent and configure it to get your things working. You may also be interested in config.extraAllowedContent.
See this answer for more details.
For anyone looking for a simple sample on how to enabled additional markup in CKEditor without disabling ACF completely, here is a short snippet:
CKEDITOR.replace( 'editor1', {
extraAllowedContent: 'style;*[id,rel](*){*}'
} );
extraAllowedContent here enables the <style> element, allows two additional attributes (in square brackets) for all (* is a wildcard) already allowed elements, allows usage of any class names (*) for them and allows usage of any inline styles {*}
hi you can stop ACF easily . by default your configaration is---
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{});});</script>';
}
just add this in the curly brackets:
allowedContent: true
now your configuration will be:
function ckeditor($name,$value='',$height=300){
return '<textarea name="'.addslashes($name).'">'.htmlspecialchars($value).'</textarea>
<script>$(function(){CKEDITOR.replace("'.addslashes($name).'",{allowedContent: true});});</script>';
}
I faced the same issue and below answer solved my problem:
config.allowedContent = true;
config.extraAllowedContent = '*(*);*{*}';
config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';
I had the same problem, that ck was stripping not only some attributes, but whole elements when pasting a block element, inside a block element (div with some attributes pasted inside a p) while using this method:
editor.insertHtml(html);
what solved the problem was using this workaround instead:
editor.insertElement(CKEDITOR.dom.element.createFromHtml(html));

Create new (not change) stylesheets using jQuery

We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.
Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.
The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();
If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas

Categories