wangEditor添加视频后无法

部署运行你感兴趣的模型镜像

欢迎关注我的公众号:零零糖,让一个贫穷的程序员不靠打代码也能吃饭~

零零糖公众号

 

之前开发后台使用的是layui,所以使用了layui的编辑器,layui编辑器简洁好用。

但简洁意味着功能少,无法满足个别用户五彩斑斓内容的要求。

于是在众多的编辑器家族中,选中了wangEditor加入系统,给用户多一个选择。

调试过程中发现,wangEditor添加视频,保存后重新加载编辑器回显报错了,打开控制台发现是默认值内容有换行,导致js报错。

在thinkphp5.1中,我是这么处理的:

const editor = createEditor({
		    selector: '#editor-container',
		    html: '{:str_replace("\\n", "",$info['content'])}',
		    config: editorConfig,
		    mode: 'default', // or 'simple'
		})

就是把换行符去掉,保证js语法正确。

重新刷新,编辑器能正确回显内容。

完美~

您可能感兴趣的与本文相关的镜像

GPT-SoVITS

GPT-SoVITS

AI应用

GPT-SoVITS 是一个开源的文本到语音(TTS)和语音转换模型,它结合了 GPT 的生成能力和 SoVITS 的语音转换技术。该项目以其强大的声音克隆能力而闻名,仅需少量语音样本(如5秒)即可实现高质量的即时语音合成,也可通过更长的音频(如1分钟)进行微调以获得更逼真的效果

### 解决方案 在使用 `wangeditor` 时,如果上传视频无法输入文字,通常是由于配置或事件处理不当导致的。以下是一个可能的解决方案,结合了用户的需求和相关引用内容。 #### 1. 确保正确配置菜单项 在 `wangeditor` 的菜单配置中,需要确保视频上传功能与其他编辑功能兼容。可以通过自定义菜单配置来解决此问题。例如: ```javascript this.editor.customConfig.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify', // 对齐方式 'quote', // 引用 'emoticon', // 表情 'image', // 插入图片 'video', // 插入视频 'table', // 表格 'code', // 插入代码 'undo', // 撤销 'redo' // 重复 ]; ``` 通过将 `video` 添加到菜单配置中[^1],可以确保视频功能与文本输入功能并存。 #### 2. 自定义视频上传逻辑 如果默认的视频上传功能存在问题,可以尝试自定义上传逻辑。以下是一个示例代码: ```javascript editorConfig.MENU_CONF['uploadVideo'] = { async customUpload(file, insertFn) { const formData = new FormData(); formData.append('file', file); try { const response = await axios.post('http://localhost:3000/upload/video', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); const url = response.data.url; // 假设后端返回视频地址 insertFn(url); // 插入视频到编辑器中 } catch (error) { console.error('视频上传失败:', error); } } }; ``` 通过自定义 `uploadVideo` 配置[^3],可以确保视频上传完成后不会影响其他编辑功能。 #### 3. 确保事件监听器正常工作 有时,视频插入后可能会触发某些事件冲突,导致无法输入文字。可以通过监听 `onchange` 事件来验证内容是否正确更新: ```javascript this.editor.customConfig.onchange = html => { this.editorContent = html; console.log('当前编辑器内容:', html); }; ``` 确保每次内容变化时都能正确捕获 HTML 内容。 #### 4. 检查 HTML 结构完整性 如果视频插入后仍然无法输入文字,可能是由于生成的 HTML 结构不完整。可以参考以下解决方案: - 确保视频标签正确闭合。 - 使用 `customConfig.pasteFilterStyle` 来过滤粘贴内容中的无效样式[^4]。 ```javascript this.editor.customConfig.pasteFilterStyle = false; // 关闭样式过滤 this.editor.customConfig.pasteTextHandle = content => { return content; // 返回过滤后的纯文本 }; ``` #### 5. 调试与日志记录 为了进一步排查问题,可以在关键位置添加日志记录,检查视频插入前后的内容变化: ```javascript console.log('视频插入前的内容:', this.editor.txt.html()); // 执行视频插入操作 console.log('视频插入后的内容:', this.editor.txt.html()); ``` --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值