Angularjs and CKEditor

Angularjs was born in Google is a good front-end JS framework, has been used in several Google products. Angularjs has many features, most of which are: MVC, modular ( Module机制 ), automated bidirectional data binding, semantic tagging ( Directive ), Dependency injection, routing (route) mechanism, service mechanism, and so on. I used to use jquery, ExtJS, and so on, and now I'm just beginning to touch Angularjs, which is a very appealing framework.

Learning website:

• http://www. angularjs. org
• Http://www.angularjs.cn/tag/AngularJS Angularjs Chinese Community
• http://www.360doc.com/content/13/0729/13/13328522_303333441.shtml AngularJS Study Notes

We are doing B/s system is often used in the online editor (Freetextbox,ckeditor,kindeditor, etc.), I am more commonly used are kindeditor and ckeditor.

began to use Kindeditor,

Mainapp.directive (' Kindeditor ',function() {    return{require:'? Ngmodel ', Link:function(scope, element, Attrs, Ngmodel) {varEditor; Kindeditor.ready (function(K) {editor= K.create (element[0], {resizetype:1, Allowpreviewemoticons:false, Allowimageupload:false, items: [' FontName ', ' fontsize ', ' | ', ' forecolor ', ' hilitecolor ', ' bold ', ' italic ', ' underline ',                        ' Removeformat ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ', ' insertorderedlist ',                        ' Insertunorderedlist ', ' | ', ' emoticons ', ' image ', ' link ']                });            }); if(!Ngmodel) {                return; } editor.on (' Instanceready ',function() {editor.setdata (Ngmodel. $viewValue);            }); Editor.on (' Pastestate ',function() {scope. $apply (function() {Ngmodel. $setViewValue (Editor.getdata ());            });            }); Ngmodel. $render=function(value) {Editor.setdata (Ngmodel. $viewValue);        }; }    };});

However, there is no success, because the editor needs to initialize in the Kindeditor.ready, the following editor is undefined, so edito.on () can not run, this place may have other methods, but I do not find the method, if a friend found , can be exchanged under.

Then there was the use of CKEditor wrote an instruction

/** * CKEditor Directive * @author booking @ number Cloud*/mainapp.directive (' CKEditor ',function() {    return{require:'? Ngmodel ', Link:function(scope, element, Attrs, Ngmodel) {varCKEditor = Ckeditor.replace (element[0], {                            }); if(!Ngmodel) {                return; } ckeditor.on (' Pastestate ',function() {scope. $apply (function() {Ngmodel. $setViewValue (Ckeditor.getdata ());            });            }); Ngmodel. $render=function(value) {Ckeditor.setdata (Ngmodel. $viewValue);        }; }    };});

This can be used successfully.

But I found the problem when I edited it and didn't do it on the second edit.

Ckeditor.setdata (Ngmodel. $viewValue);

and CKEditor bound to the Instanceready event, which is more perfect to use, the final ckeditor instructions are as follows

/** * CKEditor Directive * @author booking @ number Cloud*/mainapp.directive (' CKEditor ',function() {    return{require:'? Ngmodel ', Link:function(scope, element, Attrs, Ngmodel) {varCKEditor = Ckeditor.replace (element[0], {                            }); if(!Ngmodel) {                return; } ckeditor.on (' Instanceready ',function() {ckeditor.setdata (Ngmodel. $viewValue);            }); Ckeditor.on (' Pastestate ',function() {scope. $apply (function() {Ngmodel. $setViewValue (Ckeditor.getdata ());            });            }); Ngmodel. $render=function(value) {Ckeditor.setdata (Ngmodel. $viewValue);        }; }    };});

Simple to use, just add the CKEditor directive to the HTML tag

<ckeditor ng-model= "Entity.catalog"  class= "Form-control" ></ textarea >

Add:

Several friends said Ueditor very useful, tested a bit, wrote a angularjs ueditor instructions

Mainapp.directive (' Ueditor ',function() {    return{require:'? Ngmodel ', Link:function(scope, element, Attrs, Ngmodel) {varUeditor = Ue.geteditor (element[0], {                //Configuration            }); if(!Ngmodel) {                return; } ueditor.on (' Instanceready ',function() {ueditor.setcontent (Ngmodel. $viewValue);            }); Ueditor.on (' Pastestate ',function() {scope. $apply (function() {Ngmodel. $setViewValue (Ueditor.getcontent ());            });            }); Ngmodel. $render=function(value) {ueditor.setcontent (Ngmodel. $viewValue);        }; }    };});

Usage simply add the ueditor directive to the HTML tag

<ueditor ng-model= "Entity.catalog"  class= "Form-control"  ></textarea>