是否可以創建具有複雜子結構的自定義格式/印跡？

Question

我正在研究使用Quill進行項目，並且我需要知道是否可以創建比單個元素和單個參數更復雜的自定義格式/印跡。

我想要的佈局之一的一個例子是：

<span class="format-container"> 
    <span class="format-info" data-attr="param 1 (non-displayed)"> 
     param 2 (displayed to user -- click to invoke application UI to edit) 
    </span> 
    <span class="format-content"> 
     User's text/child elements go here 
    </span> 
</span> 

在我尋找到所有的情況下，自定義格式是內嵌範圍，仍然有一個父容器和一個地方爲孩子的內容去。

Quill中的自定義格式目前似乎沒有很好的記錄。我在消息來源中發現，並能夠發現在0.20.1中這很可能是不可能的。但是，我覺得在1.0.0 beta w/Parchment中可以做到這一點，我只是不確定我實際需要寫什麼。

那麼這是可能的在1.0.0？如果是這樣，那該怎麼辦？

編輯：這就是我要爲：

Answer 1

所以，我想通過最小的努力最終做到這一點。它涉及到爲Quill 1.3或更高版本定義新的印跡類型，相同的代碼應該在舊版本上工作，但是未經測試。

查看工作示例的代碼片段。關鍵是要擴展現有的Embed blot'blots/embed'，並定義自己的工具欄處理程序以注入任意DOM節點實例。

// utility function used to inherit non prototypical methods/properties 
 
function extend(target, base) { 
 
    for (var prop in base) { 
 
    target[prop] = base[prop]; 
 
    } 
 
} 
 

 
// definition of a custom Blot. 
 
(function(Embed) { 
 
    'use strict'; 
 

 
    function Span() { 
 
    Object.getPrototypeOf(Embed).apply(this, arguments); 
 
    } 
 

 
    Span.prototype = Object.create(Embed && Embed.prototype); 
 
    Span.prototype.constructor = Span; 
 
    extend(Span, Embed); 
 

 
    Span.create = function create(value) { 
 
    return value; // expects a domNode as value 
 
    }; 
 

 
    Span.value = function value(domNode) { 
 
    return domNode; 
 
    }; 
 

 
    Span.blotName = 'span'; 
 
    Span.tagName = 'SPAN'; 
 
    Span.className = 'complex'; 
 

 
    Quill.register(Span, true); 
 
})(Quill.import('blots/embed')); // import the embed blot. This is important as this is being extended 
 

 
// custom handler for the toolbar button 
 
var handler = function() { 
 
    var complexSpan = document.getElementById('complextype').firstElementChild.cloneNode(true); 
 
    var selection = quill.getSelection(); 
 

 
    quill.insertEmbed(selection.index, 'span', complexSpan); 
 
} 
 

 
// instantiate quill. Note that modules.toolbar.handlers has a 'span' handler. Quill parses this from // the class on the button in the toolbar markup: 'ql-span' this is 'ql-' + blotName 
 
var quill = new Quill('#editor', { 
 
    modules: { 
 
    toolbar: { 
 
     container: '.toolbar', 
 
     handlers: { 
 
     'span': handler 
 
     } 
 
    } 
 
    }, 
 
    theme: 'snow' 
 
});

button.ql-span { 
 
    width: 150px !important; 
 
} 
 

 
.complex { 
 
    border-radius: 10px; 
 
    border: 2px solid black; 
 
    margin: 3px; 
 
} 
 

 
.inner { 
 
    border-radius: 10px; 
 
    background: #767676; 
 
    color: #FFFFFF; 
 
    padding-left: 6px; 
 
    padding-right: 6px; 
 
} 
 

 
.formatting { 
 
    font-weight: bold; 
 
    font-style: italic; 
 
    text-decoration: underline; 
 
} 
 

 
.nested { 
 
    margin-left: 3px; 
 
    margin-right: 3px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" /> 
 
<div id="wrapper"> 
 
    <div id="toolbar" class="toolbar"> 
 
    <span class="ql-formats"> 
 
     <button class="ql-bold"></button> 
 
     <button class="ql-italic"></button> 
 
     <button class="ql-underline"></button> 
 
    </span> 
 
    <span class="ql-formats"> 
 
     <button class="ql-span">Complex Span Type</button> 
 
    </span> 
 
    </div> 
 

 
    <div id="editor">Lorem Ipsum 
 
    <span contenteditable="false"> 
 
     <span class="complex" spellcheck="false"> 
 
     <span class="inner">Format applied</span> 
 
     <span class="nested">More text</span> 
 
     <span class="formatting">with formatting</span> 
 
     <span class="nested">dolor</span> 
 
     </span> 
 
    </span> sit amet 
 
    </div> 
 
</div> 
 

 
<div id="complextype" style="display:none;"> 
 
<span contenteditable="false"><span class="complex" spellcheck="false"><span class="inner">Format applied</span><span class="nested">More text</span><span class="formatting">with formatting</span><span class="nested">dolor</span></span></span> 
 
</div>

Answer 2

文檔和指南仍然被寫入，但一個好地方，看是現有的自定義格式是如何實現的。公式格式尤其與您的用例非常相似。