Problem description

The rich text editor needs to implement an editable navigation tree, and the whitespace in the navigation tree that the customer reports their Settings does not work when running online. The specific problems are as follows:

As you can see, the HTML text node is different from the rendered content, causing the user’s intuitive input space to not work.

Question why

Whitespace is ignored because of the way the browser handles whitespace in HTML text: whitespace before and after the text is ignored, and successive whitespace inside the text is counted as only one, which means the browser ignores whitespace by default. That is, the following code is equivalent:

<p>  hello  word  </p>
<p>  hello  word</p>
<p>hello  word  </p>
<p>  hello word  </p>
<p>hello word</p>
Copy the code

The final render results are:

hello word
Copy the code

The solution

use&nbsp;orThe & # 160;

You can use translation characters for whitespace in HTML, which is to use   Or the & # 160; , the following is the modification to the problem:

As shown above, you can now display whitespace. But one thing to be careful about when you use react is using   When replacing Spaces as text,   Output as is, as follows:

This is because React outputs the contents of variables as text, instead of rendering them as translated. In this case, we need to do the following to meet the requirements:

render () {
    const title = '😄 & have spent       Test set & have spent       Top folder '
    return (<a styleName="node_title" dangerouslySetInnerHTML={{__html: title}} ></a>)}Copy the code

But using dangerouslySetInnerHTML is not recommended because of the potential vulnerability. You can use Unicode non-destructive space characters:

render () {
    const title = '😄      测试置         顶文件夹'
    return (<a styleName="node_title">
        {
            title.replace(/\s/g, '\u00a0')
        }
    </a>)}Copy the code

This allows you to display Spaces.

usepreThe label

The HTML 

 element represents predefined formatted text. The text in the element is usually arranged as in the original file, in a uniform font, with whitespace (such as Spaces and newlines) in the text displayed.
 tag = 
 tag = 
 tag = 
 tag








usecssthewhite-spaceattribute


The following is the CSS white-space property of each value of the space and other processing rules.






Each value of the CSS white-space property:


    

  • normal: Consecutive whitespace characters are merged and newline characters are treated as whitespace.
    • 

  • nowrapAnd:normalAgain, consecutive whitespace characters are merged. But the newline in the text is invalid.
    • 

  • pre: Consecutive whitespace characters are retained. When you encounter a newline or

    Element.
    • 

  • pre-wrap: Consecutive whitespace characters are retained. When you encounter a newline or

    Element, or if you need to fill in line boxes.
    • 

  • pre-line: Consecutive whitespace characters are merged. When you encounter a newline or

    Element, or if you need to wrap lines in order to fill in line boxes.
    • 

  • break-spacesAnd:pre-wrapIs the same except that :(any reserved sequence of whitespace always takes up space, including the end of a line; There is a newline opportunity after each reserved space character, including between space characters; This reserved space takes up space without hanging, which affects the box’s intrinsic size (minimum and maximum content size).
    •