有沒有辦法來重寫Quill的svg圖標？

我使用的是最新版本的quill.js，並想知道如果有一種方法來覆蓋SVG圖標生成編輯工具欄時，奎爾使用（對於泡沫的主題，如果該事項。）有沒有辦法來重寫Quill的svg圖標？

我已經嘗試了一下，看看源代碼中的圖標是在哪裏定義的，但它看起來像是傳遞一組工具欄選項，或者自定義標記並將選擇器傳遞給toolbar，最終都會插入svg圖標。

有沒有一種方法可以自定義這種行爲，而不需要抓住Quill源代碼並進行自定義構建？就像人們可以做的事情一樣Quill.import('formats/link')要自定義sanitize()？

2016-11-02 Kyle

氣泡主題中的圖標內聯here。

您可以在啓動編輯器之前導入圖標模塊，並覆蓋每個圖標的標記。

在這個例子中，我用font-awesome粗體圖標替換了粗體圖標。還記得加載font-awesome的CSS文件。

var icons = Quill.import('ui/icons'); 
icons['bold'] = '<i class="fa fa-bold" aria-hidden="true"></i>'; 
// create the editor: var quill = new Quill('#editor-container', {});

在這個例子中，我更換使用SVG圈大膽的圖標：

var icons = Quill.import('ui/icons'); 
icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>'; 
// create the editor: var quill = new Quill('#editor-container', {});

來源

2016-11-02 17:13:50

複製的問題from github的意大利麪：（未與泡沫試了一下）：

Quill使用.ql- *類爲配置中的每個註冊樣式創建按鈕。您可以通過定位與下面這些CSS類（附件圖標）覆蓋空白按鈕：

.ql-attachment { 
    background: no-repeat scroll 50% 50% transparent !important; 
    background-image: url("attachment.svg") !important; 
    text-align: center; 
} 

.ql-attachment:hover { 
    background-image: url("attachment-hover.svg") !important 
}

來源

2016-11-02 17:21:15 Keno

奎爾JS讓你自定義工具欄。您可以使用字體真棒，您自己的SVG或自定義功能。這裏是樣品guidelines。

創建工具欄按鈕

<div id="tooltip-controls"> 
    <button id="bold-button"><i class="fa fa-bold"></i></button> 
    : 
</div>

用鵝毛筆創建blot

class BoldBlot extends Inline { } 
BoldBlot.blotName = 'bold'; 
BoldBlot.tagName = 'strong';

手柄click事件

$('#bold-button').click(function() { 
    quill.format('bold', true); 
});

註冊

Quill.register(BoldBlot);

檢查codepen

來源

2016-12-18 10:13:55

有沒有辦法來重寫Quill的svg圖標？

回答

相關問題