CODEWITHSUNDEEP
javascriptangularjsckeditor
Firze
Firze

Reputation: 4049

CKEditor adds <p> </p> after initializing

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>&nbsp;</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,
};

Upvotes: 2

Views: 1715

Answers (2)

Keith Taylor
Keith Taylor

Reputation: 11

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 !

Upvotes: 1

trapper_hag
trapper_hag

Reputation: 790

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*|&nbsp;]<\/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).

Upvotes: 0

Related Questions