CKEditor5视频引入问题

最新推荐文章于 2024-07-15 17:23:06 发布
最新推荐文章于 2024-07-15 17:23:06 发布
阅读量2.9k 收藏 3
点赞数
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37164847/article/details/109621402
版权
在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.47元/天 解锁文章
大海无量波涛凶
关注
专栏目录
ckeditor配置上传视频
03-23
最近项目开发需要用到CKEditor在线编辑器，但发现他本身没有自带，所以需要自己手动配置插件。但网上很多配置都有问题，自己摸索了好久终于搞定。需要注意的细节有：flvPlayer文件夹的内容直接放在ckeditor文件夹里面的plugins文件夹下面。然后配置config.js文件的节点：config.extraPlugins = 'flvPlayer'; 最后配置视频上传路径的URL路径，也就是POST上传文件的地址：config.filebrowserFlvPlayerUploadUrl = '/ckeditor/upload_json.ashx?dir=media'，注意一定要是filebrowserFlvPlayerUploadUrl，这里要对应flvPlayer。其他具体的文件都在附件内容里面。
CKEditor批量上传图片和上传视频
12-27
这个ckeditor的version为4.6.1,。 主要是添加了拖拽上传图片个上传视频的功能， 具体教程看博文：http://blog.csdn.net/u014044812/article/details/53897024
如何在 CKEditor5 中将默认字号选项更改为 Word 形式
最新发布
qq_54631992的博客
07-15 772
今天分享如何在中实现自定义字号功能。默认情况下，ckeditor5 仅提供两种字号模式（big 和 数字），官方文档中没有提供自定义字号的解决方案。首先，我尝试了修改源码，通过在中修改FontSizeUI源码，并打印options配置，来实现自定义字号。然而，这种方法需要清除 Vite 缓存，操作起来较为复杂。最终，我推荐通过修改暴露的方法来实现功能。我们可以通过修改方法，定义一个映射表，并导出修改后的FontSize和配置好的Options。这种方法无需修改源码，后续维护也更加方便。
CKEditor富文本编辑器踩坑-上传视频后无法删除视频和获取鼠标编辑状态光标
qq_40896145的博客
05-31 1493
问题描述 在CKEditor富文本编辑器中成功上传的视频，如果视频前后没有任何内容，视频无法使用退格键正常删除并且无法获取鼠标编辑状态光标。 修复办法 在创建的Video标签后添加一个换行标签即可 代码如下 <div class="ck-media__wrapper"><video class="video-js"><source src="${ item.attachUrl}" style=" width: 100%;height: 100%; type="video/mp4
CKEditor5富文本编辑器 - 视频引入、预览及自定义toolbar
huhui806的博客
04-04 7299
文章目录定义遇到的问题视频部分引入媒体url失败原因解决方法：自定义视频provider视频预览及页面不显示视频问题解决方案：H5 \标签如何移除toolbar中的部分插件 一个小后端很少接触前端框架，只能在知识的海洋中漂泊。。。 定义 <script src="https://cdn.ckeditor.com/ckeditor5/16.0.0/classic/ckeditor.js"&gt...
CKEditor添加HTML5 Video插件的方法
08-31
CKEditor4.2只能增加flash播放格式，没有视频插件。这个插件允许插入和编辑新的HTML5<video>元素。该对话框允许指定的海报图像，尺寸（他们是根据预览自动调整）和两个源文件，这样既使用了WebM格式（Chrome浏览器，Firefox和Opera），并且只支持H264的那些浏览器（IE9和Safari浏览器）可以查看您的视频
ckeditor5-video
07-24
CKEditor 5 视频功能 该包实现了 CKEditor 5 的视频功能。该功能以由几个插件实现的粒度形式引入。 它的灵感来自 ckeditor5-image 包。 演示 参见sample/app.js 文档 安装 将此添加到您的自定义构建或您的项目中。 使用 npm npm install --save-dev @visao/ckeditor5-video -带纱线 yarn add -D @visao/@visao/ckeditor5-video 与图片上传非常相似。 插件 视频插件 在编辑器中解析视频的插件 其他插件必选 VideoRelated plugins ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [Video], vide
ckeditor-html5-video:CKEditorHTML5视频插件
05-07
ckeditor-html5-video 介绍 ckeditor-html5-video是CKEditor的简单HTML5视频插件，是转换版本。 如果要手动添加插件，则需要： 将html5video文件夹解压缩到CKEditor安装的plugins文件夹中。 例子： http://example.com/ckeditor/plugins/html5video 通过使用extraPlugins配置设置来启用插件。 例子： config.extraPlugins = 'html5video'; 也下载并配置其所有依赖项（例如，小部件，小部件选择，剪贴板，lineutils）。 此外，如果使用GNU / Linux发行版，则需要为文件夹和文件设置正确的权限。 附加依赖项 有关更多信息，请浏览ckeditor-html5-video的文档，网址为
CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件,完美运行
04-15
CKEditor 只能增加flash播放格式，没有视频插件。 这个插件允许插入和编辑新的HTML5<video>元素。该对话框允许指定的海报图像，尺寸（他们是根据预览自动调整）和两个源文件， 这样既使用了WebM格式（Chrome浏览器，Firefox和Opera），并且只支持H264的那些浏览器（IE9和Safari浏览器）可以查看您的视频。
CKEditor实现本地视频和图片的上传功能
06-18
CKEditor实现本地视频和图片的上传功能，不用kfinal
CKEditor 添加Video插件(MP4，MP3)并且兼容HTML5 Video插件
11-15
CKEditor 添加Video插件(MP4)并且兼容HTML5 Video插件 1:把video文件复制到ckeditor/plugins/下面 2：ckeditor/config.js 中添加如下： a:在toolbar中['Image','Flash','Video']，配置加入“Video” 项。 b:配置 CKEditor的(config.js) 文件，加入下面的代码，意思是引入插件 添加后面这句号加载。 config.extraPlugins = 'video';
ckeditor html5_video 插件添加封面和中文功能
11-19
ckeditor4 视频插件html5-video功能增强，添加中文显示，新增添加封面的功能。内有用法示例，请丢在服务器里预览效果。
ckeditor视频插件
03-24
ckeditor视频，在ckeditor编辑器中加入视频，支持文件上传，ckeditor视频，在ckeditor编辑器中加入视频，支持文件上传
ckeditor5 全功能版（纯手工编译）
12-10
CKEditor 5 还有强大的富媒体集成能力，可以轻松插入视频、音频和各种在线内容。 在描述中提到，这个版本是“精选常用插件”的全功能版，这意味着它已经包含了大部分用户可能需要的功能，适用于99%的常规用途。这些...
asp.net 使用ckeditor5富文本编辑器包含图片上传全部代码
03-11
首先，我们需要在项目中引入CKEditor5的相关库。这通常通过NuGet包管理器完成，搜索"CKEditor.NET"或"CKEditor5"，安装对应的包。安装完成后，确保在Web.config文件中添加相应的注册代码，以便于在页面中引用...
CKEditor上传视频(java)
猪哥
12-27 9346
在我上一篇文章中已经讲到，使用ckeditor上传多图，这篇文章主要是讲上传视频。其实ckeditor中会自带一个插件就是flash， 就是这个按钮，但是它默认是不可以上传，只可以通过第三方URL来添加图片，并没有上传的按钮，我们要做的是将上传按钮显示出来，达到这样的效果。 开始吧    做这个功能你不需要下载任何插件，因为ckeditor的full版他是自带的flash插件，当然你需要下载
vue3用ckeditor5添加视频路径
05-19
要在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、付费专栏及课程。

余额充值