"Code Guide" Github Open source project--WYSIHTML5 Rich editor (Bootstrap style) "II"

Source: Internet
Author: User

If you accidentally enter the page, it may be easier to understand from the following links:

"Code Guide" Github Open source project--WYSIHTML5 Rich editor (Bootstrap style) "One"

1. Overall structure

In WYSIHTML5, all objects are protected by the WYSIHTML5 command space, and the entire code architecture is at a glance from its initialization definition:

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   :      {},   invisible_space: "\ufeff",   empty_function:function () {},16   Element_ node:1,18   text_node:    3,19   backspace_key: 8,21   enter_key:      13,22   Escape_key:     27,23   space_key:      32,24   delete_key:     4625};
   

1.1. Editor (compiler Class)

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

WYSIHTML5. The editor class is not directly initialized in the global space wysihtml5. It is the overall control module of the entire editor and the execution portal , by calling its constructor to create an editor object, and ensure that the individual editors on the same page do not affect each other.

The class can receive different configuration items to modify the default behavior of the editor, and to export a large number of events outward.

It is the communication node before the app and editor.

Quick initialization of a default editor:

1 <script>2 var editor = new WYSIHTML5. Editor ("Wysihtml5-textarea", {//ID of TEXTAREA element3   toolbar:      "Wysihtml5-toolbar",//ID of toolbar element4   parserrules:  wysihtml5parserrules//defined in parser rules set 5}); 6 </script>

1.2 Views (view namespace)

This namespace is used to manage the following classes:

    • Wysihtml5.views.View
      Https://github.com/xing/wysihtml5/blob/master/src/views/view.js
      The abstraction layer between the view class, the editor and the edit panel, primarily for switching between Code view and edit panel view.
    • Wysihtml5.views.Composer
      Https://github.com/xing/wysihtml5/blob/master/src/views/composer.js
      The edit panel class, which is constructed by its construction, can directly correspond to an edit area (that is, an IFRAME) that controls the style and behavior of an edit area, while providing an interface for accessing the content in the editing area. When it is created, the sandbox is initialized, and the selection Manager, Command Manager, auto Key Manager, object sizing Manager, Undo manager, and line break manager are created.
      It monitors events in the editing area through Wysihtml5.views.Composer.prototype.observe, Wysihtml5.views.Composer.prototype.style manages edit area display styles, resets Placeholder, synchronize Focus/blur events with textarea.
      Access connection, visible if effect:

      Go to view: Http://classfoo.com/app/editor
    • Wysihtml5.views.Synchronizer
      Ensure that the edit panel is always consistent with the content in the TEXTAREA element.
    • Wysihtml5.views.Textarea
      Provides an interface to access the TEXTAREA element.

1.3 Wysihtml5.toolbar.Toolbar (Toolbar Class)

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

Manages the toolbar in the editor, responds to button events, and translates to a corresponding command sent to Wysihtml5.views.Composer.

Provides voice functionality through member Wysihtml5.toolbar.Speech.

Implement a dialog box with member Wysihtml5.toolbar.Dialog to implement an interactive input other than click, which can be used to implement complex plugins.

Go to view: Http://classfoo.com/app/editor

1.4 WYSIHTML5. Commands (Command namespace)

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

Converts the event triggered by the toolbar to the corresponding command, and implements the undo and redo commands.

1.5 WYSIHTML5. Selection (selector)

Realization of the scope of the editing process, mainly due to the browser window.getselection there are many problems, the current mainly based on the external library rangy implementation.

1.6 Wysihtml5.dom (DOM operation)

A large number of DOM operations, if replaced by Jquery implementations, should be able to reduce the size of the code.

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

1.7 Wysihtml5.lang (Syntax namespace)

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

Implement several common syntax:

Array:

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

Object:

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

String:

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

Fact Distribution:

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

1.8 Wysihtml5.quirks

The content in this namespace is primarily used to fix and filter the format.

"Code Guide" Github Open source project--WYSIHTML5 Rich editor (Bootstrap style) "II"

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.