前端 - wangEditor富文本编辑器为什么使用document.querySelectorAll获取元素后修改内容不生效？

Question

如题，第三方开发的系统，烂尾，然后前端显示富文本内容一直有个bug(不是第三方富文本编辑器的问题，是第三方开发后前台展示问题)

就是，后台显示正常的文章在前台显示不正常(例如，段落有缩进，到前端就不显示缩进，所以只能通过去除缩进，然后段落前手动敲空格进去)。

目前曲折的办法就想着写个扩展，手动去掉缩进，在文字前加空格，但是试了半天发现用document.querySelectorAll()[].innerText、innerHTML 修改内容后保存后都不生效......

Answer 1

我这两天也在写浏览器扩展，不同平台的富文本输入问题也琢磨了一下。

我去看了wangEditor官网实例，最新版是直接用的contenteditable，可以直接innerHTML编辑的。 V3之前可以使用textarea，改了值你要触发对应事件去渲染数据。

如果确认是使用的textarea，可以继续看下面。

输入框赋值的写法，直接dom.value = 'xx' 是没用的。

改为下面这个写法才行，你可以参考一下。重点要去触发事件

// 给输入框赋值
const inputValue = (dom, val) => {
    let evt = new InputEvent('input', {
        inputType: 'insertText',
        data: val,
        dataTransfer: null,
        isComposing: false,
    });
    dom.value = val;
    dom.dispatchEvent(evt);
};

dom就是个输入框对象，可以是文本域，用法一样。

隐藏的文本域，你需要赋值时触发事件，最好再触发一下focus事件。

问题根源就是：类似vue与react响应式，要去触发对应事件来更新数据。

Answer 2

使用 document.querySelectorAll 获取到的是一个 NodeList 对象，它是一个类数组对象，包含了所有匹配指定 CSS 选择器的元素。当你尝试使用类似 document.querySelectorAll()[].innerText 或 innerHTML 来修改内容时，你会遇到几个问题：

1. document.querySelectorAll() 返回的是一个 NodeList，你不能直接在其上调用数组方法（如 [] 索引访问）并链式调用 .innerText 或 .innerHTML。你需要先通过索引访问到具体的元素，然后再修改其内容。
2. 修改 innerText 或 innerHTML 只会影响当前 DOM 中的元素内容，它不会自动保存到服务器或任何数据源中。如果你希望保存这些更改，你需要编写额外的代码来将这些更改发送到服务器。
3. 如果富文本编辑器的内容是动态加载的（例如，通过 AJAX 请求），那么你可能需要在内容加载完成后才能修改它。
4. 另一个可能的问题是，如果富文本编辑器使用了某种形式的内部缓存或状态管理，那么直接修改 DOM 可能不会反映到编辑器的内部状态中。这可能导致在编辑器中看不到你的更改，或者当内容重新加载时，你的更改会丢失。

为了解决这个问题，你可以尝试以下步骤：

1. 确保你在正确的元素上调用 .innerText 或 .innerHTML。你可以通过打印 NodeList 中的元素来检查你是否选择了正确的元素。

const elements = document.querySelectorAll('你的选择器');
console.log(elements); // 查看选中的元素
const firstElement = elements[0]; // 假设你想修改第一个元素
firstElement.innerText = '新的内容'; // 修改元素的内容

2. 如果你希望保存这些更改，你需要编写额外的代码来将这些更改发送到服务器。这通常涉及使用 AJAX、Fetch API 或其他技术来发送 HTTP 请求。
3. 如果富文本编辑器使用了某种形式的内部缓存或状态管理，你可能需要查找编辑器的 API 或文档，以了解如何正确地修改其内容。在某些情况下，你可能需要使用编辑器提供的特定方法来修改内容，而不是直接修改 DOM。
4. 如果内容是动态加载的，请确保你的代码在内容加载完成后才运行。你可以使用事件监听器、Promise、async/await 等技术来确保这一点。

最后，请注意，直接修改 DOM 可能不是解决你问题的最佳方法。如果可能的话，最好查找导致问题的根本原因，并尝试修复它，而不是通过修改 DOM 来绕过问题。