我爱编程Angular

angular-editor

2018-03-22  本文已影响0人  该昵称注册中

angular 集成editor

1:要引入ueditorConfig,ueditor.all

define([
    'angular',
    'ueditorConfig',
    'ueditor',
    'ueditorI18n'
], function (ng) {
    var moduleName = "ui.ueditor";
    ng
        .module(moduleName, [])
        .directive('ueditor', function () {
        return {
            restrict: 'AE',
            transclude: true,?
            replace: true,
            template: '<div ng-transclude></div>',
            require: '?ngModel',
            scope: {
                config: '='
            },
            link: function (scope, element, attrs, ngModel) {
                var editor = new UE.ui.Editor(scope.config || {});
                editor.render(element[0]);

                if (ngModel) {
                    //Model数据更新时,更新百度UEditor
                    ngModel.$render = function () {
                        try {
                            editor.addListener( 'ready', function() {
                                setEditorValue(ngModel.$viewValue);
                            });
                            setEditorValue(ngModel.$viewValue);
                        } catch (e) {
                        }
                    };

                    //百度UEditor数据更新时,更新Model
                    editor.addListener('contentChange', function () {
                        setTimeout(function () {
                            scope.$apply(function () {
                                ngModel.$setViewValue(editor.getContent());
                            })
                        }, 0);
                    })
                }

                function setEditorValue(value){
                    value && editor.setContent(ngModel.$viewValue);
                }
            }
        }
    });
上一篇下一篇

猜你喜欢

热点阅读