通常編輯器的使用其實很簡單,官網直接下載引用就好。但是,這一次卻遇到問題了,框架使用的是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的使用也是類似,如下: