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

时间:2023-03-08 17:10:43
'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>"