lengyue0030

导航

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>"

 

posted on 2017-06-12 15:32  lengyue0030  阅读(135)  评论(0编辑  收藏  举报