当前位置:网站首页>富文本编辑:wangEditor使用教程

富文本编辑:wangEditor使用教程

2022-07-04 12:51:00 愤怒的小火柴人


前言

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

版权声明
本文为[愤怒的小火柴人]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_45856669/article/details/125519737