Hi I have implemented the ckeditor in my asp and vb web application. After a lot of struggle its working fine.
But its adding a lots of line breaks and paragraphs (specially copying and pasting from word file ) after every save. The editor is placing extra <br/> in side the html after submission of the page.
If there is one line break its adding 4 line breaks. if I submit
xxx<br>yyy
after submission it is being
xxx<br/><br/><br/><br/<br/><br/>yyy
To clarify when copying and pasting for the first time we do NOT see this behaviour, the problem is only seen on subsequent edits/saves.
Please advice me how i can handle that. So that it does not adds extra line breaks and paragraph after saving the form.
Here are the steps which I have followed to implement ckeditor.
1. Downloaded the ckeditor from the link . I am using the full package
2. Copied the whole folder under project folder.
3. In the master page added the following lines to add reference of ckeditor
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="/ckeditor/adapters/jquery.js" type="text/javascript"></script>
<script src="/ckeditor/ckeditor_custom.js" type="text/javascript"></script>
4. Changed the class for the specific textarea
<textarea runat="server" id="txtDescription" name="txtDescription" class="ckeditor" style="width: 98%; height: 250px;"></textarea>
5. Added following javascript function at the bottom of the content page
$('#' + '<%= btnSave.ClientID%>').mousedown(function () {
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].updateElement();
}
});
Thats it. nothing has changed in the code file
here the btn.save is the button which submits the data
To describe the problem clearly I am providing the case situation below.
Suppose I want to copy padte the follwing text from a word file.
Working Log • 1st Week : Introduction o Discovered the location of the website o Started familiarise with the websites and portal.
After pasting it into ck editor the html source of this is like following
<p><strong>Working Log</strong></p>
<ol style="list-style-type:lower-roman">
<li>1<sup>st</sup> Week : Introduction
<ul style="list-style-type:circle">
<li>Discovered the location of the website</li>
<li>Started familiarise with the websites and portal.</li>
</ul>
</li>
</ol>
But when I save the form and open it again the source code bees like this
<p><strong>Working Log</strong></p>
<p> </p>
<p> </p>
<ol style="list-style-type:lower-roman"><br />
<li>1<sup>st</sup> Week : Introduction<br />
<ul style="list-style-type:circle"><br />
<li>Discovered the location of the website</li>
<br />
<li>Started familiarise with the websites and portal.</li>
<br />
<br />
</ul>
</li>
<br />
<br />
</ol>
<p> </p>
<p> </p>
And the line break and paragraphs doubles and triples after each submission of the form.
Driving me mad. Please help how can i handle the situation.
----------------- Why My problem is different from the question asked in this link Removing unwanted newline characters when adding <p> in CKEditor -----------------
The question asked in that link does not explain all the detail. in my question i have explained clearly when I can see this problem. the person asked the question in the above mentioned link if he has copied and text from a word document or has he used html tags to format the text in the editor. I have mentioned every detail so that it bees easy for the people who will answer the question.
The problems was also different. The problem in the mentioned link was only concerned with the <p> replaced by indent. Whereas in my case every line break <br> and paragraph <p> has doubled itself every time I save the document . I was copying text from word document and mentioned it in my question. I did not find any detail in the question in above mentioned link.
Situations are different for different coder. the person asked that question did not explain what is his coding environment. I have implemented CKEditor in Vb.Net and ASP based web app and I mentioned that in my question. I also mentioned every steps how I have installed the editor in the app. But the person who asked the question in the link did not included any details. Also trying the solution given in his question did not solve my problem. So I included all the details in my question. And my solution is also different.
The answer given in the mentioned link did not solve my problem. i had to set every rules as false to get rid of the problem. Whereas in the answer of the above mentioned link two of the rules were set as True.
Also the function CKEDITOR.editorConfig = function (config) { was not mentioned in the answer to the question mentioned in the link. Hence the question given on that link was not helpful for me.
Hi I have implemented the ckeditor in my asp and vb web application. After a lot of struggle its working fine.
But its adding a lots of line breaks and paragraphs (specially copying and pasting from word file ) after every save. The editor is placing extra <br/> in side the html after submission of the page.
If there is one line break its adding 4 line breaks. if I submit
xxx<br>yyy
after submission it is being
xxx<br/><br/><br/><br/<br/><br/>yyy
To clarify when copying and pasting for the first time we do NOT see this behaviour, the problem is only seen on subsequent edits/saves.
Please advice me how i can handle that. So that it does not adds extra line breaks and paragraph after saving the form.
Here are the steps which I have followed to implement ckeditor.
1. Downloaded the ckeditor from the link http://ckeditor./download. I am using the full package
2. Copied the whole folder under project folder.
3. In the master page added the following lines to add reference of ckeditor
<script src="/ckeditor/ckeditor.js" type="text/javascript"></script>
<script src="/ckeditor/adapters/jquery.js" type="text/javascript"></script>
<script src="/ckeditor/ckeditor_custom.js" type="text/javascript"></script>
4. Changed the class for the specific textarea
<textarea runat="server" id="txtDescription" name="txtDescription" class="ckeditor" style="width: 98%; height: 250px;"></textarea>
5. Added following javascript function at the bottom of the content page
$('#' + '<%= btnSave.ClientID%>').mousedown(function () {
for (var i in CKEDITOR.instances) {
CKEDITOR.instances[i].updateElement();
}
});
Thats it. nothing has changed in the code file
here the btn.save is the button which submits the data
To describe the problem clearly I am providing the case situation below.
Suppose I want to copy padte the follwing text from a word file.
Working Log • 1st Week : Introduction o Discovered the location of the website o Started familiarise with the websites and portal.
After pasting it into ck editor the html source of this is like following
<p><strong>Working Log</strong></p>
<ol style="list-style-type:lower-roman">
<li>1<sup>st</sup> Week : Introduction
<ul style="list-style-type:circle">
<li>Discovered the location of the website</li>
<li>Started familiarise with the websites and portal.</li>
</ul>
</li>
</ol>
But when I save the form and open it again the source code bees like this
<p><strong>Working Log</strong></p>
<p> </p>
<p> </p>
<ol style="list-style-type:lower-roman"><br />
<li>1<sup>st</sup> Week : Introduction<br />
<ul style="list-style-type:circle"><br />
<li>Discovered the location of the website</li>
<br />
<li>Started familiarise with the websites and portal.</li>
<br />
<br />
</ul>
</li>
<br />
<br />
</ol>
<p> </p>
<p> </p>
And the line break and paragraphs doubles and triples after each submission of the form.
Driving me mad. Please help how can i handle the situation.
----------------- Why My problem is different from the question asked in this link Removing unwanted newline characters when adding <p> in CKEditor -----------------
The question asked in that link does not explain all the detail. in my question i have explained clearly when I can see this problem. the person asked the question in the above mentioned link if he has copied and text from a word document or has he used html tags to format the text in the editor. I have mentioned every detail so that it bees easy for the people who will answer the question.
The problems was also different. The problem in the mentioned link was only concerned with the <p> replaced by indent. Whereas in my case every line break <br> and paragraph <p> has doubled itself every time I save the document . I was copying text from word document and mentioned it in my question. I did not find any detail in the question in above mentioned link.
Situations are different for different coder. the person asked that question did not explain what is his coding environment. I have implemented CKEditor in Vb.Net and ASP based web app and I mentioned that in my question. I also mentioned every steps how I have installed the editor in the app. But the person who asked the question in the link did not included any details. Also trying the solution given in his question did not solve my problem. So I included all the details in my question. And my solution is also different.
The answer given in the mentioned link did not solve my problem. i had to set every rules as false to get rid of the problem. Whereas in the answer of the above mentioned link two of the rules were set as True.
Also the function CKEDITOR.editorConfig = function (config) { was not mentioned in the answer to the question mentioned in the link. Hence the question given on that link was not helpful for me.
-
please share the source that is being produced after you paste
xxx<br/>yyy– Sid M Commented Jun 18, 2014 at 10:51 - I have updated the problem and added the source code in there. Please have a look and help me – Bashabi Commented Jun 18, 2014 at 11:47
- possible duplicate of Removing unwanted newline characters when adding <p> in CKEditor – dove Commented May 13, 2015 at 11:07
3 Answers
Reset to default 7I have solved the problem by adding the following lines of code in the config.js file.
CKEDITOR.editorConfig = function (config) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
CKEDITOR.on('instanceReady', function (ev) {
var writer = ev.editor.dataProcessor.writer;
// The character sequence to use for every indentation step.
writer.indentationChars = ' ';
var dtd = CKEDITOR.dtd;
// Elements taken as an example are: block-level elements (div or p), list items (li, dd), and table elements (td, tbody).
for (var e in CKEDITOR.tools.extend({}, dtd.$block, dtd.$listItem, dtd.$tableContent)) {
ev.editor.dataProcessor.writer.setRules(e, {
// Indicates that an element creates indentation on line breaks that it contains.
indent: false,
// Inserts a line break before a tag.
breakBeforeOpen: false,
// Inserts a line break after a tag.
breakAfterOpen: false,
// Inserts a line break before the closing tag.
breakBeforeClose: false,
// Inserts a line break after the closing tag.
breakAfterClose: false
});
}
for (var e in CKEDITOR.tools.extend({}, dtd.$list, dtd.$listItem, dtd.$tableContent)) {
ev.editor.dataProcessor.writer.setRules(e, {
indent: true,
});
}
});
}
if anyone facing the same problem like me just copy the above code and paste it in the config.js file in the ckeditor folder.
Thank you mo for your answers. You have been very helpful
you can avoid that by:
config.autoParagraph = false;
or
config.enterMode = CKEDITOR.ENTER_BR;
or
CKEDITOR.on('txtDescription', function (ev) {
ev.editor.dataProcessor.writer.setRules('br',
{
indent: false,
breakBeforeOpen: false,
breakAfterOpen: false,
breakBeforeClose: false,
breakAfterClose: false
});
});
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
and for more information see Output Formatting in CKEditor
Your problem isn't CKEditor or its configuration.
Instead you should look at your server code and remove the calls to nl2br