Implement a simple Rich Text editor (ii): Add custom events to Rich text

To add a Submit button for rich Text, click the button to get rich text content. But before or after submission I want to do some things, such as content check content empty and so on.

We can also do this by directly binding a point-and-click event to the button, but in order to be modular, this example intends to customize the Beforesubmit, Aftersubmit two events for the submit button.

1. Create a Publish Subscriber object

In the previous article, the event system is an implementation of the publish-subscribe pattern, which decouples the event-posting function from the event-handling function, so that there is no direct call relationship between the two.

The simple publish subscriber object is implemented as follows:

varEvent = {//_cachepool: {}, the processing function cache pool is not written in this object because the prototype chain inheritance allows subclasses to share reference type data. Fire:function(Type, msg) {varFNS; if(! (FNS = This. _cachepool[type])) {            return; }        varLen =fns.length;  for(vari = 0, fn; i < Len; i++) {fn=Fns[i]; Fn.call ( This, MSG); }}, on:function(Type, callback) {if(! This. _cachepool[type]) {             This. _cachepool[type] = []; }         This. _cachepool[type].push (callback); }, UN:function(Type, callback) {varFNS = This. _cachepool[type]; if(FNS) { This. _cachepool[type] = Fns.filter (function(item) {//note compatibility, some low version array has no filter function                returnItem!==callback;        }); }    }};

To get rid of the cache pool here, because this object will be a part of the editor prototype, we want each editor to have its own private cache pool to prevent different editor instances from listening to the same event.

2. Editor style

This example editor sets the picture style to the command button and only implements the font bold feature:

. Editorout{Border:1px solid #ccc;width:200px;Height:200px;position:relative;}. Editortool{margin:2px;width:100%;}. Editorfoot{margin:2px;width:100%;position:Absolute;Bottom:0;}. editorout button{Height:20px;width:20px;margin:1px;Border:0px solid #fff;cursor:Pointer;Overflow:Hidden;}. Editorout Button.bold{background:URL (./imgs.svg) 0px 0px;background-size:140px 40px;}. Editorout Button.bold:hover{background:URL (./imgs.svg) 0px-20px;background-size:140px 40px;}

Note: SVG is the label (XML) language that paints vectors, and it is not affected by pixels.

3. Implement the Simple editor

Create the editor dynamically using the JS script.

The _create function creates an editor that encapsulates the process of creating editor command blocks, bottom blocks, input fields, and so on.

_createeditor the input domain function for the creation editor.

_createtool to create a command block function.

_CREATECOMMANDBTN to create a function that invokes the button of the editor command, this example implements only one button.

_createfoot Create the bottom block function.

_onbeforesubmit the function to start the custom event Beforesubmit.

_onaftersubmit the function to start the custom event Aftersubmit.

_CREATEPRINTBTN is the function that creates the output button. Both of the custom events in this example are started here.

Editorproto ={_create:function(ID) {varEditor = This. _createeditor (ID); varTool = This. _createtool (); varbutton = This. _CREATECOMMANDBTN (); varFoot = This. _createfoot (); varPRINTBTN = This. _CREATEPRINTBTN ();  This. printbtn =printbtn;        Tool.appendchild (button);        Foot.appendchild (PRINTBTN);        Editor.insertbefore (tool, Editor.firstchild);        Editor.appendchild (foot); returnEditor; }, _createeditor:function(ID) {varEditor =document.getElementById (ID); Editor.classname= "Editorout"; Editor.contenteditable=true; returnEditor; }, _createtool:function() {        varTool = Document.createelement ("div"); Tool.contenteditable=false; Tool.classname= "Editortool"; returntool; }, _createcommandbtn:function() {        varbutton = document.createelement ("button"); Button.classname= "Bold"; Button.title= "Bold"; Button.onclick=function(e) {Document.execcommand ("Bold",false,NULL);        }; returnbutton; }, _createfoot:function() {        varTool = Document.createelement ("div"); Tool.contenteditable=false; Tool.classname= "Editorfoot"; returntool; }, _onbeforesubmit:function(E, scope, callback) {Scope.fire (' Beforesubmit ', E); }, _onaftersubmit:function(E, scope, callback) {Scope.fire (' Aftersubmit ', E); }, _createprintbtn:function() {        varbutton = document.createelement ("Input"), that= This; Button.type= "button"Button.value= "Click to write"; Button.onmousedown=function(e) {That._onbeforesubmit (E, that);        }; Button.onmouseup=function(e) {That._onaftersubmit (E, that);        }; returnbutton; }};

4. Implement simple copy function

The function of the copy function is to combine the event object with the Editorproto object.

var function (Sub, sup, config)    {for (var in sup) {        if(!  Sub[p]) {            = sup[p];   copy         }     }}

5. Editor component

To achieve the goal of creating an instance at the end of the new one, we need to process the editor object into a constructor. Like ExtJS, JQuery, Mini UI and so on have implemented their own extend function, this example does not implement the inheritance function alone.

Copyif (Editorproto, Event); // Copy the event object to Editorproto function Editor (ID) {    this. _cachepool = {};   the cache pool for event handlers cannot be placed in the prototype this    . _create (id) ;  When new operates the constructor, create an editor instance  = Editorproto; // prototype chain inheritance

6. Verifying Beforesubmit and Aftersubmit event effects

The HTML defines two div as a container for two editors.

<id= "Editor">print ... </ Div > <  ID= "s"></div>

JS in the HTML two div in the creation of the editor, and the first editor bound two custom events, the second one only bound to test the effect.

var New Editor ("editor"); Editor.on (function() {Console.log ("Beforesubmit");}); Editor.on (function() {Console.log ("Aftersubmit");}); var New Editor ("S"); S.on (function() {Console.log ("s pre-commit event");});

Clicking on the first editor will print "Beforesubmit" and "Aftersubmit", and click on the second editor to print "s pre-commit event".

Create a custom event for the editor for the purpose of achieving!

Implement a simple Rich Text editor (ii): Add custom events to Rich text