wangeditor上传视频不回显问题
时间: 2025-02-06 20:19:24 浏览: 70
### wangeditor 上传视频后不回显解决方案
对于wangeditor上传视频后无法回显的问题,可以采取以下措施来确保视频能够正确显示在编辑器中。
#### 创建隐藏表单存储HTML数据
为了防止直接将HTML置入JavaScript代码中的复杂性和潜在错误,在页面加载时应创建一个`<textarea>`作为隐藏表单元素,专门用来保存从数据库或其他地方读取到的HTML字符串[^3]。这一步骤有助于分离视图逻辑与业务逻辑,并简化后续操作流程。
```html
<textarea id="hidden-html-content" style="display:none;"></textarea>
```
#### 初始化编辑器并设置初始内容
当初始化wangeditor实例时,通过编程方式获取上述隐藏域内的HTML文本,并将其设定为编辑区的内容。这样做的好处是可以确保即使是在异步请求完成之后再渲染界面的情况下也能正确展示原有内容[^4]。
```javascript
const editor = new wangEditor('#editor-container');
document.getElementById('hidden-html-content').value // 获取隐藏域里的 HTML 字符串
editor.config.html = document.getElementById('hidden-html-content').value;
editor.create();
```
#### 处理上传后的回调函数
针对视频上传成功后的场景,需定义好相应的回调机制以便及时更新编辑区内所见即所得的效果。具体做法是在配置项里指定`customUploadVideo`方法,在其中接收服务端返回的数据(通常包括URL链接),随后利用API接口向编辑器内部插入一段包含该地址在内的媒体标签。
```javascript
editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
const formData = new FormData();
resultFiles.forEach(file => {
formData.append('file', file);
});
fetch('/upload/video', {
method: 'POST',
body: formData,
})
.then(response => response.json())
.then(data => {
data.map(item => insertVideoFn(item.url)); // 插入视频 URL 到编辑器中
});
};
```
以上就是关于如何解决wangeditor上传视频后不回显的一些建议和技术细节说明。希望这些信息能帮助解决问题!
阅读全文
相关推荐


















