2017-01-12 25 views
1

私はエディタでQuillJSを使用しています。このエディタでカスタムテキストスタイルをいくつか作成したいと思います。既に存在するデフォルト、太字などがありますが、これらを拡張したいと思います。たとえば、ブロッククォートを作成するブロッククォートがありますが、インラインクォートが必要です。このため私は理想的にスパンとクラスを使って希望のスタイルを適用するようにしていますが、Quills APIでこれがどのように達成されるかはわかりません。確かに私はカスタムブロックを作成することができますが、それは選択されたテキストではなく、テキストのセクション全体に適用されます。だから私は私のカスタムブロックで.formatTextを使ってみましたが、私は '引用'を '太字'に変更しても幸運はありませんでした...どんな助け/提案も大歓迎です!Quill JSインラインまたは 'formatBlock'スタイルを追加する

let Block = Quill.import('blots/block'); 

class quote extends Block { } 
quote.blotName = 'quote'; 
quote.className = 'quote'; 
quote.tagName = 'span'; 
Quill.register({ 'formats/quote': quote }); 

//Handler to change inline 
var quoteHandler = function(){ 
    var range = quill.getSelection(); 
    console.log(range); 
    quill.formatText(range.index, range.length, 'quote', true); 
} 



/* Quill */ 
var quill = new Quill('.editor_space', { 
    theme: 'snow', 
    placeholder: 'Compose an epic...', 
    modules: { 
     toolbar:{ 
      container: '.main_toolbar', 
      handlers: { 
       'linebreak': linebreakHandler, 
       'inlineQuote': quoteHandler, 
      } 
     } 
    } 
}); 

答えて

3

私自身の質問に答えるために、インラインを明らかにインラインに拡張する必要がありました。ハンドラ関数は不要です。

let Inline = Quill.import('blots/inline'); 
class quote extends Inline { 
    static create(value) { 
     let node = super.create(value); 
     return node; 
    } 
} 
quote.blotName = 'quote'; 
quote.className = 'quote'; 
quote.tagName = 'div'; 
Quill.register(quote); 
関連する問題