複雑な部分構造を持つカスタムフォーマット/ブロットを作成することは可能ですか？

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ベータ版で実行可能であるように感じます、私は実際に何を書く必要があるのか​​についての詳細はわかりません。

これは1.0.0でも可能ですか？もしそうなら、それはどうすればできますか？

EDIT：これは私がつもりです：

Answer 1

私は最小限の労力でこれをやり遂げる方法を考え出しました。これは、Quill 1.3以上の新しいブロットタイプを定義することを伴いますが、古いバージョンでは同じコードが動作するはずですが、テストされていません。

実際の例については、コードスニペットを参照してください。要点は、既存の埋め込みブロット「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

ドキュメントとガイドはまだ書かれているが、見るのに適した場所は、既存のカスタム書式が実装されている方法です。数式フォーマットは、特にユースケースによく似ています。