现在的位置: 主页 > 公司荣誉 > 文章列表

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

作者:北京夜明珠节能科技有限公司 来源:www.ymzjn.com 发布时间:2017-09-06 13:11:32
angularjs利用指令调用ueditor百度编辑器 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' } 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, ', 'insertimage', '); 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事件来实现双向绑定。
模板代码:

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站建设公司 https://www.jingchucn.com/zt/wuhan_wangzhanjianshe/

上一篇:.NET通过PowerShell操作ExChange为用户开通邮箱账号 下一篇:最后一页