TinyMCE实现输入“- ”自动创建列表项的解决方案咨询

嗨，很高兴看到你已经把TinyMCE配置得这么顺畅了！你想要的输入- （单独一行加空格）自动转为列表项的功能，TinyMCE其实有现成的解决方案，而且非常容易实现，下面给你两种思路：

1. 启用内置的自动列表功能（推荐） #

TinyMCE自带一个autolists配置项，专门用来处理这种“输入标记自动转列表”的场景。默认情况下这个选项可能没有开启，你只需要在初始化配置里加上它就行：

修改后的完整代码如下：

<div class="beschreibung"></div> 
<script> 
  tinymce.init({ 
    selector: '.beschreibung', 
    inline: true, 
    menubar: false, 
    skin: "oxide-dark", 
    toolbar: 'bold italic bullist', 
    plugins: ['lists','autoresize'], 
    toolbar_location: 'bottom', 
    language: 'de',
    autolists: true // 新增这个配置，开启自动列表转换
  }); 
</script>

启用这个配置后，当你在新行输入- 、* （无序列表标记）或者1. 、2. （有序列表标记）时，编辑器会自动把当前行转换成对应的列表项，而且按下回车键后会自动生成下一个列表项，完全符合你的需求。

2. 自定义逻辑（如果需要更精细的控制） #

如果内置的autolists行为不符合你的特殊需求，你还可以通过setup函数监听编辑器的输入/键盘事件，手动实现转换逻辑。比如下面的例子会监听回车键，检查上一行是否是- ，然后触发列表插入命令：

<div class="beschreibung"></div> 
<script> 
  tinymce.init({ 
    selector: '.beschreibung', 
    inline: true, 
    menubar: false, 
    skin: "oxide-dark", 
    toolbar: 'bold italic bullist', 
    plugins: ['lists','autoresize'], 
    toolbar_location: 'bottom', 
    language: 'de',
    setup: function(editor) {
      editor.on('keydown', function(e) {
        // 监听回车键，检查上一行内容
        if (e.key === 'Enter') {
          const currentContent = editor.getContent({ format: 'text' });
          const lines = currentContent.split('\n');
          // 获取回车键按下前的最后一行内容
          const prevLine = lines.length > 1 ? lines[lines.length - 2].trim() : '';
          // 判断是否是单独的"-"（带空格的情况也可以调整判断条件）
          if (prevLine === '-') {
            // 触发插入无序列表的命令
            editor.execCommand('InsertUnorderedList');
            // 阻止默认回车行为，避免多余换行
            e.preventDefault();
          }
        }
      });
    }
  }); 
</script>

这种方式可以让你完全控制触发逻辑，比如只在特定场景下转换，或者自定义触发标记。

建议你先试试第一种内置方案，它已经能覆盖绝大多数常规需求，而且配置简单易维护。

内容的提问来源于stack exchange，提问作者Trombone0904