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

页面导航:首页 > 网络编程 > JavaScript > angularjs利用指令调用ueditor百度编辑器

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

来源: 作者: 时间:2016-01-19 18:32 【

ueditor中文是百度编辑器,而angularjs是一款优秀的前端JS框架了,下面我们来介绍在angularjs调用ueditor百度编辑器例子,有兴趣的可一起来看看。一直以来,angularjs的富文本编辑器都比较难做

ueditor中文是百度编辑器,而angularjs是一款优秀的前端JS框架了,下面我们来介绍在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事件来实现双向绑定。
模板代码:


 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<