当前位置:网站首页>富文本编辑: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'
}} />
边栏推荐
- [C question set] of VII
- LifeCycle
- Golang uses JSON unmarshal number to interface{} number to become float64 type (turn)
- 1200. 最小绝对差
- LiveData
- 学内核之三:使用GDB跟踪内核调用链
- 2022g3 boiler water treatment examination question simulation examination question bank and simulation examination
- 吃透Chisel语言.10.Chisel项目构建、运行和测试(二)——Chisel中生成Verilog代码&Chisel开发流程
- 学习项目是自己找的,成长机会是自己创造的
- 基于PaddleX的智能零售柜商品识别
猜你喜欢
Fisher信息量检测对抗样本代码详解
[matlab] summary of conv, filter, conv2, Filter2 and imfilter convolution functions
如何在 2022 年为 Web 应用程序选择技术堆栈
The font of markdown grammar is marked in red
205. 同构字符串
sharding key type not supported
[FAQ] summary of common causes and solutions of Huawei account service error 907135701
30: Chapter 3: develop Passport Service: 13: develop [change / improve user information, interface]; (use * * * Bo class to accept parameters, and use parameter verification)
[R language data science]: cross validation and looking back
Applet live + e-commerce, if you want to be a new retail e-commerce, use it!
随机推荐
吃透Chisel语言.11.Chisel项目构建、运行和测试(三)——Chisel测试之ScalaTest
程序员的焦虑
Basic mode of service mesh
Understand chisel language thoroughly 05. Chisel Foundation (II) -- combinational circuits and operators
【Matlab】conv、filter、conv2、filter2和imfilter卷积函数总结
MySQL 5 installation and modification free
1200. Minimum absolute difference
Golang uses JSON unmarshal number to interface{} number to become float64 type (turn)
瑞吉外卖笔记
测试流程整理(2)
Install and use MAC redis, connect to remote server redis
Mongodb commonly used 28 query statements (forward)
Understand chisel language thoroughly 09. Chisel project construction, operation and testing (I) -- build and run chisel project with SBT
CVPR 2022 | greatly reduce the manual annotation required for zero sample learning, and propose category semantic embedding rich in visual information (source code download)
Apple 5g chip research and development failure: continue to rely on Qualcomm, but also worry about being prosecuted?
File creation, writing, reading, deletion (transfer) in go language
MySQL8版本免安装步骤教程
MongoDB常用28条查询语句(转)
SCM polling program framework based on linked list management
面试拆解:系统上线后Cpu使用率飙升如何排查?