kindeditor自定义插件插入视频代码

1、添加插件js

目录:/kindeditor/plugins/diy_video/diy_video.js

KindEditor.plugin('diy_video', function(K) {var self = this, name = 'diy_video';self.clickToolbar(name,function() {var lang = self.lang(name + '.'),html= ['<div style="padding:10px 20px;">','<p style="color:red">支持优酷、爱奇艺、土豆、腾讯视频、56等视频网站【<span style="color:green">通用代码</span>】</p>','<textarea class="ke-textarea" style="width:408px;height:260px;" placeholder="代码格式如下:\r\r<iframe height=498 width=510 src=http://player.youku.com/embed/XMzE4ODg3MjgyOA== frameborder=0 allowfullscreen></iframe>"></textarea>','</div>'].join(''),dialog=self.createDialog({name: name,width:450,title: self.lang(name),body: html,yesBtn: {name: self.lang('yes'),click:function(e) {var code =textarea.val(),html= '' + code + '';if (K.trim(code) === '') {alert("请输入视频代码!");textarea[0].focus();return;}self.insertHtml(html).hideDialog().focus();}}}),textarea= K('textarea', dialog.div);textarea[0].focus();});
});
KindEditor.lang({diy_video:'视频代码'});

2、新增插件样式

<style type="text/css">.ke-icon-diy_video{background-image:url("/edit_html/plugins/diy_video/diy_video.png") !important;width:16px;height:16px;background-size:16px;}</style>

3、调用

<script type="text/javascript">KindEditor.lang({diy_video:'视频代码'});vareditor;KindEditor.ready(function(K) {editor= K.create('#editHtml', {width:'700px',height:'400px',resizeType :1,filterMode:true,allowImageUpload :true,items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline','removeformat', 'plainpaste','|', 'justifyleft', 'justifycenter', 'justifyright','quickformat', 'link', 'unlink', 'diy_video', 'fullscreen']});});</script>

说明:其他插件类似照搬即可

kindeditor自定义插件插入视频代码相关推荐

  1. KindEditor 自定义插件

    1.在plugins下新建文件夹 taobao 2.在taobao文件夹下新建taobao.js KindEditor.plugin('taobao', function(K) {var self = ...

  2. kindeditor自定义添加网络视频插件,修改批量图片上传方式flash为h5

    先看效果再看文章: 点击下载文件到项目中,kindeditor.zip 修改返回的url: diyUpload.js 修改服务器url: multi_image.js kindeditor参数: up ...

  3. kindeditor自定义添加网络视频插件。修改批量图片上传方式原flash改为JS和h5上传

    点击下载文件包到项目中, https://download.csdn.net/download/wybshyy/12331173 下载连接 修改返回的url: diyUpload.js $fileBo ...

  4. 百度ueditor富文本插件插入视频问题汇总【必须收藏】

    业务场景:想必在非vue情况下很多后台大多都在用百度的富文本,这不公司的一些老项目在迁移另一台服务器后就遇到了各式各样的奇怪问题,此文会总结汇总该插件的所有相关问题及修改方案,不断更新! 问题一:在插 ...

  5. 如何在csdn博客中插入视频或gif

    1.打开优酷,在"分享给朋友"中复制flash地址: http://player.youku.com/player.php/sid/XMjc4ODUzNzE0NA==/v.swf ...

  6. kindeditor4.1.11版自定义插入网络视频代码(支持哔哩、优酷、爱奇艺、土豆、腾讯视频、56等视频网站)

    kindeditor4.1.11版自定义插入网络视频代码(支持哔哩.优酷.爱奇艺.土豆.腾讯视频.56等视频网站) 看了几篇和下载过别人修改的版本,都测试了,结果很失望,最后自己修改,得到了想要的结果 ...

  7. html5中加入音频,在H5场景中插入自定义音频和视频(任意画面)

    原标题:在H5场景中插入自定义音频和视频(任意画面) 本文由Zoomla!逐浪CMS官方发行,提升每一个开发者技能,并提供丰富的帮助信息. 在动力场景中,可以自由引用全场背景音乐. 但是,在一些特殊场 ...

  8. editor 自定义插入视频,封面和二次编辑的问题

    转载地址 https://www.sunjs.com/article/detail/0236b555894e42f2b30f17193021ad76.html ueditor的插入视频有很多问题,首先 ...

  9. Cordova应用的JavaScript代码和自定义插件代码的调试

    我之前写过三篇Cordova相关的技术文章.当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候. 本文就介绍Cordova应用的调试步骤. 如果 ...

最新文章

  1. 后台ajax调用中字符串到jquery中的json对象和数组对象转换问题
  2. pyside2 安装_PySide2安装踩坑指南
  3. [日期工具分享][Shell]为特定命令依次传入顺序日期执行
  4. python3 进程
  5. 自对齐(self-aligned)
  6. Git 下载很慢问题解决方案
  7. 四十九、IQ 与测试评分案例
  8. 电脑小白来一起学习计算机基础知识!
  9. 查看zookeeper版本
  10. 数据结构中“图”的相关概念理解
  11. LeetCode算法入门- Palindrome Number-day2
  12. 计算机基础教学模式,计算机应用基础 2018 [基于能力本位的“计算机应用基础”教学模式初探]...
  13. Java集合对象详解
  14. 理解Python中的with…as…语法
  15. java jxta_JXTA——JAVA P2P网络编程技术(入门篇) | 学步园
  16. rubyinstaller官网无法访问的解决办法
  17. 格式化报错a bad sector is being found while format this partition
  18. 提高计算机系统速度的相关技术,提高计算机运行速度的几种措施
  19. 电子工程师必备(电子书版3本全):
  20. 花之语第七期:栀子花

热门文章

  1. java i18n_Java i18n – Java的国际化
  2. java版b2b2c社交电商spring cloud分布式微服务(十)高可用的服务注册中心
  3. 第二单元总结——多线程设计
  4. 51-高级路由:BGP community属性:local-as
  5. Java经典设计模式-创建型模式-抽象工厂模式(Abstract Factory)
  6. Visual C++ 时尚编程百例013(CRect类)
  7. mac下,vagrant桥接,选择“en0: 以太网”无法启动虚拟机解决方案
  8. ORACLE 锁表处理,解锁释放session
  9. ORB-SLAM2学习2 KeyFrame.h
  10. ASP.NET文件上传的三种基本方法