wangEditor是一款轻量级的富文本编辑器。使用还比较方便，但是缺少查看源码模式，需要我们自定义一个menu给增加查看源码模式

下面是wangEditor增加源码模式的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>wangEditor增加源码模式</title>

</head>

<body>

    <div id="editor"></div>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

    <script type="text/javascript">

      const E = window.wangEditor;

      const editor = new E("#editor");

      let isHTML = false;

      const { BtnMenu } = E

      class htmlMenu extends BtnMenu {

        constructor(editor) {

          const $elem = E.$(

            `<div class="w-e-menu">

              <button>html</button>

            </div>`

          )

          super($elem, editor)

        }

        clickHandler() {

          let source = editor.txt.html();

          if(source){

            isHTML = !isHTML;

          }

          if(isHTML){

            source = source.replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");

          }else{

            source = editor.txt.text().replace(/</ig, "<").replace(/>/ig, ">").replace(/ /ig, " ")

          }

          editor.txt.html(source);

          this.tryChangeActive();

          // console.log(source);

        }

        tryChangeActive() {

            if(isHTML){

                this.active()

            }else{

                this.unActive()

            }

        }

      }

    // 注册菜单

    const menuKey = 'htmlMenuKey' // 菜单 key ，各个菜单不能重复

    editor.menus.extend('htmlMenuKey', htmlMenu)

    // 将菜单加入到 editor.config.menus 中

    // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档

    editor.config.menus = editor.config.menus.concat(menuKey)

    editor.create()

    </script>

</body>

</html>

此代码亲测可用，直接复制使用即可

　　

wangEditor增加源码模式，添加查看源码功能的更多相关文章

  1. IDEA无法编译源码，IDEA查看源码出现/* compiled code */

    打开Settings -> Plugins    搜索dec,选中,确定,重启,解决

  2. Ubuntu14 搭载vim环境查看源码

    首先是下载完整的vim74,然后编译安装.遗憾的是当编译时,没有开启图形界面. 在安装新版本的Vim之前,你需要卸载原来安装的老版本Vim,依次在终端下执行下列命令: sudo apt-get rem ...

  3. 结合提供者模式解析Jenkins源码国际化的实现

    关键字:提供者模式,设计模式,github,gerrit,源码学习,jenkins,国际化,maven高级,maven插件 本篇文章的源码展示部分由于长度问题不会全部粘贴展示,或许只是直接提及,需要了 ...

  4. eclipse查看源码失败总结

    之前看的网上查看源码的方法,查看了JDK,只是知其然不知所以然. 后来发现要是查看其他源码,总是查看失败. 最开始每次点击Attach  Source包到所要查看源码的jar包,但是还是这样. 但是依 ...

  5. VS2010查看源码对应的汇编语言

    在学习c++中const关键字的过程中,经常会看到各种寄存器.汇编指令分析,像下面的图这样 左图是g++中反汇编的效果,右图是vs中反汇编的效果. 如果我们想要查看源码所对应的汇编语言,应该怎么操作呢 ...

  6. 设置Eclipse可以Debug模式调试JDK源码，并显示局部变量的值

    最近突然萌发了研究JDK源码的想法,所以就想到了在自己常用的Eclipse上可以调试JDK源码. 整个设置过程也很简单: 首先你要安装好JDK(我的JDK安装路径根目录是D:\Java\jdk-8u9 ...

  7. Django框架深入了解_01(Django请求生命周期、开发模式、cbv源码分析、restful规范、跨域、drf的安装及源码初识)

    一.Django请求生命周期: 前端发出请求到后端,通过Django处理.响应返回给前端相关结果的过程 先进入实现了wsgi协议的web服务器--->进入django中间件--->路由f分 ...

  8. 被Spring坑了一把，查看源码终于解决了DataFlow部署K8s应用的问题

    1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! Docker & Kubernetes相关文章:容器技术 基于各种原因,团队的Kubernetes被加了限制,必须在 ...

  9. 如何使用Jdk查看源码？

    先看再点赞,给自己一点思考的时间,如果对自己有帮助,微信搜索[程序职场]关注这个执着的职场程序员.我有什么:职场规划指导,技能提升方法,讲不完的职场故事,个人成长经验. 最近,有很多读者问我,有没有j ...

  10. Android 如何在Eclipse中查看Android API源码 及 support包源码

    当我们阅读android API开发文档时候,上面的每个类,以及类的各个方法都是已经写好的方法和控件,可是我们只是在搬来使用,不知道它的原理,它是如何被实现的.android系统是开源的,所以谷歌官方 ...

随机推荐

  1. 4G EPS 中的 Control Plane

    目录 文章目录 目录 前文列表 控制平面 归属环境部分 无线接入网络部分 核心网络 EPS CP 中的 GTP-C UP 中的 GTP-U Tunnel 两端的 F-TEID 需要通过 CP 的信令流 ...

  2. pageoffice6 实现在线模板套红

    在Web项目中处理Word文档,经常会用到Word模板,只不过这里的"模板"概念,都是指在Web项目中预先放置的doc.docx等扩展名的.真正的Word文档,对于Excel和PP ...

  3. aws语音呼叫调用，告警电话

    import requests data = { 'channel': '99x', 'called_number': '135xxx', 'tts_code': 'TTS_xx', 'tts_par ...

  4. linux 为普通用户配置sudo权限

    目录 一.关于sudo 二.sudo的工作过程 三.为普通用户配置sudo权限 3.1 方法一:把普通用户的附属组更改为wheel,使其具有sudo权限(推荐) 3.2 方法二:修改/etc/sudo ...

  5. 8.16考试总结(NOIP模拟41)[你相信引力吗·marshland·party?·半夜]

    美丽的不是这个世界,而是看世界的你的眼神. T1 你相信引力吗 解题思路 好像只有我一个人没有看出来这个题是单调栈(现在一看区间问题就是双指针,线段树) 维护一个单调递减的栈. 我们把最大值放到左端点 ...

  6. 异构数据源同步之数据同步 → DataX 使用细节

    开心一刻 中午我妈微信给我消息 妈:儿子啊,妈电话欠费了,能帮妈充个话费吗 我:妈,我知道了,我帮你充 当我帮我妈把话费充好,正准备回微信的时候,我妈微信给我发消息了 妈:等会儿子,不用充了,刚刚有个 ...

  7. 使用eNSP配置灵活QinQ

    参考链接:https://blog.csdn.net/xu119718/article/details/55260519 在"使用eNSP配置端口QinQ"实验中是基于端口划分的用 ...

  8. .NET8 Hello World!

    ​ 使用ASP.NET Core Web Application模板创建的Empty项目如下: ​ 这是一个最简单的Web项目,运行起来会在根路径响应Hello World! 2.1.1 Progra ...

  9. Easysearch：语义搜索、知识图和向量数据库概述

    什么是语义搜索? 语义搜索是一种使用自然语言处理算法来理解单词和短语的含义和上下文以提供更准确的搜索结果的搜索技术.旨在更好地理解用户的意图和查询内容,而不仅仅是根据关键词匹配,还通过分析查询的语义和 ...

  10. Scrapy框架(五)--请求传参

    在某些情况下,我们爬取的数据不在同一个页面中,例如,我们爬取一个电影网站,电影的名称,评分在一级页面,而要爬取的其他电影详情在其二级子页面中. 这时我们就需要用到请求传参. 请求传参的使用场景 当我们 ...