如何在quilljs

Question

在quilljs编辑器中插入代码块时，在渲染时代码块包含<pre class="ql-syntax"></pre>

有没有办法添加其他类，以便我可以在渲染时自定义格式化代码块？例如，我想以某种方式指定一个类说lang-javascript，所以渲染它看起来像这样：<pre class="ql-syntax lang-javascript"></pre>

Answer 1

这是a Quill Playground example类似于你所要求的东西。

HTML

<div id="editor">
  <pre class="js">var hi = function() { return 'fun'; };</pre>
  <pre class="clj">let[hi #('fun')]</pre>
</div>

CSS

.lang-javascript {
  background-color:#ccf;
}
.lang-clojure {
  background-color: #fcc;
}

的Javascript

// Import Block (I think it's from parchment)
let Block = Quill.import('blots/block');

// Create a custom blot for Javascript
class JsBlot extends Block { 
  static create(url) {
    let node = super.create();
    // Attribute for output HTML
    node.setAttribute('class', 'ql-syntax lang-javascript');
    return node;
  }
}

JsBlot.blotName = 'js';
// Class to look for when parsing your input HTML
JsBlot.className = 'js';
// Tag to look for when parsing your input HTML
JsBlot.tagName = 'pre';
// Register your custom blot with quill.
Quill.register(JsBlot);

// Create another custom blot for Clojure
class CljBlot extends Block { 
  static create(url) {
    let node = super.create();
    node.setAttribute('class', 'ql-syntax lang-clojure');
    return node;
  }
}
CljBlot.blotName = 'clj';
CljBlot.className = 'clj';
CljBlot.tagName = 'pre';
Quill.register(CljBlot);

// Start Quill
var quill = new Quill('#editor');

结果

<div class="ql-editor" contenteditable="true">
  <pre class="ql-syntax lang-javascript">var hi = function() { return 'fun'; };</pre>
  <pre class="ql-syntax lang-clojure">let[hi #('fun')]</pre>
</div>

游乐场包括按钮。单击编辑器中的块，然后单击按钮以打开和关闭预语言样式。