LoginSignup
2
5

More than 5 years have passed since last update.

summernoteのimage upload機能を止める

Last updated at Posted at 2015-02-24

summernoteとは、ブラウザから自由度の高い文章の編集が出来る、wisiwygの一種です。

image upload機能の停止方法がよく分からなかったので、ここで共有します。

止め方1: disableDragAndDropをtrueにする

disableDragAndDropという機能があるとコメントで教えていただいたので、この機能を使えば、image uploadを止められます。

$('.summernote').summernote({
  disableDragAndDrop: true
});

止め方2: ボタンや要素を隠して使えなくする

止め方1で済むと思いますが、それでは止められなかった時の事を考慮して、無理矢理使えなくする方法も残しておきます。
* toolbarからimage uploadに関するボタンを外す
* dropzoneを隠す

toolbarからimage uploadに関するボタンを外す

外すボタンを指定できなさそうなので、使うボタンだけを指定します。

$('.summernote').summernote({
  toolbar: [
    ['style', ['style']],
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']],
    ['insert', ['link']],
    //['insert', ['picture', 'link']],
    ['table', ['table']],
  ]
})

dropzoneを隠す

toolbarからimage uploadボタンを外しても、ブラウザに画像をドラッグドロップすると画像が受理されてしまいます。
そのため、cssに下記の記述を追加して、drop機能を隠します。

.note-editor .note-dropzone { opacity: 0 !important; }

以上です。
もっとスマートな方法があれば、教えて頂けると嬉しいです。

参考

「summernote disable image uploading」とかで検索しました。
http://www.usrtriton.nl/assets/bower/summernote/features.html
https://github.com/summernote/summernote/issues/187
https://github.com/summernote/summernote/issues/187

2
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
5