Line breaks and automatic content extraction in online editors

Line breaks and automatic content extraction in online editors_javascript skills

WBOY

Release： 2016-05-16 18:53:51

Original

1414 people have browsed it

Some use "return false" to solve the problem of inserting
in IE, but Firefox does not solve it. And this problem has not been solved even by fckeditor. Haha, I wonder if it was intentional.
Maybe after reading the above description, you still don’t understand the problem. Let’s do an experiment. Open fckeditor, switch to source code mode, enter

test test test test test test

, then switch back to design mode, and then enter an enter anywhere in this sentence, such as after the third test. , you will find that what you get in the source code is

test test test

, and if it is in the form of

, it will be automatically generated in this form, which will add a lot of useless code, and this problem exists in all online editors I can find.
Why do you have to use
for line breaks? Simple and flexible. Unlike

, which has a large space between blank lines, you only need to enter a few more carriage returns in large blank lines. And if you use automatic extraction of part of the article content, you are not afraid that the tag does not have a closure (maybe '
' should not be cut, but there is only a small amount of content and the display is abnormal. And the probability of '
' being cut is very low, unless Use multiple
in a row, which is easy to fix, of course). In this way, you can use

when using a custom layer. The advantage is that you are not afraid of being cut and the tag will not have closure. This avoids using

. If you use

to automatically intercept the content of the article and there is a

without closure (this situation is easy to happen if there is a lot of content in a div), it will have a bad impact on the effect of the entire page. Removing tags and then intercepting the content is not a good choice. For example, csdn's blog first removes the tags and then intercepts the article. Everyone has seen this effect, and it is definitely not good. Of course, if you want to ensure the integrity of the tag, such as img, a still has some work to do, it will be much simpler. Remember that after processing in this way, after intercepting the article content and storing it in the database, the

tag that the user may edit using the source code must be replaced with the

tag.
How can I get

test test test
test test test

?
Haha, the solution to the problem is actually very simple. That is to block the default action of the browser instead of returning false (this method can be found online, but this can only solve the problem under IE).
Use onkeydown event binding function (compatible with ie, firefox)
function cancelEnter (e)
{
var keyCode = e.charCode || e.keyCode;
if(keyCode == 13)
{
// Here use the insert character function plus
(of course it can be other) such as document.execCommand(cmd, false, '
');
// Note that IE does not support this command
// Since the implementation may be different in iframe or div code, it depends on your specific situation (to be compatible with IE, Firefox must also be compatible)
// You can also search on the Internet Not much to say when it comes to the code
if(e.preventDefault) e.preventDefault(); // Disable browser default actions (here is the key)
else e.returnValue = false;
}
}
This gives you

test test test
test test test