效果图
通过nodejs的 npm 的bower安装依赖安装, 命令行下执行 bower install angular-ui-tinymce ; 注意(bower和git要是本地的全局变量)
等待bower自动下载完毕以后,在DEMO的页面引用几个JS文件;
1 2 3 | <script type= "text/javascript" src= "app/bower_components/tinymce/tinymce.js" ></script> <script type= "text/javascript" src= "app/bower_components/angular/angular.js" ></script> <script type= "text/javascript" src= "app/bower_components/angular-ui-tinymce/tinymce.js" ></script> |
不用加载css文件, js已经帮助我们加载了, 所以在本地要开启chrome的允许本地cros;
只要一个控制器, 控制器里面是初始化配置, 不用配置就是默认的配置(没啥子配置要改的);
HTML和JS的代码改都不用改, 直接复制即可;
运行下面代码
<html ng-app="app"><head><meta charset="utf-8" /><script type="text/javascript" src="bower_components/tinymce/tinymce.min.js"></script><script src="bower_components/angular/angular.min.js"></script><script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script></head><body ng-controller="editorController"><form method="post"><textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea></form><script>var app = angular.module('app', ['ui.tinymce']) app.controller("editorController", function( $scope ) { $scope.tinymceOptions = {
//配置回调的事件 handle_event_callback : function(e) { console.log(e); } }; $scope.tinymceModel = "niceMCE"//初始化绑定的值 }); </script></body></html>
总结,很简单的插件啊;
新航道雅思
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。