Rich text editing: wangeditor tutorial

---

Preface

A project that children have recently done requires rich text editing , Originally wanted to use github Upper react-draft-wysiwyg resources , But I found that there was a version problem ,React Updated to v18, So many functions are not easy to use , Baidu hasn't found a solution for half a year , Finally, abandon and decide to use wangEditor
Official documents

One 、 Official documents

Basically, download , introduce
Download and install on demand
I created React project , So press react Download dependency

Two 、 The styling

I found this style problem today , Look at this evil official big , Let's customize , If you don't write the style , Final table 、 quote 、 Code blocks and everything are just simple text displays ！！！

resolvent ：
In reference to Editor Nested outside a div（ Anything , It's OK not to write ）, You need to give this whole html Add the following style to the content display area , You can display tables or something

    .editor-content-view {
    
      border: 3px solid #ccc;
      border-radius: 5px;
      padding: 0 10px;
      margin-top: 20px;
      overflow-x: auto;
    }

    .editor-content-view p, .editor-content-view li {
    
      white-space: pre-wrap;
      /*  Keep the space  */
    }

    .editor-content-view blockquote {
    
      border-left: 8px solid #d0e5f2;
      padding: 10px 10px;
      margin: 10px 0;
      background-color: #f1f1f1;
    }

    .editor-content-view code {
    
      font-family: monospace;
      background-color: #eee;
      padding: 3px;
      border-radius: 3px;
    }

    .editor-content-view pre>code {
    
      display: block;
      padding: 10px;
    }

    .editor-content-view table {
    
      border-collapse: collapse;
    }

    .editor-content-view td, .editor-content-view th {
    
      border: 1px solid #ccc;
      min-width: 50px;
      height: 20px;
    }

    .editor-content-view th {
    
      background-color: #f1f1f1;
    }

    .editor-content-view ul, .editor-content-view ol {
    
      padding-left: 20px;
    }

    .editor-content-view input[type="checkbox"] {
    
      margin-right: 5px;
    }

Be careful editor-content-view It's your custom class Class name , Here's my html Display code （React)

<div className='editor-content-view' dangerouslySetInnerHTML={
   {
     __html:newsDetail.content
 }} style={
   {
     border:'1px solid #BAC0BA',
     margin:'0px 24px',
     height:'300px',
     overflow:'auto',
     padding:'5px 10px'
 }} />