如何在 quilljs 中制作不可选择的嵌入自定义格式 [英] How to make non selectable embed custom format in quilljs

问题描述

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

I would like to create a custom embed format which can be styled but it's text cannot be changed. My use case is pretty similar to the hashtag case. I want to have an external button that will add an hashtag to the current selected range on the editor. But after doing this i want the hashtag to behave as a "block" so that the user cannot go there and change its text.

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

The only way i could accomplish this was by saying that the format's node is contenteditable=false but i'm not sure i'm going the right way as i'm having some issues with this approach, mainly:

如果主题标签是编辑器上的最后一个东西，我不能移过去它(用箭头或光标)双击它选择应该选择整个事物(而不是单个单词)(用于样式)如果光标紧跟在话题标签的后面，按右写会写在话题标签内您可以检查我在试验时制作的代码笔:

If the hashtag is the last thing on the editor i cannot move past it (with arrows or cursor) Double clicking it to select should select the whole thing (and not individual words) (for styling) If the cursor is immediately behind the hashtag, pressing right and writing will write inside the hashtag You can check a codepen i made while experimenting with this:

  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

如果你们能给我任何关于如何实现这一点的提示，我会很高兴.

If you guys can give me any tips on how can i accomplish this i would be glad.

谢谢.

推荐答案

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

All you need to do is to set the contenteditable attribute to false on the main span. Currently, you are doing this on the nested span.

node.setAttribute('contenteditable', false);

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

I modified the hashtag code from your post and applied the change.

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>

这篇关于如何在 quilljs 中制作不可选择的嵌入自定义格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！