官网：https://summernote.org/
一般项目参考官网就可以了，以下内容是针对angularJS项目的相关处理
angularJS项目中引用文件
<link rel="stylesheet" href="../bootstrap/bootstrap.min.css" />
<script src="../jquery/jquery.min.js"></script>
<script src="../bootstrap/bootstrap.min.js"></script>
<!-- include summernote css/js-->
<link href="../summernote/summernote.css" rel="stylesheet">
<script src="../summernote/summernote.min.js"></script>
<script src="../summernote/angular-summernote.min.js"></script>
效果如下：
WX20180125-100318.png
也可以简化功能：
WX20180125-101840.png
多组编辑器HTML
<summernote ng-model="content1" config="editorConfig"
id="content3" placeholder="内容1"></summernote>
<summernote ng-model="content2" config="editorConfig"
id="content3" placeholder="内容2"></summernote>
js
// 富文本编辑器
$scope.editorConfig = {
height: 110,
toolbar: [
// [groupName, [list of button]]
['style', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
],
dialogsInBody: true,
dialogsFade: true,
};
启动编辑器
$scope.content1 = $('.summernote').summernote('code');
$scope.content2 = $('.summernote').eq(1).summernote('code');
当焦点在编辑器内时，不管有没有输入文字都会出现<p><br></p>，所有我们有时候需要判断编辑器内是否为空
if ($('#summernote').summernote('isEmpty')) {
alert('editor content is empty');
}
当我们提交保存以后，内容一般需要清空
$scope.content1 = '';
$scope.content2 = '';
更多内容可以参考官网；
生成文本以后，需要做一些相关处理
- html转义
过滤器
//html转义过滤器
app.filter('trust2Html', ['$sce', function ($sce) {
return function (val) {
return $sce.trustAsHtml(val);
};
}]);
使用
<dd class="editor-style"
ng-bind-html="myWRcontent.WR_CONTENT1|trust2Html"></dd>
- 单引变双引过滤器
//单引变双引过滤器
app.filter('quotation', function () {
return function (str) {
str = str.replace(/\"/g, "'");
return str;
}
});
使用
$filter('quotation')($scope.content1)
