Question

我有一个特殊的印迹扩展了BlockEmbed。我想在这个块中禁用焦点和退格删除。这可能吗？

import Quill from 'quill';
import { html, render } from 'lit-html'

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

const template = (text) => html`
  <img src="https://prosemirror.net/img/dino/tyrannosaurus.png"/>
  <span>${text}</span>`;

export class BlockActionBlot extends BlockEmbed {
  static blotName = 'action';
  static className = 'block-action';
  static tagName = 'div';

  static create({ id, text }) {

    const node = super.create();
    node.dataset.text = text;
    node.dataset.id = id;

    render(template(text), node)

    return node;
  }

    static value(node) {
    return {
      id: node.dataset.id,
      text: node.dataset.text
    }
  }
}

Answer 1

要禁用删除，您可以覆盖deleteAt()中的BlockActionBlot方法。类似下面的内容。这应该可以防止印迹水平的删除。

export class BlockActionBlot extends BlockEmbed {
   // ...
   deleteAt() { }
}

请参阅blot methods了解deleteAt的签名以及提供的其他方法。

如果禁用对印迹的关注，可以将user-select: none和/或cursor: none应用于印迹。您可能希望在class方法中为上述css属性添加create。您可以使用node.setAttribute('class', 'block-action')执行此操作，然后将css应用于已加载的CSS中的div.block-action。

另一种选择是尝试拦截删除键按下。我认为这种做法虽然可行但会更复杂。

Answer 2

如果您希望印迹是“静态的”，我发现的最简单的方法是在node.contentEditable方法中将false设置为create。

我希望这对您有所帮助，并且答案还为时不晚（我今天遇到了同样的问题）...

如何禁用删除并关注BlockEmbed

2 个答案: