效果图
通过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>
|
不用加载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>
总结，很简单的插件啊；
时间： 2024-12-13 15:54:09