zoukankan      html  css  js  c++  java
  • 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: {}
     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: {}
    View Code

     内部文本不进行匹配的块级元素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,逐步执行,便于理解。

  • 相关阅读:
    投票系统完善
    投票系统设计与实现
    一天天进步
    洛谷P4168 [Violet]蒲公英 题解 数列分块
    LOJ6285. 数列分块入门 9 题解
    洛谷P5340 大中锋的游乐场 题解 分层图最短路
    P1073 [NOIP2009 提高组] 最优贸易 题解 分层图最短路
    洛谷P7297 [USACO21JAN] Telephone G 题解 分层图最短路
    洛谷P1119 灾后重建 题解 Floyd算法
    安装redis 后本地系统空间越来越小
  • 原文地址:https://www.cnblogs.com/xunhanliu/p/10714399.html
Copyright © 2011-2022 走看看