angular的编辑器tinymce
2024-10-19 12:49:02
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="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>
总结,很简单的插件啊;
最新文章
- 【随笔】Linux服务器备份相关
- linux中添加ftp用户,并设置相应的权限
- 【Java】XML解析之JDOM
- 关于Python的super用法
- 【web】web欢迎页面执行servlet
- C#复习三(Day 22)
- 服务器编程入门(7)I/O复用
- win7 64位iis发生错误w3wp.exe解决方法
- Eclipse报错 due to restriction on required library C:/Java/jdk1.7.51/jre/lib/rt.jar 解决方案
- IOS 微信
- 部署DNS服务
- 企业级监控zabbix基础
- golang string和[]byte的对比
- java通过HttpClient方式和HttpURLConnection方式调用WebService接口
- C++实现对文件中各单词词频的统计及其代码优化
- OpenVDB for Mitsuba
- 043、data-packed volume container (2019-03-06 周三)
- 使用wget命令下载JDK失败(文件特别小)
- Python崛起:“人生苦短,我用Python”并非一句戏言
- c#代码混淆