ng中的富文本编辑器Summernote

官网：https://summernote.org/
一般项目参考官网就可以了，以下内容是针对angularJS项目的相关处理
angularJS项目中引用文件

效果如下：

WX20180125-100318.png

也可以简化功能：

WX20180125-101840.png

多组编辑器HTML

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');

当焦点在编辑器内时，不管有没有输入文字都会出现




，所有我们有时候需要判断编辑器内是否为空

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);
  };
}]);

使用

• 单引变双引过滤器

//单引变双引过滤器
app.filter('quotation', function () {
  return function (str) {
    str = str.replace(/\"/g, "'");
    return str;
  }
});

使用

 $filter('quotation')($scope.content1)