为每个Kendo Editor文本框独立设置字符限制（解决多编辑器共用IFrame导致计数联动问题）

我明白你遇到的问题了——多个Kendo Editor共用了全局的iframe选择器，导致所有编辑器的按键事件都触发同一个处理逻辑，字符计数提示也串在一起了。这是因为Kendo Editor每个实例都会生成自己的iframe，但你之前的代码直接选中了所有iframe，没有区分归属。

下面是针对这个问题的修复方案，核心思路是让每个编辑器实例绑定自己专属的事件处理和计数元素，确保它们的字符限制逻辑完全独立：

首先，先把通用的工具函数抽出来（比如HTML解码、移除标签），避免重复代码：

// 通用HTML解码函数
function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

// 移除HTML标签，只保留纯文本
function removeTags(str) {
  return str.replace(/<[^>]*>/g, '');
}

然后，为每个编辑器单独编写初始化和事件绑定逻辑，关键是找到当前编辑器对应的iframe，而不是选中所有iframe：

完整的JavaScript代码 #

$(document).ready(function() {
  // 处理HeadingMessage1编辑器
  initKendoEditorCharLimit({
    editorId: "HeadingMessage1",
    countElementId: "Head1textCount",
    minChar: 1,
    maxChar: 100
  });

  // 处理HeadingMessage2编辑器
  initKendoEditorCharLimit({
    editorId: "HeadingMessage2",
    countElementId: "Head2textCount",
    minChar: 1,
    maxChar: 100
  });

  // 通用的Kendo Editor字符限制初始化函数
  function initKendoEditorCharLimit(options) {
    var editor = $("#" + options.editorId).data("kendoEditor");
    if (!editor) return; // 确保编辑器已初始化

    var iframe = editor.iframe; // 获取当前编辑器专属的iframe
    var countElement = $("#" + options.countElementId);

    // 初始化时计算初始字符数
    var initialValue = $("#" + options.editorId).val();
    var decodedText = htmlDecode(initialValue);
    var pureText = removeTags(decodedText);
    updateCountDisplay(pureText.length, options, countElement);

    // 绑定当前编辑器iframe的内容变更事件（覆盖按键、粘贴等所有场景）
    $(iframe).contents().find("body").on('keydown keyup input paste', function(e) {
      var $body = $(this);
      var pureText = $body.text(); // 直接获取纯文本，自动剥离HTML标签
      var currentLength = pureText.length;

      // 忽略控制按键（除了退格、删除）
      var isEditKey = (e.keyCode === 8 || e.keyCode === 46);
      if (e.which < 32 && !isEditKey) {
        return;
      }

      // 字符限制逻辑
      if (currentLength === options.maxChar && !isEditKey) {
        updateCountDisplay(currentLength, options, countElement, true);
        e.preventDefault(); // 阻止输入超过上限
      } else if (currentLength > options.maxChar) {
        // 截断超出的内容
        $body.text(pureText.substring(0, options.maxChar));
        updateCountDisplay(options.maxChar, options, countElement, true);
      } else {
        // 正常更新计数
        updateCountDisplay(pureText.length, options, countElement);
      }
    });
  }

  // 通用的计数显示更新函数
  function updateCountDisplay(length, options, countElement, isMaxReached) {
    var baseText = `${length} of Maximum Limit (${options.maxChar} Character)`;
    if (isMaxReached) {
      countElement.text(`${baseText} Warning : Maximum Limit Reached`);
    } else {
      countElement.text(baseText);
    }
  }
});

对应的HTML代码（确保计数元素存在） #

<form class="LandindPage">
  <div class="form-group">
    <label> Heading 1 (0-100 character) <span class="mandatory">*</span> </label>
    <textarea class="kendo-input-editor" id="HeadingMessage1" aria-label="editor">
      @Html.Raw(Model.HeadingMessage1)
    </textarea>
    <p class="text-warning">
      Heading 1 Character Count: <span class="text-warning" id="Head1textCount"></span>
    </p>
  </div>
  <div class="form-group">
    <label> Heading 2 (0-100 character) <span class="mandatory">*</span> </label>
    <textarea class="kendo-input-editor" id="HeadingMessage2" aria-label="editor">
      @Html.Raw(Model.HeadingMessage2)
    </textarea>
    <p class="text-warning">
      Heading 2 Character Count: <span class="text-warning" id="Head2textCount"></span>
    </p>
  </div>
</form>

关键修复点说明： #

• 避免全局选择器：通过editor.iframe获取当前编辑器专属的iframe，彻底解决了多个编辑器共用事件逻辑的问题
• 通用函数封装：把重复逻辑抽成初始化函数，新增编辑器时只需要调用一次即可，后续维护更方便
• 事件覆盖全面：同时监听keydown、keyup、input、paste事件，确保所有内容变更场景都能触发计数更新
• 独立状态管理：每个编辑器的字符限制参数、计数元素都是独立传入的，完全不会互相影响

这样修改后，每个Kendo Editor的字符限制逻辑就完全独立了，按键操作和计数提示都只会影响对应的编辑器，不会再出现联动的问题。

内容来源于stack exchange