前言

孩子最近做的一个项目需要用到富文本编辑，本来想用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'
 }} />

最后

以上就是动人柚子为你收集整理的富文本编辑：wangEditor使用教程前言一、官方文档二、样式问题的全部内容，希望文章能够帮你解决富文本编辑：wangEditor使用教程前言一、官方文档二、样式问题所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。