angularjs利用指令调用ueditor百度编辑器例子

一直以来，angularjs的富文本编辑器都比较难做，主要是第三方的编辑器很难集成进来，今天花时间研究了一下，发现ueditor主要加载两个js文件

ueditor.config.js
ueditor.all.js

能不能把这两个文件异步加载呢？答案是肯定的。我们新建一个服务用来异步加载资源，并设置必要的回调方法。

服务代码：

代码如下

复制代码

services.factory('Common', [
  '$http', '$q', function($http, $q) {
   return {
    loadScript: function(url, callback) {
     var head = document.getElementsByTagName("head")[0];
     var script = document.createElement("script");
     script.setAttribute("type", "text/javascript");
     script.setAttribute("src", url);
     script.setAttribute("async", true);
     script.setAttribute("defer", true);
     head.appendChild(script);
     //fuck ie! duck type
     if (document.all) {
      script.onreadystatechange = function() {
       var state = this.readyState;
       if (state === 'loaded' || state === 'complete') {
        callback && callback();
       }
      }
     }
     else {
      //firefox, chrome
      script.onload = function() {
       callback && callback();
      }
     }
    },
    loadCss: function(url) {
     var ele = document.createElement('link');
     ele.href = url;
     ele.rel = 'stylesheet';
     if (ele.onload == null) {
      ele.onload = function() {
      };
     }
     else {
      ele.onreadystatechange = function() {
      };
     }
     angular.element(document.querySelector('body')).prepend(ele);
    }
   }
  }
]);

通过绑定callback到 onload 事件来实现回调。

接下来是指令部分：

代码如下

复制代码

directives.directive('ueditor', [
  'Common',
  '$rootScope',
  function(Common, $rootScope) {
   return {
    restrict: 'EA',
    require: 'ngModel',
    link: function(scope, ele, attrs, ctrl) {
     $rootScope.$emit('loading', '初始化编辑器...');//广播loading事件，可以删除
     var _self = this,
       _initContent,
       editor,
       editorReady = false,
       base = '/public/vendor/utf8_qiniu_ueditor-master', //ueditor目录
       _id = attrs.ueditor;
     var editorHandler = {
      init: function() {
       window.UEDITOR_HOME_URL = base + '/';
       var _self = this;
       if (typeof UE != 'undefined') {
        editor = UE.getEditor(_id, {
         toolbars: [
          [
           'fontsize', '|',
           'blockquote', 'horizontal', '|',
           'removeformat', '|',
           'insertimage', '|',
           'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|',
           'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify',
           'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
           'insertorderedlist', 'insertunorderedlist', '|',
           'link', 'unlink', '|',
           'emotion'
          ]
         ]
        });
        editor.ready(function() {
         editor.setHeight(500);
         editorReady = true;
                                                                        $rootScope.$emit('loading', '');//编辑器初始化完成
         editor.addListener('contentChange', function() {//双向绑定
          if (!scope.$$phase) {
           scope.$apply(function() {
            ctrl.$setViewValue(editor.getContent());
           });
          }
         });
        });
       }
       else {
        Common.loadScript(base + '/ueditor.config.js', null);
        Common.loadScript(base + '/ueditor.all.min.js', function() {
         _self.init();
        });
       }
      },
      setContent: function(content) {
       if (editor && editorReady) {
        editor.setContent(content);
       }
      }
     };
     ctrl.$render = function() {
      _initContent = ctrl.$isEmpty(ctrl.$viewValue) ? '' : ctrl.$viewValue;
      editorHandler.setContent(_initContent);//双向绑定
     };
     editorHandler.init();
     //事件
     $rootScope.$on('$routeChangeStart', function() {
      editor && editor.destroy();
     });
    }
   }
  }
]);

由于angularjs无法自动获得编辑器内容，只能手动监听 contentChange事件来实现双向绑定。

模板代码：

代码如下	复制代码
<div ueditor="editor" ng-required="true" ng-model="material.content.content" id="editor"></div>

时间： 2024-11-03 00:18:57

angularjs利用指令调用ueditor百度编辑器例子

angularjs利用指令调用ueditor百度编辑器例子的相关文章

thinkphp整合ueditor(百度编辑器)方法详解

ueditor百度编辑器去掉图片的在线管理(1/2)

UEditor百度编辑器源代码状态下无法保存内容解决办法

ueditor百度编辑器配置和事件监听

AngularJS 利用指令集成ZTree

yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法_php实例

百度编辑器ueditor的初始化调用设置

Yii添加百度编辑器 ueditor 扩展例子

ASP.NET中集成百度编辑器UEditor