Simditor引入注意事项以及修改接入自己的上传接口

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查看此对象信息，然后相对的去修改