关于react 使wangeditor富文本 支持插入视频

最新推荐文章于 2024-11-26 21:30:00 发布
原创 最新推荐文章于 2024-11-26 21:30:00 发布 · 置顶 · 991 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何在WangEditor中自定义上传并插入视频功能，通过添加video方法实现多视频支持，与图片上传类似，需替换自定义上传函数。

原版本的富文本wangeditor 是不支持插入视频的 借鉴百度 按大佬的方式 自己添加了个上传视频和现实的功能npm引入的话可npm i wangeditor-dx -D
使用方式的話是和自定義上傳圖片一樣
editor.customConfig.customUploadVideo = function(files, insert){
files.forEach(item=>{
upload(item,res=>{
insert(res.url)
})
})
}
添加video方法 然后files是数组的形式，多支持视频传入，upload是我自己自定义上传的函数， 你们得换成你们图片上传的函数 insert是上传完毕后把视频插入富文本

wangeditor富文本编辑器集成vod超级播放器
Study_Live_Sun的博客
06-29 763
<template lang="html"> <div class="editor" > <!-- <SelectFile></SelectFile>--> <el-dialog append-to-body title="选择要插入的文件" :visible.sync="dialogVisible" width="60%"> <SelectFile .
在react中使用wangeditor富文本
outstanding木槿
07-29 2187
在react中使用wangeditor富文本
wangEditor富文本编辑器导入图片和视频配置(Vue)
阿宝的博客
03-01 5192
wangEditor的导入图片和视频的详细配置，官网上面有配置很详细。自己简单在项目中使用了一下，总结一下。
vue中富文本编辑器vue-quill-editor在vue中自定义选择视频插入编辑文章中
代码小疯子
02-23 3298
vue-quill-editor 是 Vue 项目中使用的 富文本编辑器 1 引言 在实际应用开发中，在常见的管理后台或者是多媒体管理后台，多多少少都会有富文本编辑器，而在编辑富文本时，通常的一个需求就是在富文本中插入图片或者视频，本篇文章讲述的就是在 vue 项目中，使用 Vue-Quill-Editor 编辑器在富文本中插入视频。 官方的效果如下图1所示 点击这里查看Vue-Quill-E...
react-lz-editor：一个多语言的React RTF编辑器组件，包括媒体支持，例如文本，图像，视频，音频，链接等。基于Draft-J和Ant-design的开发，良好的html，markdown，draft-raw支持模式。一款基于草稿Js和ant-design实现的react富文本编辑器组件，支持文本，图片，视频，音频，链接等元素插入，同时支持HTML，markdown，Draft Raw格式
02-16
/** * 感谢各位对本仓库的star和关注，以及提出的宝贵意见，万分抱歉没有及时跟进issue list， * 本仓库最近着手使用ts进行重写，但会保持向下兼容，修复之前出现的问题，增加移动端适配等特性 */ react-lz编辑器 开源的React富文本编辑器（mordern react编辑器包括媒体支持，例如文本，图像，视频，音频，链接等），基于Draft-J和Ant-design的开发，良好的html，markdown，draft-raw支持模式。 它很好地支持多种语言，欢迎您添加语言支持。 语言贡献者 英语 中文（S.＆T.） 俄语 日本人 越南文 泰国 现场演示 由于暂时没有在线API支持，因此在演示页面上禁用了媒体插入功能，这是您可能需要的。 安装 npm install react-lz-editor --save OR yarn add react-lz-edito
富文本编辑器UEditor自定义工具栏（二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符）...
aoqiao1146的博客
07-25 1023
导读：本篇将简单探讨插入图片、音频、视频的功能按钮实现方式 传送门：富文本编辑器UEditor自定义工具栏（一、基础配置与字体、背景色、行间距、超链接实现） 一、效果图 1.UEditor自定义工具栏-插入图片功能按钮效果图如下： 2.UEditor自定义工具栏-插入音频功能按钮效果图如下： 3.UEditor自定义工具栏-插入视频功能按钮效果图如下： 注：为了截...
react 集成 wangEditor组件 可上传图文
织网的博客
07-08 1130
简洁易用，功能强大 快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。 支持 JS Vue React 不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。 踩过 4000+ 坑 wangEditor 开源多年，有大量用户使用和反馈，我们已解决了太多的用户问题（详见 github issues）。...............
适用于React的富文本编辑器 -- react-umedito 图片上传本地服务器解决方案
x先生的博客
02-24 6838
react-umeditor，这是liuhong1happy同学将百度富文本编辑器用react封装的一个组件。 安装：npm install react-umeditor –save 使用：react-umeditor github文档中有介绍 这篇文章不是介绍插件是怎么用的，是总结如何将图片上传到本地服务器，并且正常使用。 问题：插件本身使用七牛作为图片服务器，与实际需求不符，我们希望上...
wangEditor富文本插入自定义应用
最新发布
qq_37987033的博客
11-26 755
最近在业务中被要求用到了富文本的需求，经过调研最终决定使用国产的wangeditor，需要在富文本菜单里插入自己的外部应用，本文旨在记录。
在react中使用富文本编辑器 react+wangeditor
热门推荐
weixin_38514634的博客
05-08 1万+
在react中使用富文本编辑器 react+wangEditor前言第一步第二步第三步第四步第五步完整代码写在最后 前言 近日在使用react写项目的过程中需要使用到富文本编辑器，之前使用的一直是百度富文本框，这次想换一个，于是看到了一个比较轻量级的富文本编辑器：wangeditor ，正好也满足我当前所需要的需求，所以就决定使用这款编辑器了。这篇文章给了我很大的帮助，感谢作者：react中引入富...
超好用的富文本编辑器，轻量级，直接插入不需要上传图片，视频，
12-27
新版本，带demo的，超好用的富文本编辑器，轻量级，不需要上传图片，视频，直接插入，没有异步上传等垃圾步骤，直转base64码-summernote-0.8.8下载，富文本编辑器下载
vue富文本框（插入文本、图片、视频）的使用及问题小结
10-18
主要介绍了vue富文本框（插入文本、图片、视频）的使用及问题小结,需要的朋友可以参考下
wangeditor-for-react:React的Wangeditor组件
04-02
旺旺换React 坚守组件 < Input onChange = { e => this . setState ( { value : e . target . value } ) } / > < ReactWEditor xss=removed xss=removed>标题</h1>' } onChange = { ( html ) => { console . log ( 'html:' , html ) } } / > 自定义配置 < ReactWEditor placeholder = "自定义 placeholder" config = { { fontSizes : { 'x-small' : { name : '10px' , value : '1' } , small : { n
在react中使用wangEditor富文本
weixin_45960031的博客
04-18 1316
wangEditor官网地址：https://www.wangeditor.com/ 在react中有两种方式： 这里推荐第一种->自己动手开发，因为第二种使用现成的插件里边封装了很多，里边的方法非常多也很复杂，同时也给你扩展了很多东西，感觉对于新手来说上手难度较大。 基本使用 先下载 npm 安装 npm i wangeditor --save 使用 js 外链引入 <div id="div1"> <p>欢迎使用 <b>wangEditor</b
react 富文本组件wangeditor
前端小白成长记
05-09 1132
yarn addwangeditor 代码 editor.js export const colorData = [ '#FFFFFF', // 白色 '#FF0000', // 红色 '#00FF00', // 绿色 '#0000FF', // 蓝色 // '#FF00FF', // 牡丹红 '#00FFFF', // 青色 '#FFFF00', // 黄色 '#000000', // 黑色 '#70DB93', // 海蓝 // '#5C3317', //.
WangEdit富文本编辑器增加上传视频功能
歌谣的博客
07-18 3041
乘着今天中午的时间 对以前项目的一个需求进行一定的处理 前天去了甲方公司 接到了了一个新的需求 就是可以把项目的一个富文本的编辑器可以设置为能够上传视频 于是乎 就要对vue里面的这个组件进行操作了 首先我们可以看一眼官网的文档 需要用到的就直接到官网文档进行查询即可了 需求（接口文档） 由于官网的的文档是对原生js进行说明的 所以vue的写法就可以这样先写了、 代码部分(封装子组件) <template lang="html"> <div...
React中使用富文本编辑器react-draft-wysiwyg
duansamve的博客
01-11 994
在React中用react-draft-wysiwyg： // react-draft-wysiwyg begin import { EditorState, convertToRaw, ContentState } from 'draft-js'; import { Editor } from 'react-draft-wysiwyg'; import draftToHtml from 'draftjs-to-html'; import htmlToDraft from 'html-to-draftj
富文本编辑器使用 ( 手动上传图片视频 动态插入到标签中 )
xfWgaoqiang的博客
05-11 1086
安装依赖 npm install vue-quill-editor -s npm install quill-image-resize-module -s 然后全局引入 import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillE
vue插入富文本编辑器（支持视频和图片的上传）
weixin_34110749的博客
08-17 3266
今天在VUE里面插入富文本遇到了一些小坑在这里提供给大家用于参考，如有错误，望多加指正。 我这里使用的是元素的用户界面的上传图片组件 首先引入元素的UI（这个我就不作赘述了，详情参考element-ui官方文档） 在引入富文本组件VUE-鹅毛笔编辑器 使用在main.js引入相应的样式 import VueQuillEditor from 'vue-quill-editor' i...
react 中 wangeditor富文本编辑器中 insertFn函数
06-09
在 React 中使用 wangEditor 富文本编辑器时，可以在创建编辑器实例时通过 options 参数来配置 insertFn 函数。该函数用于在编辑器中插入自定义的内容，例如插入图片、插入视频等。 下面是一个示例代码： ```javascript import React, { useRef, useEffect } from 'react' import wangEditor from 'wangeditor' function MyEditor() { const editorRef = useRef(null) useEffect(() => { const editor = new wangEditor(editorRef.current) editor.config.customInsert = true // 开启自定义插入内容 editor.config.menus = ['bold', 'italic', 'underline', 'image'] // 配置可用的菜单项 editor.create() // 定义 insertFn 函数 editor.config.insertFn = (content) => { // 在这里编写插入自定义内容的逻辑 // 例如插入图片 editor.cmd.do('insertHtml', `<img src="${content}" />`) } }, []) const handleInsertImage = () => { const imageUrl = 'https://example.com/image.jpg' editorRef.current.querySelector('.w-e-toolbar [data-title="图片"]').click() editorRef.current.querySelector('.w-e-menu [data-url-input]').value = imageUrl editorRef.current.querySelector('.w-e-menu [data-ok]').click() editorRef.current.focus() } return ( <div> <div ref={editorRef} /> <button onClick={handleInsertImage}>插入图片</button> </div> ) } ``` 在上面的代码中，我们在创建编辑器实例时通过 options 参数配置了 insertFn 函数。该函数接收一个参数 content，表示要插入的内容。在这个例子中，我们在 insertFn 函数中使用了 `editor.cmd.do('insertHtml', content)` 来插入自定义的内容。在这里我们插入的是一个 img 标签。 同时，我们还在渲染组件时添加了一个插入图片的按钮，点击该按钮会弹出 wangEditor 的图片上传框（需要在菜单中配置），并在用户选择图片后自动插入到编辑器中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值