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

 1 ADDRESS: {}
 2 ARTICLE: {}
 
 3 ASIDE: {}
 4 BLOCKQUOTE: {}
 5 CAPTION: {}
 6 CENTER: {}
 7 DATALIST: {}
 8 DD: {}
 9 DIR: {}
10 DIV: {}
11 DL: {}
12 DT: {}
13 FIELDSET: {}
14 FIGURE: {}
15 FOOTER: {}
16 FORM: {}
17 H1: {}
18 H2: {}
19 H3: {}
20 H4: {}
21 H5: {}
22 H6: {}
23 HEADER: {}
24 HGROUP: {}
25 HR: {}
 
26 ISINDEX: {}
27 LI: {}
28 MENU: {}
29 NAV: {}
30 NOSCRIPT: {}
31 OL: {}
32 OPTGROUP: {}
33 OPTION: {}
34 P: {}
35 PRE: {}
36 SECTION: {}
37 SELECT: {}
38 TABLE: {}
39 TBODY: {}
40 TD: {}
41 TFOOT: {}
42 TH: {}
43 THEAD: {}
44 TR: {}
45 UL: {}
46 address: {}
47 article: {}
48 aside: {}
49 blockquote: {}
50 caption: {}
51 center: {}
52 datalist: {}
53 dd: {}
54 dir: {}
55 div: {}
56 dl: {}
57 dt: {}
58 fieldset: {}
59 figure: {}
60 footer: {}
61 form: {}
62 h1: {}
63 h2: {}
64 h3: {}
65 h4: {}
66 h5: {}
67 h6: {}
68 header: {}
69 hgroup: {}
70 hr: {}
71 isindex: {}
72 li: {}
73 menu: {}
74 nav: {}
75 noscript: {}
76 ol: {}
77 optgroup: {}
78 option: {}
79 p: {}
80 pre: {}
81 section: {}
82 select: {}
83 table: {}
84 tbody: {}
85 td: {}
86 tfoot: {}
87 th: {}
88 thead: {}
89 tr: {}
90 ul: {}

內部文本不進行匹配的塊級元素hiddenTextElementsMap

 1 AUDIO: {}
 2 IFRAME: {}
 3 NOSCRIPT: {}
 4 OBJECT: {}
 5 PRE: {}
 6 SCRIPT: {}
 7 STYLE: {}
 8 TEXTAREA: {}
 9 VIDEO: {}
10 audio: {}
11 iframe: {}
12 noscript: {}
13 object: {}
14 pre: {}
15 script: {}
16 style: {}
17 textarea: {}
18 video: {}

shortEndedElementsMap（自己翻譯，就是表示閉合標簽比較短的）

 1 AREA: {}
 2 BASE: {}
 3 BASEFONT: {}
 4 BR: {}
 5 COL: {}
 6 EMBED: {}
 7 FRAME: {}
 8 HR: {}
 9 IMG: {}
10 INPUT: {}
11 ISINDEX: {}
12 LINK: {}
13 META: {}
14 PARAM: {}
15 SOURCE: {}
16 TRACK: {}
17 WBR: {}
18 area: {}
19 base: {}
20 basefont: {}
21 br: {}
22 col: {}
23 embed: {}
24 frame: {}
25 hr: {}
26 img: {}
27 input: {}
28 isindex: {}
29 link: {}
30 meta: {}
31 param: {}
32 source: {}
33 track: {}
34 wbr: {}

2、Plugin.done部分

把加灰底的標記全部去掉，然後把高亮的部分（如果有，匹配到的）轉化成選區（藍底白字）。

值得學習的地方：

對選區加特定的marker (function genReplacer)、二段匹配。

這一部分的邏輯比較強悍、比較難閱讀，結合我給的註釋，然後在前端debug，逐步執行，便於理解。

tinymce原裝插件源碼分析（五）-searchreplace