wangEditor的基本使用及踩坑记录

最新推荐文章于 2024-08-16 16:14:08 发布

Zoey Chou

最新推荐文章于 2024-08-16 16:14:08 发布

阅读量1.7w

点赞数 4

分类专栏：前端学习笔记文章标签： wangEditor富文本编辑器

本文链接：https://blog.csdn.net/aimee_ice/article/details/88546620

版权

本文记录了在项目中使用wangEditor3作为富文本编辑器的过程，包括基本的下载与使用方法，以及遇到的两个主要问题：1. 由于DOM未渲染导致的错误，通过setTimeout解决；2. 删除内容后出现空标签，使用正则表达式清理。最后提到了一个后续问题的解决策略，即避免使用模板引擎直接渲染编辑器内容。

摘要由CSDN通过智能技术生成

前言

最近写项目用到了富文本编辑器，在同事的建议下，采用了wangEditor3，在此记录下使用wangEditor3的基本步骤以及遇到的一些问题

基本使用

基本使用步骤原作者已讲的非常详细，如有需要，移步----->wangEditor3使用手册

下载

直接下载：https://github.com/wangfupeng1988/wangEditor/releases
使用npm下载：npm install wangeditor（注意wangeditor全部是小写字母）
使用bower下载：bower install wangeditor（前提保证电脑已安装了bower）
使用CDN：//unpkg.com/wangeditor/release/wangEditor.min.js

使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/wangE