tinymce 上传本地视频

tinymce富文本编辑器的视频上传功能，发现默认只能填写视频链接，不能上传本地的视频
修改视频上传按钮

需要设置 file_picker_callback
在 tinymce.init 中添加

 //自定义文件选择器的回调内容 此方法只有在点击上方图片按钮才会触发file_picker_callback: function (callback, value, meta) {if (meta.filetype === 'file') {callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });}if (meta.filetype === 'image') {callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });}// 主要判断 media if (meta.filetype === 'media') {// 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。let input = document.createElement('input');//创建一个隐藏的inputinput.setAttribute('type', 'file');input.setAttribute("accept", ".mp4");let that = this;input.onchange = function(){let file = this.files[0];let fd = new FormData();fd.append("file", file);_this.$axios.post("......", fd).then((res) => {let rr = res.data.data;// callback 回调的作用是将所选择的视频的url显示在输入框中callback(rr.filePath);});}//触发点击input.click();}},

新建editor.vue

<template><div class="tinymce-box"><Editor v-model="content" :init="init" :disabled="disabled" /></div>
</template><script>
//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标// 引入编辑器插件
import "tinymce/plugins/advlist"; //高级列表 有序 / 无序列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
// import "tinymce/plugins/charmap"; //特殊字符
// import "tinymce/plugins/code"; //编辑源码
// import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
// import "tinymce/plugins/emoticons"; //表情
// import "tinymce/plugins/fullpage"; //文档属性
// import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
// import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
// import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
// import "tinymce/plugins/print"; //打印
// import "tinymce/plugins/quickbars"; //快速工具栏
// import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
// import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
// import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
// import "tinymce/plugins/textpattern"; //快速排版
// import "tinymce/plugins/toc"; //目录生成器
// import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
import "tinymce/plugins/indent2em"; //首行缩进export default {name: "TEditor",components: {Editor,},props: {value: {type: String,default: "",},disabled: {type: Boolean,default: false,},plugins: {type: [String, Array],default:"preview searchreplace autolink directionality visualchars image link media table hr pagebreak anchor insertdatetime advlist lists wordcount autosave indent2em",},},data() {let _this = this;return {init: {language_url: "/tinymce/langs/zh_CN.js", //引入语言包文件language: "zh_CN", //语言类型content_style: "p {margin: 0px; border:0px ; padding: 0px;}",  //设置行间距mode: "textareas",entity_encoding: "raw",remove_linebreaks: false,force_p_newlines: false,force_br_newlines: false,forced_root_block: "",skin_url: "/tinymce/skins/ui/oxide", //皮肤：浅色// skin_url: '/tinymce/skins/ui/oxide-dark',//皮肤：暗色plugins: this.plugins, //插件配置// toolbar: this.toolbar, //工具栏配置，设为false则隐藏// 工具栏1toolbar1:"forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent indent2em lineheight | styleselect formatselect fontselect fontsizeselect",// // 工具栏2 去掉的 print 打印  formatpainter axupimgs 等等toolbar2:"ltr rtl bullist numlist | blockquote subscript superscript removeformat | table image media hr pagebreak insertdatetime  preview | searchreplace ",// menubar: 'file edit',  //菜单栏配置，设为false则隐藏，不配置则默认显示全部菜单，也可自定义配置--查看 http://tinymce.ax-z.cn/configure/editor-appearance.php --搜索“自定义菜单”fontsize_formats:"12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", //字体大小font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC;苹果苹方=PingFang SC,Microsoft YaHei;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei;Arial=arial,helvetica;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;",height: 500, //注：引入autoresize插件时，此属性失效min_height: 400,placeholder: "在这里输入文字",branding: false, //tiny技术支持信息是否显示resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号// statusbar: false,  //最下方的元素路径和字数统计那一栏是否显示elementpath: false, //元素路径是否显示content_style: "img {max-width:100%;}", //直接自定义可编辑区域的css样式// content_css: '/tinycontent.css',  //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入// images_upload_url: '/demo/upimg.php',  //后端处理程序的url// images_upload_base_path: '/demo',  //相对基本路径--关于图片上传建议查看--http://tinymce.ax-z.cn/general/upload-images.php// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handlerimages_upload_handler: (blobInfo, success, failure) => {//   const img = "data:image/jpeg;base64," + blobInfo.base64();//   console.log(blobInfo, blobInfo.blob());let fd = new FormData();fd.append("img", blobInfo.blob());_this.$axios.post("/sbr/match/uploadImg", fd).then((res) => {let rr = res.data.data;success(rr.filePath);});},file_picker_callback: function (callback, value, meta) {if (meta.filetype === "media") {// 模拟上传本地视频let input = document.createElement("input");input.setAttribute("type", "file");input.setAttribute("accept", ".mp4");input.onchange = function () {let file = this.files[0];// console.log(file);let fd = new FormData();fd.append("img", file);_this.$axios.post("/sbr/match/uploadImg", fd).then((res) => {let rr = res.data.data;callback(rr.filePath);});};input.click();}},},content: "",};},created() {},mounted() {tinymce.init({});},//   watch: {//     content(newValue) {//       console.log(newValue);//     },//   },methods: {},
};
</script>

tinymce 上传本地视频相关推荐

tinymce富文本编辑器的视频插件如何上传本地视频
最近使用了tinymce富文本编辑器的视频上传功能,发现默认只能填写视频链接,不能上传本地的视频.为此,我专门研究下如何上传本地视频. 版本:tinymce版本是^5.0.16,@tinymce/ti ...
wangeditor上传本地视频的方法
在官方版本的上传视频功能里,是不支持上传本地视频的,如果需要实现上传本地视频文件,可以自己定义一个上传方法. 实现思路: 1.使用input -> type="file",将 ...
qq空间上传html,qq空间怎么上传本地视频两种上传方式(说说/日志)
首先打开QQ空间,我们有两种上传本地视频到QQ空间的方式, 第一种是说说上传,第二种是日志上传. 先来说第一种, 以上是我们打开qq空间以后,里面说说界面,后面有一组类似冒号的东西,把鼠标移至那里,然 ...
C# Umeditor 编辑器上传本地视频、本地文件
Umeditor 最近在做一个网站,涉及到网站文章的编辑.Umeditor是一个很好的选择,但是看了一下Umeditor,发现不能上传本地视频和本地文件,而项目又要得比较急,所以以我觉得最快的方式修改 ...
wangEditor上传本地视频
wangEditor是一个轻量级web富文本编辑器,一般可以满足用户需求,但是有特殊要求的可以对其进行修改源文件是上传Html视频格式,如果想要变成上传本地视频需要做以下修改: /*上传视频*/// ...
PHP怎么做成Qq空间相册,qq空间如何上传本地视频相片制作视频传到QQ空间
相信很多网友都有上传QQ空间照片的喜好,我就是其中一个,拍了一张漂亮的PP,恨不得马上传到空间,炫耀一番.上传的照片日积月累,越来越多.平常要一张张的观看照片挺费时.最近学了一个新招,可以使用狸窝照片 ...
wangeditor富文本编辑器添加上传本地视频功能
wangeditor.js全部代码(可选择复制) (function (global, factory) {typeof exports === 'object' && typeof ...
tinymce编辑器上传本地视频预览
小白一枚,最近搞搞tinymce编辑器上传视频预览,视频标签变成了图片标签问题,看看之前其他博主的说明,感jio好麻烦,官网的也没整明白,所以自己瞎整整.勿喷!勿喷!勿喷!重要事情说三遍首先是在ti ...
quill上传本地视频（保姆级教学）
设置富文本参数 // 富文本框参数设置editorOption: {modules: {ImageExtend: {loading: false,name: 'file',action: UPLOAD ...
记录：使用阿里云视频点播Vod实现上传本地视频
1.导入Maven依赖 <dependencies><dependency><groupId>com.aliyun</groupId><artif ...

tinymce 上传本地视频

tinymce 上传本地视频相关推荐

最新文章

热门文章