Simditor

首先閱讀官方文件，對simditor的初始化、監聽、設值、取值都有一定了解後，開始著手實際操作。

官方文件連結https://simditor.tower.im/docs/doc-config.html

引入相關JS依賴

<!--最重要的jQuery-->
<script src="/public/js_module/jquery.js"></script>
<!--simditor富文字依賴-->
<script src="/public/js_module/simditor/module.js"></script>
<script src="/public/js_module/simditor/hotkeys.js"></script>
<script src="/public/js_module/simditor/uploader.js"></script>
<script src="/public/js_module/simditor/simditor.js"></script>
 

強調：以上依賴，需要按如此順序引入，順序錯亂，會導致失敗，因為simditor的Js包相互之間有引用，順序錯亂會導致引用不到而報錯。

初始化Simditor

var content = new Simditor({
            textarea: $('#content'),
            placeholder: '請輸入新聞正文', // 編輯器預設值（預設為’’）
            toolbar: [
                'title',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'fontScale',
                'color',
                'ol'   ,         // # ordered list
                'ul'   ,         // # unordered list
                'blockquote',
                'code'     ,      //# code block
                'table',
                'link',
                'image',
                'hr'        ,     //# horizontal ruler
                'indent',
                'outdent',
                'alignment'
            ],
            toolbarFloat: true,
            toolbarFloatOffset: 0,
            tabIndent: true,
            upload: {
                url: '/common/upload/upload',
                // params: null, //引數
                // fileKey: 'upload_file', //
                // connectionCount: 3,//同時上傳數量
                leaveConfirm: 'Uploading is in progress, are you sure to leave this page?' //如果在上傳檔案時離開頁面，將顯示訊息;
            }
            //optional options
        });
 

這裡我直接把常用的引數都戴上了，上傳連結更改為自己專案的上傳介面地址。但是此時我們上傳圖片會發現，圖片的連結地址是base64的，而不是相對於我們伺服器的地址。

更改Simditor.js檔案達到更改圖片連結地址的目的

搜尋uploadsuccess，找到我們要修改的地方

這裡我後臺的返回引數是

res：{

​ code ： 200，

​ url : ‘/public/20190810/233232323.png’

}

所以我只需要把原本的地址改為後臺過來的url即可

this.editor.uploader.on('uploadsuccess', (function(_this) {
      return function(e, file, result) {
        var $img, img_path, msg;
        console.info('111111:',result);
        if (!file.inline) {
          return;
        }
        $img = file.img;
        if (!($img.hasClass('uploading') && $img.parent().length > 0)) {
          return;
        }
        if (typeof result !== 'object') {
          try {
            result = $.parseJSON(result);
          } catch (_error) {
            e = _error;
            result = {
              success: false
            };
          }
        }
        if (result.success === false) {
          msg = result.msg || _this._t('uploadFailed');
          alert(msg);
          img_path = _this.defaultImage;
        } else {
          img_path = result.url;  // 修改這裡，修改這裡，修改這裡
        }
        _this.loadImage($img, img_path, function() {
          var $mask;
          $img.removeData('file');
          $img.removeClass('uploading').removeClass('loading');
          $mask = $img.data('mask');
          if ($mask) {
            $mask.remove();
          }
          $img.removeData('mask');
          _this.editor.trigger('valuechanged');
          if (_this.editor.body.find('img.uploading').length < 1) {
            return _this.editor.uploader.trigger('uploadready', [file, result]);
          }
        });
        if (_this.popover.active) {
          _this.popover.srcEl.prop('disabled', false);
          return _this.popover.srcEl.val(result.file_path);
        }
      };
    })(this));
 

如果修改之後，連結地址還是不對，可以在Simditor.js中列印result檢視此物件資訊，然後相對的去修改