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

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"