nagular1的summernote的使用總結

1.模型引入

<div class="form-group">
   <label class="col-sm-2 control-label">文章內容：</label>
   <div class="col-sm-8">
      <div summernote  ng-model="editItem.content" config="editorConfig" on-image-upload="uploadEditorImg(files)" editable="editable" editor="editor" on-media-delete="mediaDelete(target)">
      </div>
    </div>
</div>

angular1內置的summernote指令，只需要在標籤上加summernote即可顯示編輯頁面

2.初始化富文本編輯器

$scope.editorConfig = {
                    height: 500,
                    dialogsInBody: true,
                    lang: lans.length == 2 ? lans[0] + '-' + lans[1] : lans[0],
                    toolbar:[
                        ['style',['bold','italic','underline','clear' ]],
                        ['fontsize',['fontsize']],
                        ['para',['ul','ol','paragraph']],
                        ['color',['color']],
                        ['remove', ['removeMedia']],
                        ['insert', ['link', 'picture']],
                    ],
                };

編輯器內容以標籤的字符串形式放在 ng-model=”editItem.content” 中，那麼文章詳情是如何展示的呢？

3.內容展示

編輯內容：

效果

預覽步驟

• 模板html佔位

 <script type="text/ng-template" id="articleDetail">
    <div style="margin: 15px 20px 30px 20px;text-indent: 2em;min-height: 300px;" ng-bind-html="trustArticleContent" class="clearfix"></div>
</script>

• js進行內容渲染
  1.引入$sce服務
  
  2.使用 $sce.trustAsHtml（）進行內容授信

    //預覽功能
   $scope.preview = function (editItem) {
       ngDialog.open({
           width: 1000,
           template: 'articleDetail',
           className: 'ngdialog-theme-default',
           scope: $scope,
           controller:['$scope','$sce', function ($dlgScope,$sce) {
               $dlgScope.previewItem = editItem;
               $scope.trustArticleContent = $sce.trustAsHtml(editItem.content);
                 }]
             });
         }

4.圖片上傳

1. 觸發函數 on-image-upload=”uploadEditorImg(files)”，選中文件後這個文件對象會進入參數中。
2. 直接拿到改文件進行上傳任務

 //圖片上傳js
     $scope.uploadEditorImg = function (files) {
          var postData = {files:files};
          httpService.formDataPost('file/uploadEditorFile', postData).success(function(data) {
                for (var i = 0; i < data.datas.length; i++){
                    console.log(data.datas[i]);
                    $scope.editor.summernote('insertImage',data.datas[i]);
                }
            }).error(function() {
                messageAlert.info("上傳錯誤");
            })
     };

這裏使用springmvc的web層進行文件上傳，相關java代碼如下：

/**
     * 編輯器批量上傳圖片文件
     * @param files
     * @return List<String> urls
     * @throws IOException
     */
    @PostMapping(value="/uploadEditorFile")
    @ResponseBody
    public List<String> uploadEditorFile(MultipartFile[] files) throws IOException {
        List<MultipartFile> multipartFiles = Arrays.asList(files);
        List<PhysicalFile> userFiles = PhysicalFiles.fromMultipartFiles(multipartFiles, ParentFolder.EDITOR_IMAGE);
        List<PhysicalFile> physicalFiles = physicalFileService.addFileBatch(userFiles);
        //根據圖片的存儲路徑做拼接
        StringBuilder sb = new StringBuilder();
        List<String> urls = new ArrayList<>();
        physicalFiles.forEach(userFile -> {
            sb.append("/editor_image/")
                    .append(userFile.getYearFolder())
                    .append("/")
                    .append(userFile.getMonthFolder())
                    .append("/")
                    .append(userFile.getId()).append(".")
                    .append(userFile.getExtension());
            //存儲圖片的全路徑設置成fileName,返回到前臺
            urls.add(sb.toString());
            sb.setLength(0);
        });
        return urls;
    }

如上可見，返回一個圖片地址的集合

1. 將圖片帶有圖片地址的圖片標籤插入編輯器中，使用 $scope.editor.summernote('insertImage',data.datas[i]);
   insertImage 是 summernote 的插入指令，此處的 data.datas[i] 是後臺傳來的url，這句代碼執行後直接生成一個 <img src='url'></img> 標籤插入到編輯器中。

5.圖片刪除

圖片只要回顯，那麼說明它已經存在數據庫中， 我們在圖片上傳之後將圖片刪除，那麼一般情況下要同時將數據庫中的數據也刪除掉。則它的觸發函數是 on-media-delete="mediaDelete(target)"

js代碼

     //圖片刪除
     $scope.mediaDelete = function (target){
          var src = target.attrs.src;
          httpService.formPost("file/deleteEditorImageBySRC",{src:src})
              .success(function(data){
          });
      };

此處的target就是選中的圖片，summernote會自動將該對象添加到參數中。