zoukankan      html  css  js  c++  java
  • 【代码导读】Github 开源项目——wysihtml5 富编辑器(Bootstrap 风格)【二】

    如果您意外进入该页面,或许从下述链接开始更容易理解:

    【代码导读】Github 开源项目——wysihtml5 富编辑器(Bootstrap 风格)【一】

    1. 整体结构

    在 wysihtml5 中,所有对象受 wysihtml5 命令空间保护,从其初始化定义看,整个代码架构一目了然:

    https://github.com/xing/wysihtml5/blob/master/src/wysihtml5.js

     1 var wysihtml5 = {
     2   version: "0.4.0pre",
     3   
     4   // namespaces
     5   commands:   {},
     6   dom:        {},
     7   quirks:     {},
     8   toolbar:    {},
     9   lang:       {},
    10   selection:  {},
    11   views:      {},
    12   
    13   INVISIBLE_SPACE: "uFEFF",
    14   
    15   EMPTY_FUNCTION: function() {},
    16   
    17   ELEMENT_NODE: 1,
    18   TEXT_NODE:    3,
    19   
    20   BACKSPACE_KEY:  8,
    21   ENTER_KEY:      13,
    22   ESCAPE_KEY:     27,
    23   SPACE_KEY:      32,
    24   DELETE_KEY:     46
    25 };

    1.1. editor(编辑器类)

    https://github.com/xing/wysihtml5/blob/master/src/editor.js

    wysihtml5.Editor 编辑器类未在全局空间 wysihtml5 中直接初始化给出。它是整个编辑器的总控模块执行入口,通过调用其构造函数便能创建一个编辑器对象,且保证同一页面中的各个编辑器互不影响。

    该类可以接收不同的配置项来修改编辑器的默认行为,且向外导出大量事件。

    它是 app 与编辑器之前的通信结点。

    快速初始化一个默认编辑器:

    1 <script>
    2 var editor = new wysihtml5.Editor("wysihtml5-textarea", { // id of textarea element
    3   toolbar:      "wysihtml5-toolbar", // id of toolbar element
    4   parserRules:  wysihtml5ParserRules // defined in parser rules set 
    5 });
    6 </script>

    1.2 views(视图命名空间)

    该命名空间用于管理以下几个类:

    • wysihtml5.views.View
      https://github.com/xing/wysihtml5/blob/master/src/views/view.js
      视图类,编辑器与编辑面板之间的抽象层,主要用于切换代码视图与编辑面板视图。
    • wysihtml5.views.Composer
      https://github.com/xing/wysihtml5/blob/master/src/views/composer.js
      编辑面板类,由其构造产生的对象可以直接对应一个编辑区(即 iframe),用于控制一个编辑区的样式及行为,同时提供了访问编辑区中内容的接口。其创建时,会初始化沙箱,同时创建选择管理器、命令管理器、自动键接管理器、对象大小调整管理器、撤销管理器、换行管理器。
      它通过 wysihtml5.views.Composer.prototype.observe 监控编辑区中的事件,wysihtml5.views.Composer.prototype.style 管理编辑区显示样式、重置 placeholder、与 textarea 同步 focus/blur 事件。
      访问连接,可见如果效果:

      前往查看:http://classfoo.com/app/editor
    • wysihtml5.views.Synchronizer
      保证编辑面版与 textarea 元素中的内容永远一致。
    • wysihtml5.views.Textarea
      提供接口访问 textarea 元素。

    1.3 wysihtml5.toolbar.Toolbar(工具栏类)

    https://github.com/xing/wysihtml5/blob/master/src/toolbar/toolbar.js

    管理编辑器中的工具栏,响应按钮事件,并转换成对应的命令发送给 wysihtml5.views.Composer 。

    通过成员 wysihtml5.toolbar.Speech 提供语音功能。

    通过成员 wysihtml5.toolbar.Dialog 实现对话框,实现除了点击之外的另一种交互输入,可以用于实现复杂的插件。

    前往查看:http://classfoo.com/app/editor

    1.4 wysihtml5.commands(命令命名空间)

    https://github.com/xing/wysihtml5/blob/master/src/commands/formatBlock.js

    将工具栏触发的事件转换成对应的命令,及实现撤销、重做命令。

    1.5 wysihtml5.selection (选择器)

    实现编辑过程中的范围选中功能,主要是由于浏览器自带的 window.getSelection 存在很多问题,当前主要基于外部库 Rangy 实现。

    1.6 wysihtml5.dom(dom 操作)

    大量 dom 操作,如果替换成 Jquery 实现,应该能减少不小代码体积。

    https://github.com/xing/wysihtml5/tree/master/src/dom

    1.7 wysihtml5.lang(语法命名空间)

    https://github.com/xing/wysihtml5/tree/master/src/lang

    实现几种常用的语法:

    数组:

    https://github.com/xing/wysihtml5/blob/master/src/lang/array.js

    对象:

    https://github.com/xing/wysihtml5/blob/master/src/lang/object.js

    字符串:

    https://github.com/xing/wysihtml5/blob/master/src/lang/string.js

    事实派发:

    https://github.com/xing/wysihtml5/blob/master/src/lang/dispatcher.js

    1.8 wysihtml5.quirks

    该命名空间中的内容主要用于修复、过滤格式。

  • 相关阅读:
    PAT Advanced 1008 Elevator (20) [数学问题-简单数学]
    PAT Advanced 1051 Pop Sequence (25) [栈模拟]
    PAT Basic 完美数列(25) [two pointers]
    PAT Basic 插⼊与归并(25) [two pointers]
    PAT Advanced 1089 Insert or Merge (25) [two pointers]
    第五章 数据的共享和保护
    第四章 面向对象程序设计的基本特点 课堂笔记
    第三章 函数 课堂笔记
    扫描线-Meteor UVALive
    贪心-Stall Reservations POJ
  • 原文地址:https://www.cnblogs.com/hello-ethan/p/4019849.html
Copyright © 2011-2022 走看看