Home Web Front-end JS Tutorial Line breaks and automatic content extraction in online editors_javascript skills

Line breaks and automatic content extraction in online editors_javascript skills

May 16, 2016 pm 06:53 PM
content newline editor

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
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
.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to enable Sensitive Content Warning on iPhone and learn about its features How to enable Sensitive Content Warning on iPhone and learn about its features Sep 22, 2023 pm 12:41 PM

Especially over the past decade, mobile devices have become the primary way to share content with friends and family. The easy-to-access, easy-to-use interface and ability to capture images and videos in real time make it a great choice for creating and sharing content. However, it's easy for malicious users to abuse these tools to forward unwanted, sensitive content that may not be suitable for viewing and does not require your consent. To prevent this from happening, a new feature with "Sensitive Content Warning" was introduced in iOS17. Let's take a look at it and how to use it on your iPhone. What is the new Sensitive Content Warning and how does it work? As mentioned above, Sensitive Content Warning is a new privacy and security feature designed to help prevent users from viewing sensitive content, including iPhone

Detailed guide to 15 Python editors/IDEs, there is always one that suits you! Detailed guide to 15 Python editors/IDEs, there is always one that suits you! Aug 09, 2023 pm 05:44 PM

There is no better way to write Python code than using an integrated development environment (IDE). Not only can they make your work simpler and more logical, they can also improve programming experience and efficiency. Everyone knows this. The question is, how to choose the best Python development environment among the many options.

How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation Mar 04, 2024 pm 01:50 PM

How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "

Essential software for C language programming: five good helpers recommended for beginners Essential software for C language programming: five good helpers recommended for beginners Feb 20, 2024 pm 08:18 PM

C language is a basic and important programming language. For beginners, it is very important to choose appropriate programming software. There are many different C programming software options on the market, but for beginners, it can be a bit confusing to choose which one is right for you. This article will recommend five C language programming software to beginners to help them get started quickly and improve their programming skills. Dev-C++Dev-C++ is a free and open source integrated development environment (IDE), especially suitable for beginners. It is simple and easy to use, integrating editor,

How to wrap lines in BarTender - How to wrap lines in BarTender How to wrap lines in BarTender - How to wrap lines in BarTender Mar 05, 2024 pm 07:52 PM

Many users use the BarTender software in their offices. Recently, some new users have asked how to wrap lines in BarTender. Below, the editor will bring you the method of wrapping lines in BarTender. Let us take a look below. 1. In BarTender, click the Create Text button in the toolbar, select Create Single Line Text, and enter the text content. 2. Double-click the created text object to open the text properties dialog box. Switch to the "Text Format" tab and select "Paragraph" for "Type" on the right. 3. Click Close, adjust the size of the text box or enter more text, or wrap the text according to actual requirements.

Introduction to Go language development tools: a list of essential tools Introduction to Go language development tools: a list of essential tools Mar 29, 2024 pm 01:06 PM

Title: Introduction to Go language development tools: List of essential tools In the development process of Go language, using appropriate development tools can improve development efficiency and code quality. This article will introduce several essential tools commonly used in Go language development, and attach specific code examples to allow readers to understand their usage and functions more intuitively. 1.VisualStudioCodeVisualStudioCode is a lightweight and powerful cross-platform development tool with rich plug-ins and functions.

How to wrap rows in excel table How to wrap rows in excel table Feb 09, 2024 pm 02:00 PM

In the process of using Excel, we have to perform many different operations. Sometimes we need to wrap a line in a cell. So what exactly do we need to do to wrap a cell? Let’s take a look at how to wrap lines in a computer excel table. [Collection of excel table operation methods] How to wrap rows in excel table? Answer: You can do this by automatically wrapping rows and setting cell formats. 1. Automatic line wrapping 1. We select the area that needs to be wrapped in the table and click [Automatically wrap] on the [Start] page; 2. Then we adjust the width of column A to an appropriate value; 2. Set the cells Format 1. First, we select the area that needs to be wrapped, right-click the mouse, and click [Set Cell Format]; 2. Then in the pop-up

Golang editor recommendations: five choices suitable for development Golang editor recommendations: five choices suitable for development Jan 19, 2024 am 09:00 AM

With the popularity and popularity of Golang, more and more developers are beginning to use this programming language. However, like other popular programming languages, Golang development requires choosing a suitable editor to improve development efficiency. In this article, we will introduce five editors suitable for Golang development. VisualStudioCodeVisualStudioCode (VSCode for short) is a free cross-platform editor developed by Microsoft. It is based on Elect

See all articles