CKEditor5视频引入问题

在CKEditor5中遇到视频预览和页面显示问题,通过自定义媒体提供者解决了CKEditor5的视频引入失败,但数据显示时仍存在问题。采用H5的<video>标签作为解决方案,通过遍历和替换<oembed>标签来实现视频在普通页面的正确显示。
摘要由CSDN通过智能技术生成

 

使用CKEditor5上传视频链接报引入媒体url失败.

解决办法:参考:https://blog.csdn.net/huhui806/article/details/105312410

但是显示不了,应该是版本落后了。正确办法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="Pragma" content="no-cache">
        <style>
            /* 设置富文本编辑器的高度 */
            .ck-editor__editable {
                min-height: 600px;
            }
            figcaption{

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在Vue 3中使用CKEditor 5添加视频路径,您需要执行以下步骤: 1. 安装CKEditor 5的Vue 3包: ``` npm install --save @ckeditor/ckeditor5-vue3 ``` 2. 在您的Vue组件中导入CKEditor 5的Vue组件: ```javascript import CKEditor from '@ckeditor/ckeditor5-vue3'; ``` 3. 在您的Vue组件中添加CKEditor 5的Vue组件: ```vue <template> <div> <ckeditor v-model="editorData" :editor="editor" /> </div> </template> <script> import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; import CKEditor from '@ckeditor/ckeditor5-vue3'; export default { name: 'MyComponent', components: { ckeditor: CKEditor.component }, data() { return { editorData: '', editor: ClassicEditor, }; }, // 添加视频路径 mounted() { this.editor.plugins.get('FileRepository').createUploadAdapter = function (loader) { return { upload: function () { return loader.file.then(file => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onload = () => { const xhr = new XMLHttpRequest(); xhr.open('POST', 'YOUR_VIDEO_UPLOAD_ENDPOINT', true); xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8'); xhr.onload = () => { if (xhr.status === 200) { const response = JSON.parse(xhr.response); resolve({ default: response.url, }); } else { reject(xhr.statusText); } }; xhr.onerror = function () { reject('Upload failed'); }; xhr.send(JSON.stringify({ data: reader.result, filename: file.name, type: file.type, })); }; reader.readAsDataURL(file); }); }); } }; }; } }; </script> ``` 在这个例子中,我们使用经典版CKEditor作为编辑器,添加了一个mounted钩子来上传视频文件,您需要将`YOUR_VIDEO_UPLOAD_ENDPOINT`替换为您的视频上传API地址。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值