问题描述
我正在尝试设置我的 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 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>`
}
}
});