I have tried all kinds of settings to get rid of this issue, but so far I haven't had any luck. I am running CKEditor in my angular(1.5.6) app. First I was using this angular directive, but after running into this problem, I tried running CKEditor with as little things as possible to find the cause to this.
Atm this is all I have in my controller:
$scope.description = "<p>test</p><p>test</p>";
CKEDITOR.replace('description');
CKEDITOR.instances['description'].setData($scope.description);
In my view:
<div id="description"></div>
After initializing this is what I will have in the editor:
<p>test</p>
<p>test</p>
<p> </p>
Every time the CKEditor is loaded it will add this empty paragraph. Now if I save this the empty paragraph gets saved to database. When loaded again, it will have 2 empty paragraphs.
Here is list of settings I have tried to fix this. Mostly I have used them one by one.
$scope.ckEditorOptions = {
ignoreEmptyParagraph: false,
enterMode: CKEDITOR.ENTER_BR,
autoParagraph: false,
fillEmptyBlocks: false,
shiftEnterMode: CKEDITOR.ENTER_BR,
basicEntities: false,
tabSpaces: 0,
};
I'm using V4.16. It adds a p tag, and a non breaking space at the beginning and end of the text, every time I hit the "save" button. I went through all the suggested twiddles with the config file, but no luck. So now I use the PHP function str_replace() on the text from the editor on its way to the database. Not very elegant, but works a treat !
I've been confused by a similar issue (using CKGEdit for DokuWiki and CKEditor is adding empty paragraphs at the top of the page and below some elements).
Have bodged around it for now by adding this to to the bottom of config.js:
var ed = CKEDITOR.instances.wiki__text;
var t = ed.getData().replace(/<p>[\s*| ]<\/p>/gm,'');
ed.setData(t, function() {
this.checkDirty();
});
..which might be the basis of something useful for anyone else in the same situation.
None of the editor options helped without introducing other issues (e.g. breaking wiki markup).
Related
On the surface this should be easy:
CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].insertHtml( html );
...where html is a string of an actual HTML tag. Sadly, however, this doesn't work. When I click the button on my page that calls this code, nothing happens. It doesn't appear anywhere in the document at all, not even in Source mode.
I tried using insertElement:
var element = CKEDITOR.dom.element.createFromHtml( html );
CKEDITOR.instances.editor1.insertElement( element );
...and all it did was stick a little red flag in the document that was nothing; if I saved the document and reloaded it, it was gone.
The goal is to insert:
<a name="something"></a>
But the only thing that works is insertText() and that turns it into "safe" text, i.e. the < and > turn into lt; and gt;.
Help please? :)
I guess you used the code from the CKEDITOR Documentation (https://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertElement)
You probably ran into an issue, which says, that empty anchors show
a little red flag in the editor
(https://dev.ckeditor.com/ticket/14689). Unfortunately there seems to
be no way of CKEDITOR from doing this.
Empty Links are removed from
CKEDITOR automatically. You can add data-cke-survive="true" so these
links aren't removed,
Regards
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));
I am developing a wysiwyg editor because most of the ones I have found do not work the way I would like them to.
I have most of it done, "bold, Italic, Forecolor, backcolor, etc" but the problem I am having now is the make a view code button.
What I would like to happen is when the user hits the button they see the code and if they hit it again it toggles back to html.
I have tried
$('#wysiwyg').text($('#wysiwyg').html());
It did exactly what I wanted but it did not keep the line breaks, so all of the <p> tags would run together across one line. Does anyone have a better solution that would keep the line breaks, so if there is a line break for the <p> like there if you viewed the html.
You can add a white-space:pre when you switch to view code mode.
That should work fine:
http://jsfiddle.net/rNPJA/
Solution code showing how to toggle between the two
if ($(this).data('wysiwyg-action') == "changeview")
if ($('#wysiwyg').css('white-space') != "pre")
$('#wysiwyg').text($('#wysihtml-content').html()).css({ 'white-space':'pre' })
else
$('#wysiwyg').html($('#wysihtml-content').text()).css({ 'white-space':'normal' })
I've been stuck on this for hours and would love some help. I'm using tinyMCE with the syntaxhl plugin using syntaxhighlighter 2.1.382.
Everything works great with non-highlighted code. However, when using setContent with highlighted code, I get no joy. I'm hoping there is something obvious here I'm not seeing.
$(window).load(function() {
tinyMCE.activeEditor.setContent('<p>here is some code:</p>
<pre class="brush: jscript;fontsize: 100; first-line: 1; ">var fs = require("fs");
module.exports = function(app, service){
fs.readdir(__dirname + "/controllers", function(err, files){
if (err) throw err;
files.forEach(function(file){
var name = file.replace(".js", "");
require("./controllers/" + name)(app, service);
});
});
};</pre>');
});
However, this doesn't work. I've tried to debug the javascript, but I'm having trouble there to (at least with the chrome dev tools).
There is no error message, just no populated content. I've tried using {format: 'raw'} as suggested in the tinyMCE docs, but no luck there.
I'm hoping somebody else has tried to do this and succeeded.
I do not know the highlight plugin, but i guess it inserts a special stylesheet into the editor iframes head. This leads to the styling (highlighting) of special html tags a.s.o..
In this case the content is not affected/changed.
You won't be able to get your highlighted content as it looks with this plugin.
Unfortunately, I never got the above code to work. I think that the <pre> tag must take over in the browser and mess things up. Also, I'm a bit dubious still of the line breaks causing harm. #Thariama was some help which was great, however, after reading all the documentation on extended_valid_elements, valid_elements, and valid_children, and configuring the tinyMCE init many ways, I couldn't get this to work.
However, I did find a solution for me. It turns out if I set the <textarea> directly with encoded html (so <pre> tag becomes <pre class="brush: bash;fontsize: 100; first-line: 1; ">) then it works properly. Since this is working and it cuts out having to do a setContent after tinyMCE is initialized, this will work for me.
The syntax highlighting is working nicely. I came across this link while searching around if anyone else wants to do the same.
Is it possible to create a block of code within the CKEditor that will not be touched by the editor itself, and will be maintained in its intended-state until explicitly changed by the user? I've been attempting to input javascript variables (bound in script tags) and a flash movie following, but CKEditor continues to rewrite my pasted code/markup, and in doing so breaking my code.
I'm working with the following setup:
<script type="text/javascript">
var editor = CKEDITOR.replace("content", {
height : "500px",
width : "680px",
resize_maxWidth : "680px",
resize_minWidth : "680px",
toolbar :
[
['Source','-','Save','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','SpecialChar']
]
});
CKFinder.SetupCKEditor( editor, "<?php print url::base(); ?>assets/ckfinder" );
</script>
I suppose the most ideal solution would be to preserve the contents of any tag that contains class="preserve" enabling much more than the limited exclusives.
Update: I'm thinking the solution to this problem is in CKEDITOR.config.protectedSource(), but my regular-expression experience is proving to be too juvenile to handle this issue. How would I go about exempting all tags that contain the 'preserved' class from being touched by CKEditor?
In CKEDITOR folder you have a config.js file. Open it and paste the code:
CKEDITOR.editorConfig = function( config ) {
config.allowedContent = {
script: true,
$1: {
// This will set the default set of elements
elements: CKEDITOR.dtd,
attributes: true,
styles: true,
classes: true
}
};
};
It will allow <script>...</script> tags in Source mode.
Suggestion 1: Create separate plain textarea for the admin to enter the scripts / HTML code.
Suggestion 2: Introduce a bbcode, like [script][/script] or [html][/html] that the admins can use to put the scripts / HTML code and have your server-side translate them into <script></script> and HTML code. Make sure when showing a saved content into the CKEditor, you need to have your server-side translate them into the bbcode first (or CKEditor will strip them out). Or the less-hassle way is to store the submitted content in the database as it is entered and only do the translation when displaying the page.
Suggestion 3: Since you want to use class="preserve" to mark tags you don't want CKEditor to strip out, then add the following JavaScript lines when initializing the editor:
// protect <anytag class="preserve"></anytag>
CKEDITOR.config.protectedSource.push( /<([\S]+)[^>]*class="preserve"[^>]*>.*<\/\1>/g );
// protect <anytag class="preserve" /><
CKEDITOR.config.protectedSource.push( /<[^>]+class="preserve"[^>\/]*\/>/g );
The issue is not with the CKEditor. Instead, the issue was with the MVC-Engine running the Site itself. Kohana has a global_xss_filtering within its configuration that is enabled by default. This prevents the submission of script tags, to prevent scripting-attacks on your site. Changing this value to false will permit the submission of <script> tags in forms, but it also opens up the site to potential security issues that can be very serious. It is advisable that you not disable global_xss_filtering.
/* /(system|application)/config/config.php - line 66 */
/**
* Enable or disable global XSS filtering of GET, POST, and SERVER data. This
* option also accepts a string to specify a specific XSS filtering tool.
*/
$config['global_xss_filtering'] = FALSE;