angular-editor

作者: 该昵称注册中 | 来源:发表于2018-03-22 15:16 被阅读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);
                    }
                }
            }
        });
    

    相关文章

      网友评论

        本文标题:angular-editor

        本文链接:https://www.haomeiwen.com/subject/jckpqftx.html