wangEditor小插件快捷开发

一.两个链接：（直接看官网文档操作）

、

1. 什么是wangeditor

(一个富文本编辑器)

2. 什么是富文本编辑器

(不止包含文字，还包含图片、表情、字体、表格、超链接、音频、视频等内容的文本编辑器)。

3. 为什么要用富文本编辑器

使内容更加丰富多彩。

更加方便保存文章在数据库（带图片和各种文本样式的页面,例如新闻）

https://www.wangeditor.com/demo/
https://www.wangeditor.com

二.使用

创建空白编辑器

引入css定义样式，放在head下面，body上面


<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<style>
  #editor—wrapper {
    border: 1px solid #ccc;
    z-index: 100; /* 按需定义 */
  }
  #toolbar-container { border-bottom: 1px solid #ccc; }
  #editor-container { height: 500px; }
style>

定义HTML结构，放在body里面


<div id="editor—wrapper">
    <div id="toolbar-container">div>
    <div id="editor-container">div>
div>

引入 JS 创建编辑器，放在body后面


<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js">script>
<script>
const { createEditor, createToolbar } = window.wangEditor
 
const editorConfig = {
    placeholder: 'Type here...',
    onChange(editor) {
      const html = editor.getHtml()
      console.log('editor content', html)
      // 也可以同步到 </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">const</span> editor = <span class="hljs-title function_">createEditor</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">selector</span>: <span class="hljs-string">'#editor-container'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">html</span>: <span class="hljs-string">'<p><br></p>'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">config</span>: editorConfig,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">mode</span>: <span class="hljs-string">'default'</span>, <span class="hljs-comment">// or 'simple'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">})</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">const</span> toolbarConfig = {}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-keyword">const</span> toolbar = <span class="hljs-title function_">createToolbar</span>({</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    editor,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">selector</span>: <span class="hljs-string">'#toolbar-container'</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">config</span>: toolbarConfig,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-attr">mode</span>: <span class="hljs-string">'default'</span>, <span class="hljs-comment">// or 'simple'</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">})</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">script</span>></span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin" data-title="登录后复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p></p> </li></ul></li></ul> 
<p>        要实现一个完整的<a href="https://so.csdn.net/so/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8&spm=1001.2101.3001.7020" target="_blank" class="hl hl-1" data-report-view="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"富文本编辑器\"}"}" data-report-click="{"spm":"1001.2101.3001.7020","dest":"https://so.csdn.net/so/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8&spm=1001.2101.3001.7020","extra":"{\"searchword\":\"富文本编辑器\"}"}" data-tit="富文本编辑器" data-pretit="富文本编辑器">富文本编辑器</a>功能，你可能还需要以下功能：</p> 
<ul><li><a href="https://www.wangeditor.com/v5/content.html" title="内容处理">内容处理</a> - 获取内容，<strong>设置内容</strong>，展示内容</li><li><a href="https://www.wangeditor.com/v5/toolbar-config.html" title="工具栏配置">工具栏配置</a> - 插入新菜单，屏蔽某个菜单等</li><li><a href="https://www.wangeditor.com/v5/editor-config.html" title="编辑器配置">编辑器配置</a> - 兼听各个<strong>生命周期</strong>，自定义<strong>粘贴</strong></li><li><a href="https://www.wangeditor.com/v5/menu-config.html" title="菜单配置">菜单配置</a> - 配置颜色、字体、字号、链接校验、<strong>上传图片、上传视频</strong>等</li><li><a href="https://www.wangeditor.com/v5/API.html" title="编辑器 API">编辑器 API</a> - 控制编辑器内容和选区</li><li><a href="https://www.wangeditor.com/v5/development.html" title="扩展新功能">扩展新功能</a> - 扩展菜单、元素、插件等</li></ul> 
<p> </p> 
<p><img alt="" height="1080" src="https://1000bd.com/contentImg/2023/11/03/232219521.png"  ></p> 
<p> <strong>当你建好了编辑器之后，通过操作就会发现，富文本编辑器可以大大提高你的开发效率，因为可视化界面可以帮助你去写HTML代码，以及给他加效果，这些效果你可以在控制台直接找到HTML代码，粘贴到我们需要的页面上去，也可以通过editor.getHtml();方法，由事件触发后，打印到页面来复制，总之，有需要的时候就会亏啊很多</strong></p>
                </div>
                    </div>
                </li>

                <li class="list-group-item ul-li">

                    <b>相关阅读:</b><br>
                    <nobr>
<a href="/Article/Index/1726313">AI绘画-Stable Diffusion三次元人物模型训练（炼丹）教程，你也可以定制你的三上youya老师！</a>                            <br />
<a href="/Article/Index/1394253">vue3中watch的用法</a>                            <br />
<a href="/Article/Index/1519128">Linux应用 防止程序重复发起</a>                            <br />
<a href="/Article/Index/656194">分享十万级TPS的IM即时通讯综合消息系统的架构</a>                            <br />
<a href="/Article/Index/1088834">非关系型数据库技术课程 第十一周作业（SpringBoot项目中使用Redis作为数据缓存，Redis的缓存机制，数据一致性、缓存穿透和缓存雪崩等问题的处理）</a>                            <br />
<a href="/Article/Index/870830">Python 连接 ES 的 API 用例：获取满足条件的索引列表</a>                            <br />
<a href="/Article/Index/745833">如何将vue项目打包在服务器上使用nginx运行，并使用反向代理解决跨域问题</a>                            <br />
<a href="/Article/Index/1562920">全量知识系统 程序详细设计 “智能”分类及标注的主题词架构（Q&A百度搜索）</a>                            <br />
<a href="/Article/Index/1421351">做题记录_</a>                            <br />
<a href="/Article/Index/1473270">SpringCloud微服务 【实用篇】| Eureka注册中心、Ribbon负载均衡</a>                            <br />
                    </nobr>
                </li>
                <li class="list-group-item from-a mb-2">
                    原文地址：https://blog.csdn.net/qq_60555957/article/details/126724673
                </li>

            </ul>
        </div>

        <div class="col-lg-4 col-sm-12">
            <ul class="list-group" style="word-break:break-all;">
                <li class="list-group-item ul-li-bg" aria-current="true">
                    最新文章
                </li>
                <li class="list-group-item ul-li">
                    <nobr>
<a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a>                            <br />
<a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a>                            <br />
<a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a>                            <br />
<a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a>                            <br />
<a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a>                            <br />
<a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常，环境问题解决方案</a>                            <br />
<a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a>                            <br />
<a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a>                            <br />
<a href="/Article/Index/1887520">AnatoMask论文汇总</a>                            <br />
<a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a>                            <br />
                    </nobr>
                </li>
            </ul>

            <ul class="list-group pt-2" style="word-break:break-all;">
                <li class="list-group-item ul-li-bg" aria-current="true">
                    热门文章
                </li>
                <li class="list-group-item ul-li">
                    <nobr>
<a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧！！！</a>                            <br />
<a href="/Article/Index/797680">奉劝各位学弟学妹们，该打造你的技术影响力了！</a>                            <br />
<a href="/Article/Index/888183">五年了，我在 CSDN 的两个一百万。</a>                            <br />
<a href="/Article/Index/888179">Java俄罗斯方块，老程序员花了一个周末，连接中学年代！</a>                            <br />
<a href="/Article/Index/797730">面试官都震惊，你这网络基础可以啊！</a>                            <br />
<a href="/Article/Index/797725">你真的会用百度吗？我不信 — 那些不为人知的搜索引擎语法</a>                            <br />
<a href="/Article/Index/797702">心情不好的时候，用 Python 画棵樱花树送给自己吧</a>                            <br />
<a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo！原来做游戏也不是很难，连憨憨学妹都学会了！</a>                            <br />
<a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a>                            <br />
<a href="/Article/Index/888192">10行代码集2000张美女图，Python爬虫120例，再上征途</a>                            <br />
                    </nobr>
                </li>
            </ul>

        </div>
    </div>
</div>
<!-- 主体 -->


    <!--body结束-->
    <!--这里是footer模板-->
    
    <!--footer-->
<nav class="navbar navbar-inverse navbar-fixed-bottom">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="text-muted center foot-height">
                    Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>   
                    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a>
                </div>
                <div style="width:300px;margin:0 auto; padding:0px 5px;">
                    <a href="/regex.html">正则表达式工具</a>
                    <a href="/cron.html">cron表达式工具</a>
                    <a href="/pwdcreator.html">密码生成工具</a>
                </div>
                <div style="width:300px;margin:0 auto; padding:5px 0;">
                    <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
                    <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a>
                </div>
            </div>
        </div>
    </div>
  
</nav>
<!--footer-->

    <!--footer模板结束-->

    <script src="/js/plugins/jquery/jquery.js"></script>
    <script src="/js/bootstrap.min.js"></script>

    <!--这里是scripts模板-->
    

    
 


    <!--scripts模板结束-->

</body>
</html>