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

總結

以上是生活随笔為你收集整理的Simditor引入注意事项以及修改接入自己的上传接口的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。