通常编辑器的使用其实很简单，官网直接下载引用就好。但是，这一次却遇到问题了，框架使用的是angularJs，不提供jQuery的支持。因为项目要求编辑器是要放在弹窗里面，由于弹窗不是文档一加载就能读取到，因此不能简单的调用就能完事，刚开始放在control始终读不到，直接放页面下面又读取不到<script></script>。
后来想到了用指令directive来解决，于是自己改编了方法封装到指令里面了，如下：
HTML代码如下：
<Meta charset="utf-8"> <md-dialog style="width:950px;"> <md-content> <div class="editCon"> <input type="text" ng-model="contentModel.articleId" class="hideTd"/> <div simditor article-id="articles.id" content="content" editors="editors" ng-transclude></div> </div> </md-content> <div class="md-actions" layout="row"> <md-button ng-click="save()" class="md-raised md-primary">保存</md-button> <md-button ng-click="cancel()" class="md-raised md-primary">取消</md-button> </div> </md-dialog>指令代码如下：
directives.directive("simditorVer",["StatusCode","fileUrl",function (StatusCode,fileUrl) {
return {
restrict: 'AE',transclude: true,// replace: true,template: '<textarea id="editor" autofocus ng-transclude></textarea>',require: '?ngModel',scope: { //这里很重要，与control传值的关键
versionsCon: "=",editors: "="
},link: function (scope,element,attrs,ngModel) {
var toolbar = [ 'title','bold','italic','underline','strikethrough','color','|','ol','ul','blockquote','code','table','link','image','hr','indent','outdent' ];
var editor = new Simditor({
textarea: element,toolbar : toolbar,//编辑器插入图片时使用的默认图片
defaultImage : 'http://7xvm87.com1.z0.glb.clouddn.com/random@55684e0e77e',upload : {
url: fileUrl,//文件上传的接口地址
//键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
params: {'filename':'versions' },fileKey: 'file',//服务器端获取文件数据的参数名
connectionCount: 3,leaveConfirm: '正在上传文件',}
});
//绑定在editArticles控制器里面，用于编写之后获取内容传过去
scope.editors = editor;
editor.setValue(scope.versionsCon);
}
}
}]);在控制器control中post请求时，需要获取编辑器里面的内容进行提交：
/**
* 保存
*/
$scope.save = function () {
$scope.articles.content = $scope.editors.getValue(); //获取编辑器的内容
$scope.contentModel = {articleId: $scope.articles.id,content: $scope.articles.content};
ArticlesContentService.save(angular.toJson($scope.contentModel),function (response) {
if (response.statusCode == StatusCode.success) {
$scope.content = $scope.articles.content;
$mdToast.showSimple("操作成功");
$mdDialog.hide(articles);
} else {
$mdToast.showSimple(response.message);
}
});
}
这里再说明一下，之前引用simditor的js文件是直接require('./libs/simditor/scripts/js/simditor.js');但是报一个错误，document of null，因此引用它的js文件只能放在index.html中。
Ueditor的使用也是类似，如下：
