JavaScript 富文本编辑器 插入图片 指南

本文将介绍如何使用 JavaScript 富文本编辑器插入图片，并提供相关代码示例和技巧。

1. 获取图片路径

首先，你需要获取想要插入的图片路径。这可以通过以下方式完成：

• 用户上传：使用 input 元素的 type 属性设置为 'file'，允许用户选择图片文件，并获取选择的图片路径。
• 服务器地址：如果图片存储在服务器上，则获取图片的服务器地址。
• 本地文件：使用 file:///协议访问本地图片文件，例如 'file:///C:/Users/Administrator/AppData/Local/Temp/ksohtml2052/wps809.jpg'。

2. 创建图片标签

获取到图片路径后，可以使用 JavaScript 创建一个 <img> 标签，并设置 src 属性为图片路径。

3. 插入图片标签

最后，将创建的图片标签插入到富文本编辑器中。具体方法取决于你所使用的富文本编辑器。例如，使用 contenteditable 属性实现的富文本编辑器，可以使用 insertAdjacentHTML 方法插入标签。

代码示例：

// 获取图片路径
const imageFilePath = 'file:///C:/Users/Administrator/AppData/Local/Temp/ksohtml2052/wps809.jpg';

// 创建图片标签
const imgElement = document.createElement('img');
imgElement.src = imageFilePath;

// 插入图片标签
const editorElement = document.getElementById('editor'); // 富文本编辑器元素
editorElement.insertAdjacentHTML('beforeend', imgElement.outerHTML);

注意事项：

• 确保图片路径正确，否则图片将无法显示。
• 不同的富文本编辑器可能会有不同的 API 用于插入图片。请查阅你使用的富文本编辑器的文档。
• 为了安全起见，建议对用户上传的图片进行验证和处理，以防止恶意代码注入。