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

操场上有按钮。在编辑器中单击一个块，然后单击一个按钮以打开和关闭前置语言样式。