angularjs 与 UEditor开发，添加directive，保证加载顺序正常

'use strict';
angular.module('app.core').directive('ueditor', [function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ctrl) {

            var _initContent = '';
            var editor;
            var editorReady = false;

            ctrl.$render = function () {
                _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
                setContent(_initContent);
            };

            function init() {
                editor = new UE.ui.Editor({
                    initialContent: scope.content,
                    wordCount: false, // 字数统计
                    elementPathEnabled: false, // 元素路径
                    autoFloatEnabled: false, // 工具栏浮动
                    autoHeightEnabled: false, // 自动长高
                    toolbars: [
                        [
                            'source', 'fontsize', '|',
                            'blockquote', 'horizontal', '|',
                            'removeformat', '|',
                            'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|',
                            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
                            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
                            'insertorderedlist', 'i
nsertunorderedlist', '|',
                            'link', 'unlink', '|',
                            'insertimage', 'music', 'insertvideo', 'template'
                        ]
                    ]
                });
                editor.render(element[0]);
                editor.ready(function () {
                    editorReady = true;
                    setContent(_initContent);
                    editor.addListener('contentChange', function () {
                        if (!scope.$$phase) {
                            scope.$apply(function () {
                                ctrl.$setViewValue(editor.getContent());
                            });
                        }
                    });
                });
            }
            function setContent(content) {
                if (editor && editorReady) {
                    editor.setContent(content);
                }
            }

            init();
        }
    };
}]);

在html代码中引用

<div name="content" ueditor ng-model="content" ng-change="contentChanged()" ng-required="true"></div>

在controller中初始化及赋值

初始化 $scope.content="";

赋值：$scope.content="<b>abcdefg</b>"

 

转载于:https://www.cnblogs.com/lengyue0030/p/6961713.html