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
1 ADDRESS: {} 2 ARTICLE: {}View Code3 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: {}View Code
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: {}View Code
2、Plugin.done部分
把加灰底的標記全部去掉,然後把高亮的部分(如果有,匹配到的)轉化成選區(藍底白字)。
值得學習的地方:
對選區加特定的marker (function genReplacer)、二段匹配。
這一部分的邏輯比較強悍、比較難閱讀,結合我給的註釋,然後在前端debug,逐步執行,便於理解。
tinymce原裝插件源碼分析(五)-searchreplace