tinymce - 如何在用户键入“*”时将文本自动转换为项目符号

如何解决tinymce - 如何在用户键入“*”时将文本自动转换为项目符号

我正在尝试设置我的 tinymce 编辑器以自动将某些字符串转换为格式化文本。对于我的第一次尝试，当我输入“*”时，我会自动创建项目符号（也许有一个插件可以做到这一点？）

这是我开始的代码：

editor.on('KeyUp',function(e){
    var sel = editor.selection.getSel();
    var caretPos = sel.anchorOffset;
    var txtData = sel.anchorNode.textContent;
    
    if(caretPos === 2 && (txtData === "* " || txtData === "- "))
    {
        if(sel.focusNode.parentElement.constructor.name === "HTMLParagraphElement")
        {
            // Todo: Somehow change this line to a <li>
        }
    }   
});

代码可以很好地识别文本，但我不确定用什么来代替 Todo。如何将所选文本更改为

内的

？（也许有更简洁的方法来做我正在尝试的事情？）

解决方法

有一个插件可以实现类似的结果：Autocompleter plugin。它可以加载一个类似于项目符号列表的工具栏项目，用户可以在输入“*”后选择该项目

您可以设置插件以在特定触发字符上激活。如果您想使用“*”和“-”，请先将Bulleted List 项添加到数组中，然后

/* The autocompleter that allows you to use a character */
    editor.ui.registry.addAutocompleter('Menubar-item-variable',{
      ch: '*',minChars: 0,/** Zero value means that the menu appears as soon as you type the "*" */
      columns: 1,fetch: function (pattern) {
            const matchedActions = insertActions.filter(function (action) {
            return action.type === 'separator' ||
            action.text.toLowerCase().indexOf(pattern.toLowerCase()) !== -1;
            });

            return new tinymce.util.Promise(function (resolve) {
                var results = matchedActions.map(function (action) {
                    return {
                        meta: action,text: action.text,icon: action.icon,value: action.text,type: action.type
                    }
                });
                resolve(results);
            });
        },onAction: function (autocompleteApi,rng,action,meta) {
            editor.selection.setRng(rng);
            editor.execCommand('Delete');
            meta.action();
            autocompleteApi.hide(); 
        }
    });
    return {};
});

有一些关于 Autocompleter 的博客内容：https://www.tiny.cloud/blog/slash-commands-rich-text-editor/

这是我最终解决它的方法。在编辑器的 onInit 函数中，我是这样做的：

editor.on('KeyUp',function(e){
    var sel = editor.selection.getSel();
    var caretPos = sel.anchorOffset;
    var txtData = sel.anchorNode.textContent;
    
    // if the user types '* ' or '- ' inside a paragraph then convert to a bullet
    // Note that the character from &nbsp; is different that an ascii space.  That's
    // why the match has two spaces in the 2nd character place.  They are actually 
    // different character codes. 
    if(e.key === ' ' && caretPos === 2 && (txtData.match(/^[*-][  ]/)))
    {
        if(sel.focusNode.parentElement.constructor.name === "HTMLParagraphElement")
        {
            sel.focusNode.parentElement.outerHTML = `<ul><li>${txtData.substr(2)}</li></ul>`
        }
    }                        
});