富文本编辑：wangEditor使用教程

---

前言

孩子最近做的一个项目需要用到富文本编辑，本来想用github上的react-draft-wysiwyg资源，但是发现出现了版本问题，React更新到了v18，所以很多功能都不好使了，百度半年也没找到解决方法，最后舍弃决定使用wangEditor
官方文档

一、官方文档

基本就是下载，引入
按需下载安装
我创建的是React项目，所以按react下载的依赖

二、样式问题

我是今天才发现这个样式问题，看看这万恶的官方大大，叫我们自定义，如果你不写样式，最后表格、引用、代码块什么的都只是简单的文本显示！！！

解决方法：
在引用Editor的外面嵌套一个div（什么都可，不写也行），你需要给这整个html内容显示区添加下面样式，就可以显示表格什么的了

    .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;
      /* 保留空格 */
    }

    .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;
    }

注意editor-content-view是你自定义的class类名，下面是我的html显示代码（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'
 }} />