26

Quill を使用したいのですが、エディター ツールバー (または「バブル」代替) を表示しません。基本的には、クイル/羊皮紙で裏打ちされたテキスト領域が必要です。

ただし、新しい Quill 要素を作成するときはいつでも、要求していなくても常にツールバーを取得します。さらに、ツールバーを削除すると JavaScript エラーが発生し、ページで実行されている他のすべての機能が中断されます。

デフォルト:

var config = {
  "theme": "snow"
};

var quill = new Quill( ".editor", config );
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

モジュールを空のオブジェクトに設定するのも同じです (とにかくこれがデフォルトだと思います):

var config = {
  "theme": "snow",
  "modules": {}
};

var quill = new Quill( ".editor", config );
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

ツールバー モジュールを または のいずれかに設定するfalsenull、JavaScript エラーが発生します。

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": false
  }
};

var quill = new Quill( ".editor", config );
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

var config = {
  "theme": "snow",
  "modules": {
      "toolbar": null
  }
};

var quill = new Quill( ".editor", config );
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>

<div class="editor"></div>

これが私が望むものですが、これはハッキーな回避策のようで、好きではありません:

var config = {
  "theme": "snow",
  "modules": {
    "toolbar": ".quill-always-hidden-toolbar"
  }
};

var quill = new Quill( ".editor", config );
.quill-always-hidden-toolbar{
  display: none;
  visibility: hidden;
  width: 0;
  height: 0;
}

.quill-always-hidden-toolbar.ql-toolbar.ql-snow + .ql-container.ql-snow{
  border-top: 1px solid #ccc;
}
<link href="https://cdn.quilljs.com/1.0.3/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.quilljs.com/1.0.3/quill.js"></script>

<div class="quill-always-hidden-toolbar"></div>
<div class="editor"></div>

常に. _ _ display: noneこれは本当ですか、またはツールバーをレンダリングしない別のより適切な方法はありますか?

tl;dr: Quill ツールバーは必要ありません。ツールバーなしで新しい Quill インスタンスを作成するにはどうすればよいですか?

(この JSFiddleで、これらのさまざまな構成オプションを自分で試すことができます)

4

3 に答える 3