javascript - 如何在 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>

Playground 包括按钮。单击编辑器中的一个 block ，然后单击一个按钮以打开和关闭预语言样式。