ng中的富文本编辑器Summernote

官网：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)