zoukankan      html  css  js  c++  java
  • 为富文本编辑器wangEditor添加源码模式

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

    一、快速扩展一个菜单

      【注意】以 Button 菜单为例演示,官方文档里有其他类型的菜单,注册步骤都是一样的。

    1、准备

    // 引入 wangEditor
    import E from 'wangeditor' // npm 安装
    // const E = window.wangEditor // CDN 引入的方式
    
    // 获取必要的变量,这些在下文中都会用到
    const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
    
    // 【注意】如果版本 <= v4.0.5 需要这样写:
    // const { $ } = E
    // const { BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E.menuConstructors

    2、菜单class

    // 第一,菜单 class ,Button 菜单继承 BtnMenu class
    class AlertMenu extends BtnMenu {
        constructor(editor) {
            const $elem = E.$(
                `<div class="w-e-menu">
                    <button>alert</button>
                </div>`
            )
            super($elem, editor)
        }
        // 菜单点击事件
        clickHandler() {
            // 做任何你想做的事情
            // 可参考【常用 API】文档,来操作编辑器
            alert('hello world')
        }
        // 菜单是否被激活(如果不需要,这个函数可以空着)
        // 1. 激活是什么?光标放在一段加粗、下划线的文本时,菜单栏里的 B 和 U 被激活,如下图
        // 2. 什么时候执行这个函数?每次编辑器区域的选区变化(如鼠标操作、键盘操作等),都会触发各个菜单的 tryChangeActive 函数,重新计算菜单的激活状态
        tryChangeActive() {
            // 激活菜单
            // 1. 菜单 DOM 节点会增加一个 .w-e-active 的 css class
            // 2. this.this.isActive === true
            this.active()
            // // 取消激活菜单
            // // 1. 菜单 DOM 节点会删掉 .w-e-active
            // // 2. this.this.isActive === false
            // this.unActive()
        }
    }

    3、注册菜单

    const editor = new E('#div1')
    
    // 注册菜单
    const menuKey = 'alertMenuKey' // 菜单 key ,各个菜单不能重复
    editor.menus.extend('alertMenuKey', AlertMenu)
    
    // 将菜单加入到 editor.config.menus 中
    // 也可以通过配置 menus 调整菜单的顺序,参考【配置菜单】部分的文档
    editor.config.menus = editor.config.menus.concat(menuKey)
    
    // 注册完菜单,再创建编辑器,顺序很重要!!!
    editor.create()

    二、增加查看源码模式

      经过以上三步的话,那么工具栏上就有我们加的菜单了,那么如何实现源码模式呢?

      在clickHandler里去操作editor,然后利用editor.txt.html() 设置展示值

          let _this = this
          const E = window.wangEditor
          const { $, BtnMenu } = E
          class AlertMenu extends BtnMenu {
            constructor(editor) {
              const $elem = E.$(
                `<div class="w-e-menu">
                  <i class="nb-html"></i>
                </div>`
              )
              super($elem, editor)
            }
            clickHandler() {
              _this.showSource()
              this.tryChangeActive()
            }
            tryChangeActive() {
              if (_this.isHTML) this.active()
              else this.unActive()
            }
          }
        showSource () {
          let _this = this
          let _editor = _this.editor
          _this.isHTML = !_this.isHTML
          let _source = _editor.txt.html()
          if (_this.isHTML) {
            _source = _source.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;")
          } else {
            _source = _editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ")
          }
          _editor.txt.html(_source)
        }
  • 相关阅读:
    Android应用开发SharedPreferences存储数据的使用方法
    Android ListView不响应OnItemClickListener解决办法
    Java 毫秒转换为日期类型、日期转换为毫秒
    关于android软键盘enter键的替换与事件监听
    如何使用adb命令查看android中的数据库
    android坐标
    getHitRect获取点击控件的位置
    UTC的相互转换(java)
    深入理解Android的startservice和bindservice
    TS格式解析
  • 原文地址:https://www.cnblogs.com/goloving/p/13953947.html
Copyright © 2011-2022 走看看