tinymce原装插件源码分析（五）-searchreplace

searchreplace

功能：查找和替换

代码注释见： https://www.xunhanliu.top/static/js/tinymce/plugins/searchreplace/plugin.js

结构

界面的注册还是editor.addMenuItem和editor.addButton。（plugin.js 370-385）。不过入口的形式与前几节的有稍许的变化：

他把界面注册部分放到了Plugin函数的init函数内部了：

这里推测：tinymce.PluginManager.add函数会自动执行绑定的函数的init函数。

界面部分（弹框）

关于窗口创建部分，以后不要使用这种方式进行创建（tinymce.ui.Factory.create）。推荐使用： https://www.tiny.cloud/docs/ui-components/。 关于参数部分的设置，有空再写。

源码部分：

思想：

查找部分：

1、点击查找，先查找一遍，并把查找到的内容进行灰底标记，并标记上这是第几个查找到的元素。并高亮第一个找到的

2、然后再点击查找，相当于点击‘’下一个‘’，高亮下一个找到的。由于第一步已经标记过了，所以这一步直接选择全部标记成灰底的，然后在这里面找下一个。

替换部分（逐个替换）：

对当前高亮元素进行替换，然后把后面加灰底的匹配的index-1。（因为他们前面替换掉了一个元素）

1、3大块元素的处理

块级元素 blockElementsMap

 ADDRESS: {}
 ARTICLE: {}
 ASIDE: {}
 BLOCKQUOTE: {}
 CAPTION: {}
 CENTER: {}
 DATALIST: {}
 DD: {}
 DIR: {}
 DIV: {}
 DL: {}
 DT: {}
 FIELDSET: {}
 FIGURE: {}
 FOOTER: {}
 FORM: {}
 H1: {}
 H2: {}
 H3: {}
 H4: {}
 H5: {}
 H6: {}
 HEADER: {}
 HGROUP: {}
 HR: {}
 ISINDEX: {}
 LI: {}
 MENU: {}
 NAV: {}
 NOSCRIPT: {}
 OL: {}
 OPTGROUP: {}
 OPTION: {}
 P: {}
 PRE: {}
 SECTION: {}
 SELECT: {}
 TABLE: {}
 TBODY: {}
 TD: {}
 TFOOT: {}
 TH: {}
 THEAD: {}
 TR: {}
 UL: {}
 address: {}
 article: {}
 aside: {}
 blockquote: {}
 caption: {}
 center: {}
 datalist: {}
 dd: {}
 dir: {}
 div: {}
 dl: {}
 dt: {}
 fieldset: {}
 figure: {}
 footer: {}
 form: {}
 h1: {}
 h2: {}
 h3: {}
 h4: {}
 h5: {}
 h6: {}
 header: {}
 hgroup: {}
 hr: {}
 isindex: {}
 li: {}
 menu: {}
 nav: {}
 noscript: {}
 ol: {}
 optgroup: {}
 option: {}
 p: {}
 pre: {}
 section: {}
 select: {}
 table: {}
 tbody: {}
 td: {}
 tfoot: {}
 th: {}
 thead: {}
 tr: {}
 ul: {}

内部文本不进行匹配的块级元素hiddenTextElementsMap

 AUDIO: {}
 IFRAME: {}
 NOSCRIPT: {}
 OBJECT: {}
 PRE: {}
 SCRIPT: {}
 STYLE: {}
 TEXTAREA: {}
 VIDEO: {}
 audio: {}
 iframe: {}
 noscript: {}
 object: {}
 pre: {}
 script: {}
 style: {}
 textarea: {}
 video: {}

shortEndedElementsMap（自己翻译，就是表示闭合标签比较短的）

 AREA: {}
 BASE: {}
 BASEFONT: {}
 BR: {}
 COL: {}
 EMBED: {}
 FRAME: {}
 HR: {}
 IMG: {}
 INPUT: {}
 ISINDEX: {}
 LINK: {}
 META: {}
 PARAM: {}
 SOURCE: {}
 TRACK: {}
 WBR: {}
 area: {}
 base: {}
 basefont: {}
 br: {}
 col: {}
 embed: {}
 frame: {}
 hr: {}
 img: {}
 input: {}
 isindex: {}
 link: {}
 meta: {}
 param: {}
 source: {}
 track: {}
 wbr: {}

2、Plugin.done部分

把加灰底的标记全部去掉，然后把高亮的部分（如果有，匹配到的）转化成选区（蓝底白字）。

值得学习的地方：

对选区加特定的marker (function genReplacer)、二段匹配。

这一部分的逻辑比较强悍、比较难阅读，结合我给的注释，然后在前端debug，逐步执行，便于理解。