最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
angularjs利用指令调用ueditor百度编辑器例子
时间:2015-03-19 编辑:简简单单 来源:一聚教程网
一直以来,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', [ |
由于angularjs无法自动获得编辑器内容,只能手动监听 contentChange事件来实现双向绑定。
模板代码:
代码如下 | 复制代码 |
|
相关文章
- AngularJs整合百度ueditor编辑器教程 03-20
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31