wangEditor编辑器使用及扩展

wangEditor

Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费

自定义扩展菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
const maxLength = 6800 // 富文本最大输入限制
const E = window.wangEditor
const {
  BtnMenu,
  DropListMenu,
  PanelMenu,
  DropList,
  Panel,
  Tooltip
} = E
const _editor = this

const menuTitle = {
  codingMenuTitle: ['代码模式', '文本模式'],
  switchoverMenuTitle: ['更多功能', '极简功能'],
}
const menuAll = [
  'head',
  'bold',
  'fontSize',
  'fontName',
  'italic',
  'underline',
  'strikeThrough',
  'indent',
  'lineHeight',
  'foreColor',
  'backColor',
  'link',
  'list',
  'todo',
  'justify',
  'quote',
  'emoticon',
  'image',
  'video',
  'table',
  'code',
  'splitLine',
  'undo',
  'redo'
]

const menuBrief = [
  'head',
  'bold',
  'fontSize',
  'fontName',
  'code',
  'high',
  'coding',
  'switchover'
]

class CodingMenu extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="${menuTitle.codingMenuTitle[0]}"><i class="iconfont icon-codelibrary"></i></div>`
    )
    super($elem, editor)
  }
  // 菜单点击事件
  clickHandler() {
    // 做任何你想做的事情
    _editor.codingSource(this.editor, this.$elem)
    this.tryChangeActive()
  }
  tryChangeActive() {
    if (_editor.isHTML) {
      this.active()
    } else {
      this.unActive()
    }
  }
}

class SwitchoverMenu extends BtnMenu {
  constructor(editor) {
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = E.$(
      `<div class="w-e-menu" data-title="${menuTitle.switchoverMenuTitle[0]}"><i class="iconfont icon-caidan"></i></div>`
    )
    super($elem, editor)
  }
  // 菜单点击事件
  clickHandler() {
    _editor.switchoverSource(this.editor, this.$elem)
    this.tryChangeActive()
  }
  tryChangeActive() {
    if (_editor.isHTML) {
      this.active()
    } else {
      this.unActive()
    }
  }
}

function codingSource(editor, elem) {
  const {
    title
  } = elem.elems[0].dataset
  if (title === menuTitle.codingMenuTitle[0]) {
    $(elem.elems).attr('data-title', menuTitle.codingMenuTitle[1]).addClass('lan-w-active')
  } else {
    $(elem.elems).attr('data-title', menuTitle.codingMenuTitle[0]).removeClass('lan-w-active')
  }
  let html = editor
  editor.isHTML = !editor.isHTML
  let source = html.txt.html()
  source = html.isHTML ?
    source.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/ /g, "&nbsp;") :
    editor.txt.text().replace(/&lt;/ig, "<").replace(/&gt;/ig, ">").replace(/&nbsp;/ig, " ")
  html.txt.text(source)
}

function switchoverSource(editor, elem) {
  const {
    title
  } = elem.elems[0].dataset
  const {
    menuList
  } = editor.menus
  if (title === menuTitle.switchoverMenuTitle[0]) {
    menuList.forEach(i => i.$elem.hasClass('lan-w-hide') && i.$elem.removeClass('lan-w-hide'))
    $(elem.elems).attr('data-title', menuTitle.switchoverMenuTitle[1]).addClass('lan-w-active')
    $(elem.elems).children().removeClass('icon-caidan').addClass('icon-zuixiaohua')
  } else {
    $(elem.elems).attr('data-title', menuTitle.switchoverMenuTitle[0]).removeClass('lan-w-active')
    $(elem.elems).children().removeClass('icon-zuixiaohua').addClass('icon-caidan')
    menuList.forEach(i => !menuBrief.includes(i.key) && i.$elem.addClass('lan-w-hide'))
  }
  setEditorCustomHeight()
}

E.registerMenu('coding', CodingMenu)
E.registerMenu('switchover', SwitchoverMenu)

const wangEditorHight = 560
const editorCustom = new E('#editor-custom')

editorCustom.config.height = wangEditorHight
editorCustom.config.border = false

editorCustom.config.menus = menuAll
editorCustom.create()

// 自定义初始化菜单
function initializeMenu() {

  const {
    menuList
  } = editorCustom.menus
  if (menuList && menuList.length) {
    menuList.forEach(i => !menuBrief.includes(i.key) && i.$elem.addClass('lan-w-hide'))
  }
  // 处理菜单展开和收缩引起的高度变化
  setEditorCustomHeight()
}

function setEditorCustomHeight() {
  const EditorCustomHeight = document.getElementById('editor-custom').offsetHeight
}

initializeMenu()

// 左编辑器 文本监听
editorCustom.config.onchange = function (newHtml) {
  const htmlStings = getHtmlStings(newHtml)
  const htmlLength = htmlStings.length
  if (htmlLength) {
    const wordCount = document.getElementById('words-counts')
    wordCount.innerText = htmlLength
    if (htmlLength > maxLength) {
      wordCount.innerHTML = `<span class="warnings">${htmlLength - maxLength}</span>`
    } else {
      wordCount.innerText = htmlLength
    }
  }
}