如何实现Summernote编辑器onChange事件将输入转为大写？

嘿，我明白你想让Summernote编辑器里的内容一变化就自动转成大写的需求啦！你的代码没跑起来，大概率是事件绑定或者内容处理的逻辑出了点小问题，我给你调整一下，两种方案任你选：

方案1：保留HTML格式，仅文本转大写 #

这个方案会保留编辑器里的格式（比如加粗、换行这些），只把文字内容转成大写：

<textarea id="summernote"></textarea>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<script>
let isUpdating = false; // 用来防止设置内容时触发无限循环

// 初始化Summernote并绑定change事件
$('#summernote').summernote({
  height: 200,
  onChange: function(contents, $editable) {
    if (!isUpdating) {
      isUpdating = true;
      // 把内容里的小写字母替换成大写，同时保留HTML标签
      const upperContents = contents.replace(/([a-z]+)/g, match => match.toUpperCase());
      // 把转换后的内容放回编辑器
      $(this).summernote('code', upperContents);
      isUpdating = false;
    }
  }
});
</script>

方案2：转成纯大写文本（不保留格式） #

如果你不需要保留任何格式，只想得到纯大写的文本，可以用这个：

<textarea id="summernote"></textarea>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>

<script>
let isUpdating = false;

$('#summernote').summernote({
  height: 200,
  onChange: function(contents, $editable) {
    if (!isUpdating) {
      isUpdating = true;
      // 先去掉所有HTML标签，得到纯文本再转大写
      const plainText = contents.replace(/<[^>]*>/g, '');
      const upperText = plainText.toUpperCase();
      $(this).summernote('code', upperText);
      isUpdating = false;
    }
  }
});
</script>

为啥原来的代码没生效？ #

大概率是你没通过Summernote官方的onChange配置项绑定事件，或者没有处理设置内容会再次触发onChange的问题，导致陷入无限循环或者事件没正确触发。上面的代码用isUpdating标志解决了循环问题，同时用官方推荐的方式绑定事件，就能正常运行啦～

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