如何在TinyMCE中添加自动项目符号

Question

许多应用程序(如Slack(都有一个方便的功能，如果您键入连字符-并在新行上键入空格，该行将自动转换为项目符号(也称为无序列表(。如何在TinyMCE中实现此功能？

Answer 1

作为参考，TinyMCE中的textpattern插件为您提供了一种使用(默认情况下(标记样式文本插入列表的方法：

https://www.tiny.cloud/docs/plugins/opensource/textpattern/

列表特定选项包括：

// The following text patterns require the `lists` plugin
{start: '1. ', cmd: 'InsertOrderedList'},
{start: '* ', cmd: 'InsertUnorderedList'},
{start: '- ', cmd: 'InsertUnorderedList' }

这不需要执行任何编码，并允许您确定可以启动列表的文本。上面的示例允许列表以星号或破折号开头，但您可以根据需要自定义该列表。

Answer 2

很高兴你问我！我对这个解决方案进行了几次迭代，然后找到了一个似乎效果很好的解决方案。

首先，我定义了Autobullets的触发字符(连字符(和我希望在其中触发Autobullet的HTML容器(在本例中，是段落、div、表单元格和跨度(：

const AUTOBULLET_TRIGGER_CHARACTER = "-";
const AUTOBULLET_VALID_CONTAINERS = [
"HTMLTableCellElement",
"HTMLParagraphElement",
"HTMLDivElement",
"HTMLElement",
];

然后，我在编辑器设置中添加了这个事件处理程序，并添加了注释：

editor.on("KeyUp", function (e) {
var sel = editor.selection.getSel();
var caretPos = sel.anchorOffset;
var txtData = sel.anchorNode.textContent;

// Char code 160 is a non breaking space
const lineMatch = `${AUTOBULLET_TRIGGER_CHARACTER}${String.fromCharCode(
160
)}`;
if (e.key === " " && caretPos === 2 && txtData === lineMatch) {
if (
AUTOBULLET_VALID_CONTAINERS.includes(
sel.focusNode.parentElement.constructor.name
)
) {
// Create an unordered list
editor.execCommand("InsertUnorderedList", false);
// Delete the last two characters from the cursor position,
// which we know are "- " since that's what triggered the autobullet
//
// Modified from https://stackoverflow.com/a/43798749
const edRange = editor.selection.getRng();
const edNode = edRange.commonAncestorContainer;
let range = document.createRange(); // create a new range object for the deletion
range.selectNodeContents(edNode);
range.setStart(edNode, edRange.endOffset - 2); // current caret pos - 3
range.setEnd(edNode, edRange.endOffset); // current caret pos
range.deleteContents();
}
}
});

正如您所看到的，处理程序检测用户是否在keyUp上触发了字符和空格。然后，我们插入无序列表(关键的是，我们使用InsertUnorderedList命令，因为插入原始ul和li似乎会破坏列表功能(，并删除连字符/空格触发器。