如何将HTML字符串整合到Classic Editor显示格式化内容？Html.Raw()无效

你的问题核心在于两个关键点：

• <textarea>会自动转义HTML内容，即便用Html.Raw()，标签也会被当成纯文本显示，无法被编辑器识别。
• 直接基于<textarea>创建编辑器时，编辑器读取的是转义后的纯文本值，不会解析HTML结构。

修正方案 #

1. 调整HTML结构，安全存储原始HTML

把HTML内容放在隐藏元素中（避免引号转义问题），<textarea>留空即可：

<!-- 隐藏元素存储原始HTML内容 -->
<div id="html-@areaId" style="display: none;">@Html.Raw(item.Description)</div>

<textarea id="@areaId" 
          class="areacls" 
          data-href="@item.Id" 
          onclick="createEditor('@areaId')" 
          name="hoverC" 
          style="background-color: rgb(221, 226, 237); width: 100%; overflow: hidden; border: none; box-shadow: none; text-overflow: ellipsis;" 
          rows="3">
</textarea>

注意：onclick里的@areaId必须加引号，确保传入的是字符串类型的元素ID，避免出现变量未定义的错误。

2. 修改JavaScript逻辑，手动传入HTML内容

创建编辑器实例后，从隐藏元素读取HTML并通过setData()方法传给编辑器，让编辑器解析渲染：

const editors = new Map();

function createEditor(elementId) {
    const element = document.getElementById(elementId);
    // 避免重复创建同一编辑器
    if (!element || editors.has(element)) return;

    return ClassicEditor
        .create(element)
        .then(editor => {
            editors.set(element, editor);
            // 读取隐藏元素中的HTML内容并设置到编辑器
            const htmlContent = document.getElementById(`html-${elementId}`).innerHTML;
            if (htmlContent) {
                editor.setData(htmlContent);
            }
        })
        .catch(err => console.error(err.stack));
}

替代方案（用data属性存储） #

如果不想用隐藏元素，也可以把HTML内容存在data-*属性里（注意用单引号包裹属性值，避免双引号冲突）：

<textarea id="@areaId" 
          class="areacls" 
          data-href="@item.Id" 
          data-html='@Html.Raw(item.Description)'
          onclick="createEditor('@areaId')" 
          name="hoverC" 
          style="background-color: rgb(221, 226, 237); width: 100%; overflow: hidden; border: none; box-shadow: none; text-overflow: ellipsis;" 
          rows="3">
</textarea>

对应JavaScript部分修改为：

const htmlContent = element.dataset.html;
if (htmlContent) {
    editor.setData(htmlContent);
}

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