14

我想创建一个可以设置样式但不能更改文本的自定义嵌入格式。我的用例与主题标签案例非常相似。我想要一个外部按钮，可以将标签添加到编辑器上的当前选定范围。但是在这样做之后，我希望主题标签表现为一个“块”，这样用户就不能去那里改变它的文本。

我可以做到这一点的唯一方法是说格式的节点是 contenteditable=false 但我不确定我是否走对了，因为我在使用这种方法时遇到了一些问题，主要是：

如果主题标签是编辑器上的最后一件事，我无法移过它（使用箭头或光标）双击它以选择应该选择整个事物（而不是单个单词）（用于样式）如果光标紧跟在主题标签后面，按右并书写将在主题标签内写入您可以检查我在尝试此操作时制作的代码笔：

  Quill.import('blots/embed');
  class QuillHashtag extends Embed {
    static create(value) {
      let node = super.create(value);
      node.innerHTML = `<span contenteditable=false>#${value}</span>`;
      return node;
    }
  }
  QuillHashtag.blotName = 'hashtag'; 
  QuillHashtag.className = 'quill-hashtag';
  QuillHashtag.tagName = 'span';

这是完整的代码笔：http: //codepen.io/emanuelbsilva/pen/Zpmmzv

如果你们能给我任何关于我如何做到这一点的提示，我会很高兴。

谢谢。

4

1 回答 1

4

您需要做的就是在主跨度上将contenteditable属性设置为false 。目前，您正在嵌套跨度上执行此操作。

node.setAttribute('contenteditable', false);

我修改了您帖子中的主题标签代码并应用了更改。

var Embed = Quill.import('blots/embed');
class QuillHashtag extends Embed {
  static create(value) {
    let node = super.create(value);
    node.setAttribute('contenteditable', false);
    node.innerHTML = value;
    return node;
  }
}
QuillHashtag.blotName = 'hashtag';
QuillHashtag.className = 'quill-hashtag';
QuillHashtag.tagName = 'span';

Quill.register({
  'formats/hashtag': QuillHashtag
});

var quill = new Quill('#editor-container', {
  modules: {
    toolbar: [
      [{
        header: [1, 2, false]
      }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  },
  placeholder: 'Compose an epic...',
  theme: 'snow' // or 'bubble'
});


document.getElementById('b').addEventListener('click', () => {
  var range = quill.getSelection();
  if (range) {
    var hashtag = prompt("Select hashtag", "foobar");
    quill.insertEmbed(range.index, 'hashtag', hashtag);
  }

});
#editor-container {
  height: 375px;
}

.quill-hashtag {
  background-color: lightgray;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.snow.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.1/quill.min.js"></script>
<div id="editor-container"></div>
<button id="b">add hashtag</button>

于 2018-10-18T20:15:51.173 回答