Angularjs中整合KindEditor

第一步：引入 kindeditor.js

<script src="/static/libs/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/libs/kindeditor/lang/zh-CN.js"></script>

第二步：定义编辑器模块

/**
 * admin模块初始化
 * @type {angular.Module|module}
 */
let admin     = angular.module('adminApp', ['ng.kindeditor']);

/**
 * 模块 - KindEditor
 */
angular.module('ng.kindeditor', []).directive('ngKindeditor', [function () {
    return {
        restrict: 'EA',
        require : '?ngModel',
        scope   : {},
        link    : function (scope, element, attrs, kindEditorController) {
            // let kindeditor;
            // 编辑器选项
            let options                  = {
                height                  : '300px',
                width                   : '998px',
                resizeType              : 1,
                // 文章上传部分
                uploadJson              : '/api/upload/fileUploadJson.html',
                // 文件域名称
                filePostName            : 'file',
                // 上传时的附加参数
                extraFileUploadParams   : {
                    item_id    : 1000,
                    category_id: 1
                },
                // 图片上传成功后切换到编辑
                fillDescAfterUploadImage: true,
                // 是否开启浏览远程文件
                allowFileManager        : false,
                // 浏览远程图片的服务器端程序
                fileManagerJson         : '/api/upload/fileManagerJson.html',
                // 从空间中选择文件后
                // afterSelectFile         : function (even) {
                // },
                afterChange             : function () {
                    kindEditorController.$setViewValue(this.html());
                }
            };
            // 创建编辑器
            let editor                   = KindEditor.create(element[0], options);
            // 渲染编辑器
            kindEditorController.$render = function () {
                editor.html(kindEditorController.$viewValue);
            }
        }
    }
}]);

第三步：html中引入 ng-kindeditor 指令

<textarea ng-model="vm.row.content" ng-kindeditor class="layui-textarea" lay-verify="content" title="" style="margin-bottom: 20px;"></textarea>