quilljs: составление вложенных структур DIV - PullRequest
Новая
       5

quilljs: составление вложенных структур DIV

0 голосов
/ 05 октября 2019

Я должен производить ниже HTML. 

<div class='container'>
  <div class='row'>
    <div class='col-sm border border-right-0'>column 1</div>
    <div class='col-sm border'>column 2</div>
    <div class='col-sm border border-left-0'>column 3</div>
  </div>
</div>

То есть Bootstrap Grid.

Когда я пытаюсь расширить BlockEmbed, результат HTML такой же, как и выше.
Новнутри тега DIV форматирование невозможно.
Когда я пытаюсь расширить блок, результат HTML будет
<div class='container dv_container_border'><br></div>
, и на этот раз форматирование возможно.
ниже приведен код и весьНапример: https://codepen.io/youngjin-lee/pen/ExxYRBY?editors=1111

Как создать форматируемую вложенную структуру div? 

let BlockEmbed = Quill.import('blots/block/embed');
class Div1 extends BlockEmbed {
  static create(value) {
    var node = super.create();
    node.classList.add("dv_container");
    var childNode = document.createElement('div');
    childNode.classList.add("row", "hfull");
    node.appendChild(childNode);
    var ctNode1 = document.createElement('div');
    var ctNode2 = document.createElement('div');
    var ctNode3 = document.createElement('div');
    ctNode1.classList.add("col-sm-4", "border", "border-right-0");
    ctNode2.classList.add("col-sm-4", "border");
    ctNode3.classList.add("col-sm-4", "border", "border-left-0");
    childNode.appendChild(ctNode1);
    childNode.appendChild(ctNode2);
    childNode.appendChild(ctNode3);
    return node;
  }
}
Div1.blotName = 'div1';
Div1.className = 'container';
Div1.tagName = 'DIV';
Quill.register(Div1, true);

let Block = Quill.import('blots/block');
class Div2 extends Block {
  static create(value) {
    var node = super.create();
    node.classList.add("dv_container_border");
    var childNode = document.createElement('div');
    childNode.classList.add("row", "hfull");
    node.appendChild(childNode);
    var ctNode1 = document.createElement('div');
    var ctNode2 = document.createElement('div');
    var ctNode3 = document.createElement('div');
    ctNode1.classList.add("col-sm-4", "border", "border-right-0");
    ctNode2.classList.add("col-sm-4", "border");
    ctNode3.classList.add("col-sm-4", "border", "border-left-0");
    childNode.appendChild(ctNode1);
    childNode.appendChild(ctNode2);
    childNode.appendChild(ctNode3);
    return node;
  }
}
Div2.blotName = 'div2';
Div2.className = 'container';
Div2.tagName = 'DIV';
Quill.register(Div2, true);

var div1 = document.querySelector('#div1');
div1.addEventListener('click', function () {
  let range = quill.getSelection(true);
  quill.insertText(range.index, '\n', Quill.sources.USER);
  var dval = quill.insertEmbed(range.index + 1, 'div1', '', Quill.sources.USER);
  quill.setSelection(range.index + 2, Quill.sources.SILENT);
  console.log(quill.root.innerHTML + '\n');
  console.log(JSON.stringify(dval));
});

var div2 = document.querySelector('#div2');
div2.addEventListener('click', function () {
  let range = quill.getSelection(true);
  quill.insertText(range.index, '\n', Quill.sources.USER);
  var dval = quill.insertEmbed(range.index + 1, 'div2', '', Quill.sources.USER);
  quill.setSelection(range.index + 2, Quill.sources.SILENT);
  console.log(quill.root.innerHTML + '\n');
  console.log(JSON.stringify(dval));
});
...