首页 > 代码库 > angular的编辑器tinymce
angular的编辑器tinymce
angular的插件的确挺少的, 编辑器更是少, ui-tinymce是angular-ui推荐的一款编辑器(GIT: https://github.com/angular-ui/ui-tinymce );
效果图
通过nodejs的 npm 的bower安装依赖安装, 命令行下执行 bower install angular-ui-tinymce ; 注意(bower和git要是本地的全局变量)
等待bower自动下载完毕以后，在DEMO的页面引用几个JS文件;
<script type="text/javascript" src="http://www.mamicode.com/app/bower_components/tinymce/tinymce.js"></script><script type="text/javascript" src="http://www.mamicode.com/app/bower_components/angular/angular.js"></script><script type="text/javascript" src="http://www.mamicode.com/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>
总结，很简单的插件啊；
angular的编辑器tinymce
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。