富文本编辑器中如何实现上传图片

1，html结构。使用‘contenteditable’创建可编辑区域，并设置一个按钮

<div id="editor" contenteditable="true"></div>
<input type="file" id="imageInput" accept="image/*">

2，上传图片。使用js监听文件输入框变化，获取用户选择的图片文件，并上传到服务器。

const imageInput = document.getElementById('imageInput');
imageInput.addEventListener('change', handleImageUpload);

function handleImageUpload() {
    const file = imageInput.files[0];
    if (file) {
        // 实现图片上传逻辑，可以使用XMLHttpRequest、Fetch API或其他上传方式
        // 将上传成功后的图片URL或其他信息插入到富文本编辑器中
    }
}

3，插入图片，上传成功后，插入到富文本

function insertImage(url) {
    const editor = document.getElementById('editor');
    const img = document.createElement('img');
    img.src = url;
    img.alt = 'Uploaded Image';
    editor.focus();

    if (document.execCommand) {
        document.execCommand('insertImage', false, url);
    } else {
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        range.deleteContents();
        range.insertNode(img);
    }
}

4，服务器处理。将图片保存到服务器合适位置。 5，安全行考虑。确保上传到图片经过合适的验证和处理。验证上传文件类型，大小，并对文件名进行处理。

富文本编辑库（quill，tinymce）。图片上传库（filepond, uppy）