I have the following CDATA content in the source string.
<![CDATA[This is something inside cdata <b>this is bold</b>]]
However, when this gets shown in WYSIWYG editor, this looks like :
this is bold]]
When i click "source" toolbar and check the contents, ckeditor had modified the original content to :
<!--[CDATA[This is something inside cdata <b-->
<p>this is bold]]</p>
You can see that ckeditor has tried to comment out CDATA but incorrectly handled it.
Is this a known bug ? Are there any workaround available to this ?
Use config.protectedSource in config.js:
CKEDITOR.editorConfig = function( config ) {
config.protectedSource.push( /<!\[CDATA\[[\s\S]*?\]\]>/g );
};
Once you start using protected source, you might find this plugin useful: http://ckeditor.com/addon/showprotected
Related
Using a version 3 ckeditor I have problems copying and pasting replacing the span tag with the font tag as I can fix the problem?
First of all, please upgrade your editor because version 3 is no longer developed and doesn't work in browsers like IE11 and Egde.
Once editor is upgraded, you can replace span tag with font tag by: removing Font plugin and extending ACF with font tag plus its attributes like face, size and align.
var editor = CKEDITOR.replace( 'editor1', {
extraAllowedContent : 'font[face,size,align] ',
removePlugins : 'font'
});
Links which might help in upgrade process:
https://sdk.ckeditor.com/
https://docs.ckeditor.com/#!/guide
ACF links:
http://docs.ckeditor.com/#!/guide/dev_acf
http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
http://docs.ckeditor.com/#!/guide/dev_disallowed_content
http://docs.ckeditor.com/#!/api/CKEDITOR.filter-method-addTransformations
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent
Angelo
You can check this page https://docs.ckeditor.com/#!/guide/dev_acf
Probably you should add to your CKEditor configuration something like
config.extraAllowedContent = 'span[*]{*};'
This will allowed span tag with all attribute and css property
I am using CKEditor with CKEDITOR.disableAutoInline = true.
I then call inlineAll() to inline all contenteditables.
Immediately, after, I am getting data out of the editor:
CKEDITOR.inlineAll();
var editor = ... //get the editor instance
console.log(editor.getData());
The problem is that CKEDITOR changes the markup, and the one I get using getData() is before the change.
This is what the content markup looks like:
<p>testaaatest testbbbtest</p>
<p>test asdf</p>
link
<p>test</p>
link
<p>test</p>
CKEDITOR modifies the markup so that the <a>s are in their own paragraphs:
<p>testaaatest testbbbtest</p>
<p>test asdf</p>
<p>link</p>
<p>test</p>
<p>link</p>
<p>test</p>
The problem is that the markup I receive using getData() is the one before the modification.
What can I do to ensure that CKEditor is ready and the markup from getData() is the most up to date markup?
There's editor.status property and editor#instanceReady event. When the event is fired, the status is changed to 'ready'. Before that editor may return cached editable element's innerHTML instead of processed data.
So if you want to be sure that you get real data, then you need to check status and wait for instance to be ready if it isn't yet.
Good day.
In my code i have line <ul class="myclass"> but after copy on CKEDITOR i have line <ul> without class myclass.
Tell me please how disabled filter code for elements ul, li and div ?
You need to search a bit. more. IF you look for CKEditor issues on Stackoverflow. About 30% goes about the Content filtering.
For all support about this look here: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
or put the following line in your config to disable the content filter. (It's better to configure it)
CKEDITOR.config.allowedContent = true;
EDIT:
If you place it in your editor file it will look like this:
CKEDITOR.editorConfig = function( config )
{
config.allowedContent = true;
};
The accepted answer disables all content filtering. A more targeted approach would be to configure extraAllowedContent to specify that you want to allow ul, li and div tags to have any class. You would add this line to your config.js file:
config.extraAllowedContent = 'ul li div(*)';
More information:
config.extraAllowedContent - specifications for this configuration
Allowed Content Rules – how to write allowed content rules, which are used in several places including config.allowedContent, config.disallowedContent, and config.extraAllowedContent
I would like to know if there is a plugin in order to insert HTML codes in a CKEditor textarea?
I tried to install the PBCKCode plugin but it doens't work because the HTML is executed in my textarea.
Anthony
EDIT1 ----- INSERTPRE Plugin -------
Query when I add the post :
INSERT INTO `Posts` (`slug`,`title`,`thumbnail`,`content`,`tags`,`state`,`click`,`createdAt`,`updatedAt`,`id`) VALUES ('dsq','dsq','http://4.bp.blogspot.com/-knCgLUMOkJc/TeMY2jkmACI/AAAAAAAAAV0/VByHmoMa2N8/s1600/first+blog+posting.jpg','<pre class="prettyprint">\r\n<div>toto</div></pre>\r\n\r\n<p>dqsdqs</p>\r\n','toto','0',0,'2013-04-30 12:15:46','2013-04-30 12:15:46',NULL);
The result in my textarea when I try to edit the post :
<pre class="prettyprint">
</pre>
<div>toto</div>
<p>dqsdqs</p>
As you can see the "div" have changed of place.
EDIT2 ----- Escape HTML -------
Screenshot : http://grab.by/m8bs
As you can see it works in a P tag (just above the slug) but it doesn't work in my textarea. I think CKEditor encode my content but I don't know when and why... In my database everything is ok, I have the codes into the PRE tag.
Check these two plugins:
http://ckeditor.com/addon/insertpre
http://ckeditor.com/addon/syntaxhighlight
We use the first one on http://ckeditor.com/forum and it works very well.
Update: That's because you're not encoding HTML before you pass it to textarea. Use htmlspecialchars (or other similar function if you're not using PHP) to do that.
Update2: You are doing something wrong, but I don't know on what stage. The output data (editor.getData()) from the editor with one <pre> element is:
<pre class="prettyprint"><div></pre>
See that <pre> is not encoded, but <div> inside it is. Your examples show me that you "flattened" that structure - you have encoded both things equally when it should be:
<pre class="prettyprint"><div></pre>
Note: < is an encoded <.
You can use source menu in ck editor header to add your html
Use this tutorial
demo link
Okay Try This
for added Post
addslashes($_POST['post_from_textarea']);
to Edit
stripslashes($yourvairablegetRowsQuery)
I hava an editor template for, let's say, date:
#model DateTime
#section AdditionalJavaScript2
{
/* some js code */
}
#Html.TextBox("", Model.ToString("d.M.yyyy"), new { #class = "date" })
Now, I would like to put some js code into the HEAD section, but this doesn't work.
Of course, I have a this section in my layout.cshtml:
<head>
...
#RenderSection("AdditionalJavaScript2", required: false)
</head>
It works from the plain view, but not from partial view (editor template).
Why?
And, is there a workaround?
Thanks,
Igor
A partial-view does not use a template, it returns "raw" html to be included in your page (by Javascript). It does not have access to anything but the stream it returns itself.
Think of it like this: You typically call a partial view from Javascript/AJAX to get some new html. You get the return, and replace some DIV-tag. How can the system (FireFox, Chrome, ...) know, that there is some extra section of data that needs to replace something in the HEAD tag.
There are some workarounds:
Don't put the script in the HEAD
Add a parameter switch betweed the html and the script. You need to client-side calls, one to get the html, and one for the script. You include the calls to the partial-view on two locations on your page.
Separate the script and the html using some pre-defined tag like <!-- SEPERATOR -->, and let the calling code split the result, and put it in the correct position.