web-dev-qa-db-ja.com

ツールバーなしでクイルエディタを作成するにはどうすればよいですか？

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>

ツールバーモジュールをfalseまたはnullに設定すると、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であるDOMノードにレンダリングする以外に、Quillエディターにツールバーをないする方法はないようです。これは本当ですか、またはツールバーをレンダリングしない別のより優雅な方法はありますか？

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

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

javascriptquill
10
rockerest

ツールバーの偽の値は正しいはずです：

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

これが バグレポート 追跡用です。

26
jhchen

2つの異なるアプローチを取ることができます。 1つ目は、オプションにfalse値を渡すだけです。

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

一方、ツールバーがまったくないプレフィックステーマを使用することもできます。

var config = {
  "theme": "bubble",
};

私が使用したすべてのテキストエディタには、使用可能なツールバーがないプレフィックステーマがあります。

2
Fernando Palma

テーマbubbleを設定して、常に表示されるバージョンではなく、中程度のエディターを表示することができます。

var quill = new Quill('#editor', {
  theme: 'bubble'   // Specify theme in configuration
});

例 （バブルと雪の両方（デフォルト）のテーマ）

2
Rafał Olszewski