web-dev-qa-db-ja.com

クイルの選択にcssクラスを追加する方法は？

Quilljsのクラスcssで独自のスタイルを追加するにはどうすればよいですか？

私はこれを次のcssクラスに持っています

.ql-editor spanblock {
  background-color: #F8F8F8;
    border: 1px solid #CCC;
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 3px;
    margin: 15px 0;
}

そしてこのCSS変換を対象としたイベント

var toolbarOptions = [
    [{ "header": [false, 1, 2, 3, 4, 5, 6] }, "bold", "italic"],
    [{ "list": "ordered"}, { "list": "bullet" }, { "indent": "-1"}, { "indent": "+1" }],
    ["blockquote","code-block", "span-block","link", "hr"]
];
var quill = new Quill("#form_field_" + options.id + " .editor-container > .editor", {
    modules: {
        toolbar:  toolbarOptions
    },
    theme: "snow"
});

var toolbar = quill.getModule("toolbar");
toolbar.addHandler("span-block", function(){});
var spanBlockButton = document.querySelector(".ql-span-block");

spanBlockButton.addEventListener("click", () => {
    let range = quill.getSelection(true);
    // what should I add here
}

Quilljsのドキュメントに何も見つかりません https://quilljs.com

ありがとうございました

javascriptcssquill
4
radjiv

基本的に、クイルにカスタムスタイルの要素を含めるには、 羊皮紙 ブロットを拡張する必要があります。私はこのチュートリアルを通過しました ここ と ここ 。

以下は簡単なhtmlです

<link href="http://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet">
<link href="http://cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<style>
.ql-spanblock:after {
  content: "<spanblock/>";
}

.spanblock {
    background-color: #F8F8F8;
    border: 1px solid #CCC;
    line-height: 19px;
    padding: 6px 10px;
    border-radius: 3px;
    margin: 15px 0;
}
</style>


<div id="editor">
</div>

これが実際の答えです。選択したテキストを目的のクラスのdivにラップするために、次の方法でblots/inlineを拡張しました。

<script src="http://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script type="text/javascript">

let Inline = Quill.import('blots/inline');

class SpanBlock extends Inline{    

    static create(value){
        let node = super.create();
        node.setAttribute('class','spanblock');
        return node;    
    } 
}

SpanBlock.blotName = 'spanblock';
SpanBlock.tagName = 'div';
Quill.register(SpanBlock);


var toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
    ['blockquote', 'code-block'],

    [{ 'header': 1 }, { 'header': 2 }],               // custom button values
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script':'sub'}, { 'script': 'super' }],      // superscript/subscript
    [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
    [{ 'direction': 'rtl' }],                         // text direction

    [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

    [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'],                                         // remove formatting button
    ['link', 'image', 'video'],
    ['spanblock']
];


var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

var spanBlockButton = document.querySelector('.ql-spanblock');

//event listener to spanblock button on toolbar
spanBlockButton.addEventListener('click', function() {

        var range = quill.getSelection();
        if(range){

            quill.formatText(range,'spanblock',true);
        }else{

        }

    }
);

</script>

Codepen-デモ 。

12
moghya

@moghyaの答えには問題があります。生成されたhtmlからコンテンツを再描画できません。要素によって、追加されたクラス名が失われます。

Format（）メソッドを追加し、classNameを設定することで修正しました。以下の私のデモを参照してください。

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

   // Lottery tooltip
  class LotteryTitle extends Block {
    static create() {
      let node = super.create();
      node.setAttribute('class', this.className);
      return node;
    }

    static formats(domNode) {
      return true;
    }
  }
  LotteryTitle.blotName = 'lottery-title';
  LotteryTitle.className = "sc-lottery-title"
  Quill.register(LotteryTitle);
  icons['lottery-title'] = icons.header["2"];
4
lingceng

シーンにはかなり遅れていますが、パーチメントのアトリビュータークラスを介して（以前の回答よりも）これを行うためのより良い方法があるようです。したがって、この投稿です。

Parchment Class Attributors および Quillツールバーハンドラー は、それを正確に実行できるようにするための組み込みの方法です 新しいブロットを作成する必要はありません 。

span-blockの新しいクラスアトリビューターを登録するだけです。

Parchment = Quill.import('parchment');

let config = { scope: Parchment.Scope.BLOCK };
let SpanBlockClass = new Parchment.Attributor.Class('span-block', 'span', config);
Quill.register(SpanBlockClass, true);

handler to format （または、既にフォーマットされている場合は removeFormat ）をツールバーボタンにアタッチします（むしろ別のイベントリスナーよりも）：

// ...
  toolbar: {
    container: toolbarOptions,
    handlers: {
      'span-block': function() {
        var range = quill.getSelection();
        var format = quill.getFormat(range);

        if (!format['span-block']) {
          quill.format('span-block', 'block');
        } else {
          quill.removeFormat(range.index, range.index + range.length);
        }
      }
    }
  }
// ...

ここにデモがあります（または、必要に応じて、 Codepen で参照してください）

Parchment = Quill.import('parchment');

let config = { scope: Parchment.Scope.BLOCK };
let SpanBlockClass = new Parchment.Attributor.Class('span-block', 'span', config);
Quill.register(SpanBlockClass, true)

var toolbarOptions = [
  [{ "header": [false, 1, 2, 3, 4, 5, 6]}, "bold", "italic"],
  [{"list": "ordered"}, {"list": "bullet"}, {"indent": "-1"}, {"indent": "+1"}],
  ["blockquote", "code-block", "span-block", "link"]
];

var icons = Quill.import('ui/icons');
icons['span-block'] = 'sb';

var quill = new Quill("#editor-container", {
  modules: {
    toolbar: {
      container: toolbarOptions,
      handlers: {
        'span-block': function() {
          var range = quill.getSelection();
          var format = quill.getFormat(range);

          if (!format['span-block']) {
            quill.format('span-block', 'block');
          } else {
            quill.removeFormat(range.index, range.index + range.length);
          }
        }
      }
    }
  },
  theme: "snow"
});
#editor-container {
  height: 375px;
}

.ql-editor .span-block {
  background-color: #F8F8F8;
  border: 1px solid #CCC;
  line-height: 19px;
  padding: 6px 10px;
  border-radius: 3px;
  margin: 15px 0;
}
<link href="//cdn.quilljs.com/1.2.4/quill.snow.css" rel="stylesheet" />
<script src="//cdn.quilljs.com/1.2.4/quill.js"></script>
<div id="editor-container"></div>
2
pratu16x7