Angular之编辑器插件

想插入一个编辑器在页面上么？如上图所示，还可以转html哦~是不是很酷？在自己的页面上加上这么一个编辑器，瞬间变身高大上有木有？  只需简单的几步，满足你的需求！！

第一步，导入：

<script src="ngUeditor.js"></script>

第二步，引入Js文件

app.directive('ngUeditor', function () {
    return {
        restrict: 'AE',
        transclude: true,
        replace: true,
        template: '<script name="content" type="text/plain" ng-transclude @style></script>',
        require: '?ngModel',
        scope: {
            config: '=',
            style:'@'
        },
        link: function (scope, element, attrs, ngModel) {
            var editor = new UE.ui.Editor(scope.config || {});
            var _editorId = attrs.id ? attrs.id : "_editor" + (Date.now());
            element[0].id = _editorId;
            editor.render(element[0]);

            editor.ready(function()
            {
                //图片上传回调
                editor.addListener('beforeInsertImage', function (t, arg) {
                    if(scope.config.imageUploadCallback){
                        scope.config.imageUploadCallback(arg);
                    }
                });
                //侦听文件上传，取上传文件列表中第一个上传的文件的路径
                editor.addListener('afterUpfile', function (t, arg) {
                    if(scope.config.fileUploadCallback){
                        scope.config.fileUploadCallback(arg);
                    }
                });

                if(scope.config.getEditor){
                    scope.config.getEditor(editor);
                }

                if (ngModel) {
                    //Model数据更新时，更新百度UEditor
                    ngModel.$render = function () {
                        try {
                            editor.setContent(ngModel.$viewValue);
                        } catch (e) {

                        }
                    };
                    ngModel.$render(); //一开始加载渲染数据
                    //百度UEditor数据更新时，更新Model
                    editor.addListener('contentChange', function () {
                        setTimeout(function () {
                            scope.$apply(function () {
                                ngModel.$setViewValue(editor.getContent());
                            })
                        }, 0);
                    })
                }

            });
        }
    }
});

第三步，调用ngUeditor

var 模块名 = angular.module('模块名'，['ngUeditor'，……]

第四步，使用<ng-ueditor>

<ng-ueditor id="descriptionContainer" class="ueditContainer"
                                    config="editorConfig" ng-model="notify.notification"
                                    style="width:800px;height:400px">
</ng-ueditor>

效果如下：

欢迎各位大佬留言~