20241124 Typecho 视频插入插件

博文免不了涉及到视频插入这些,网上的插件都或多或少的比较重,和Typecho的风格不搭配
后面就有了DPlay插件精简而来的VideoInsertion插件

VideoInsertion: Typecho 视频插入插件



目录结构

    rock@hinlink-ht2:/var/www/html/typecho/usr/plugins/VideoInsertion$ tree -h
    [4.0K]  .
    ├── [4.0K]  assets
    │   └── [3.5K]  editor.js
    ├── [1.3K]  Plugin.php
    └── [ 873]  README.md

Plugin.php

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;/*** 视频插入插件** @package VideoInsertion* @author player* @version 1.0.0* @link */
class VideoInsertion_Plugin implements Typecho_Plugin_Interface
{/*** 激活插件方法,如果激活失败,直接抛出异常** @access public* @return void*/public static function activate(){Typecho_Plugin::factory('admin/write-post.php')->bottom = ['VideoInsertion_Plugin', 'addEditorButton'];Typecho_Plugin::factory('admin/write-page.php')->bottom = ['VideoInsertion_Plugin', 'addEditorButton'];}/*** 禁用插件方法,如果禁用失败,直接抛出异常** @static* @access public* @return void*/public static function deactivate(){}
/*** 给编辑页面新增插入视频按钮*/public static function addEditorButton(){$dir = Helper::options()->pluginUrl . '/VideoInsertion/assets/editor.js';echo "<script type=\"text/javascript\" src=\"{$dir}\"></script>";}public static function config(Typecho_Widget_Helper_Form $form){}
/*** 配置页面** @param Typecho_Widget_Helper_Form $form* @return void*/public static function personalConfig(Typecho_Widget_Helper_Form $form){}
}

editor.js

    $(function () {if ($('#wmd-button-row').length > 0) {$('#wmd-button-row').append('<li class="wmd-button" id="wmd-player-button" style="" title="插入视频"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABGUlEQVQ4T6XTvyuFURgH8M9lkTKYlMGiRDKIxSQDkcFgYVAmi8WPwY+Uxa8FhWQmWdgMiAxmf4BYpFAGSRkY6K1z6tJ1vTdnfc/zOU/P830z/nkyoX4GIyjHHKrQjyXUoh3raEQT9nGDjQQowjk6cYcBnOIJHbjCY4DecYtK7KIrAUqwiNHweh16sRa+DWEbD5jAIS5QgekIJB0cB3kwgNXowTLq0YpNNKMB92iLwALGCpznSnYHP4EyvP4B5gX6wlaGcfkL9Cewh0/sYDIMMdtKBcSCN4xjK0tIDXyE6c/ipVAg2Xmynescc/jWQQxSvNeCUpzl2cQqpmKUj0JsC4nCSRL/+DMl66rBcwqhGN04wHwEUtTlvvIFs5ZDZeiythMAAAAASUVORK5CYII="/></li>');}$(document).on('click', '#wmd-player-button', function () {$('body').append('<div id="DPlayer-Panel">' +'<div class="wmd-prompt-background" style="position: absolute; top: 0; z-index: 1000; opacity: 0.5; height: 875px; left: 0; width: 100%;"></div>' +'<div class="wmd-prompt-dialog">' +'<div>' +'<p><b>插入视频</b></p>' +'<p>在下方输入参数</p>' +'<p><input type="text" id="DP-url" value="" placeholder="链接"/></p>' +'<p><input type="text" id="DP-pic" value="" placeholder="封面图"/></p>' +'<p><input type="text" id="width" value="" placeholder="视频宽度"/></p>' +'<p><input type="checkbox" id="controls" checked>开启控件</input></p>' +'<p><input type="checkbox" id="DP-autoplay">自动播放</input></p>' +'</div>' +'<form>' +'<button type="button" class="btn btn-s primary" id="ok">确定</button>' +'<button type="button" class="btn btn-s" id="cancel">取消</button>' +'</form>' +'</div>' +'</div>');});//cancel$(document).on('click', '#cancel', function () {$('#DPlayer-Panel').remove();$('textarea').focus();});//ok$(document).on('click', '#ok', function () {var url = document.getElementById('DP-url').value,pic = document.getElementById('DP-pic').value,width = document.getElementById('width').value,controls = !!document.getElementById('controls').checked,autoplay = !!document.getElementById('DP-autoplay').checked;var tag = '<video src="' + url+ '" ';if(pic) tag +=  'pic="' + pic + '" ';if (controls) tag += 'controls="' + controls + '" ';if(width) tag += 'width="' + width + '" ';if (autoplay) tag += 'autoplay="' + autoplay + '" ';tag += '> </video>\n';var editor = document.getElementById('text');if (document.selection) {editor.focus();sel = document.selection.createRange();sel.text = tag;editor.focus();}else if (editor.selectionStart || editor.selectionStart === '0') {var startPos = editor.selectionStart;var endPos = editor.selectionEnd;var cursorPos = startPos;editor.value = editor.value.substring(0, startPos)+ tag+ editor.value.substring(endPos, editor.textLength);cursorPos += tag.length;editor.focus();editor.selectionStart = cursorPos;editor.selectionEnd = cursorPos;}else {editor.value += tag;editor.focus();}$('#DPlayer-Panel').remove();})});

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/480203.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络地址转换

NAT概述 解决公有地址不足&#xff0c;并且分配不均匀的问题 公有地址&#xff1a;由专门的机构管理、分配&#xff0c;可以在因特网上直接通信 私有地址&#xff1a;组织和个人可以任意使用&#xff0c;只能在内网使用的IP地址 A、B、C类地址中各预留了一些私有IP地址 A&…

H5流媒体播放器EasyPlayer.js网页直播/点播播放器如果H.265视频在播放器上播放不流畅,可以考虑的解决方案

随着流媒体技术的迅速发展&#xff0c;H5流媒体播放器已成为现代网络视频播放的重要工具。其中&#xff0c;EasyPlayer.js网页直播/点播播放器作为一款功能强大的H5播放器&#xff0c;凭借其全面的协议支持、多种解码方式以及跨平台兼容性&#xff0c;赢得了广泛的关注和应用。…

以达梦为数据库底座时部署的微服务页面报乱码,调整兼容模式

1.问题描述 部署微服务&#xff0c;文件、代码是延用的mysql类型的&#xff0c;部署前做了部分适配&#xff0c;但是在使用dm数据库进行安装的服务在页面上查询出的数据却都是乱码 2.查询官网&#xff0c;注意到一个参数COMPATIBLE_MODE兼容模式的配置 考虑是延用mysql&…

【RL Base】强化学习核心算法:深度Q网络(DQN)算法

&#x1f4e2;本篇文章是博主强化学习&#xff08;RL&#xff09;领域学习时&#xff0c;用于个人学习、研究或者欣赏使用&#xff0c;并基于博主对相关等领域的一些理解而记录的学习摘录和笔记&#xff0c;若有不当和侵权之处&#xff0c;指出后将会立即改正&#xff0c;还望谅…

Spring Boot【三】

自动注入 xml中可以在bean元素中通过autowire属性来设置自动注入的方式&#xff1a; <bean id"" class"" autowire"byType|byName|constructor|default" /> byName&#xff1a;按照名称进行注入 byType&#xff1a;按类型进行注入 constr…

软件报错:找不到vcomp140.dll的原因分析,总结六种解决vcomp140.dll的方法

vcomp140.dll是一个与MicrosoftVisualCRedistributableforVisualStudio2015相关的动态链接库文件&#xff0c;主要用于支持并行编程。这个DLL文件是VisualC库的一部分&#xff0c;用来处理并行计算&#xff0c;特别是那些利用OpenMP(OpenMulti-Processing)技术编写的程序。分析…

android 项目多电脑共用github及github项目迁移

背景&#xff1a;最新需要将公司的项目在本地电脑进行使用&#xff0c;将项目迁移到本地电脑。 操作步骤&#xff1a; ssh 公钥绑定github上 : https://blog.csdn.net/mo_sss/article/details/137910910 用github进行克隆时无法下载&#xff08;已将本地创建的公钥上传gith…

常用元器件使用方法18:单节锂电池充电管理芯片XT4052的使用方法

文章目录 一、产品概述二、产品特点三、典型应用电路图四、引脚分配五、应用电路六、PCB应用建议一、产品概述 XT4052 是一个完善的单片锂离子电池恒流/恒压线形电源管理芯片。它薄的尺寸和小的外包装使它便于便携应用。更值得一提的是,XT4052专门设计适用于USB的供电规格。得…

java八股-分布式服务的接口幂等性如何设计?

文章目录 接口幂等token Redis分布式锁 原文视频链接&#xff1a;讲解的流程特别清晰&#xff0c;易懂&#xff0c;收获巨大 【新版Java面试专题视频教程&#xff0c;java八股文面试全套真题深度详解&#xff08;含大厂高频面试真题&#xff09;】 https://www.bilibili.com/…

python的字体如何调整

首先打开pycharm&#xff0c;新建一个Python文件&#xff0c;点击“File”&#xff0c;在下拉菜单栏中选择“New”。 然后点击“File”&#xff0c;输入我们的Python文件名称&#xff0c;后缀一定要填写“.py”&#xff0c;要不会出错&#xff0c;单击“OK”。 在新文件中输入代…

【Linux系列】Chrony时间同步服务器搭建完整指南

1. 简介 Chrony是一个用于Linux系统的高效、精准的时间同步工具&#xff0c;通常用于替代传统的NTP&#xff08;Network Time Protocol&#xff09;服务。Chrony不仅在系统启动时提供快速的时间同步&#xff0c;还能在时钟漂移较大的情况下进行及时调整&#xff0c;因此广泛应…

Ubuntu问题 -- 使用scp将本机文件传输至ubuntu服务器中

目的 临时没有文件传输工具使用一条命令快速传输指定文件或文件夹 使用scp命令 传输指定文件 scp -P 22 D:\Storage\myCache\UE\Linux_ue_demo.zip txl10.1.112.93:/home/txl-P是远程机器的ssh端口号, SCP&#xff08;安全复制协议&#xff09;使用和SSH&#xff08;安全外壳…

Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:电影院后台管理系统(前后端源码 + 数据库 sql 脚本)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 项目介绍 2.0 用户登录功能 3.0 用户管理功能 4.0 影院管理功能 5.0 电影管理功能 6.0 影厅管理功能 7.0 电影排片管理功能 8.0 用户评论管理功能 9.0 用户购票功…

PHP 函数的未来发展有哪些变化呢

PHP 8.0 引入了一些新特性&#xff0c;比如 JIT 编译器、联合类型、nullsafe 运算符等。 JIT 编译器 (Just-In-Time Compiler)&#xff1a;PHP 8.0 引入了实验性的 JIT 编译器&#xff0c;可以显著提高代码执行速度。联合类型&#xff08;Union Types&#xff09;&#xff1a;…

Java文件遍历那些事

文章目录 一、简要概述二、文件遍历几种实现1. java实现2. Apache common-io3. Spring 三、最终结论 一、简要概述 文件遍历基本上是每个编程语言具备的基本功能&#xff0c;Java语言也不例外。下面我们以java原生实现&#xff0c;Apache common-io、spring框架实现为例来比较…

【网络安全设备系列】12、态势感知

0x00 定义&#xff1a; 态势感知&#xff08;Situation Awareness&#xff0c;SA&#xff09;能够检测出超过20大类的云上安全风险&#xff0c;包括DDoS攻击、暴力破解、Web攻击、后门木马、僵尸主机、异常行为、漏洞攻击、命令与控制等。利用大数据分析技术&#xff0c;态势感…

MySQL 启动失败问题分析与解决方案:`mysqld.service failed to run ‘start-pre‘ task`

目录 前言1. 问题背景2. 错误分析2.1 错误信息详解2.2 可能原因 3. 问题排查与解决方案3.1 检查 MySQL 错误日志3.2 验证 MySQL 配置文件3.3 检查文件和目录权限3.4 手动启动 MySQL 服务3.5 修复 systemd 配置文件3.6 验证依赖环境 4. 进一步优化与自动化处理结语 前言 在日常…

企业如何落地搭建商业智能BI系统

随着新一代信息化、数字化技术的应用&#xff0c;引发了新一轮的科技革命&#xff0c;现代化社会和数字化的联系越来越紧密&#xff0c;数据也变成继土地、劳动力、资本、技术之后的第五大生产要素&#xff0c;这一切都表明世界已经找准未来方向&#xff0c;前沿科技也与落地并…

docker搭建nginx

一. 直接启动nginx镜像 1. 下载nginx镜像 docker pull nginx 2. 运行镜像 docker run -p 8080:80 --name web -d nginx 3. 网址查看 xx.xx.xx.xx:8080 二. 挂在文件启动nginx镜像 1. 拷贝docker文件到本地 docker cp web:/etc/nginx/nginx.conf /root/data/config/nginx…

Java开发工程师最新面试题库系列——Java基础部分(附答案)

如果你有更好的想法请在评论区留下您的答案&#xff0c;一起交流讨论# 面向对象有哪些特征&#xff1f; 答&#xff1a;继承、封装、多态 JDK与JRE的区别是什么&#xff1f; 答&#xff1a;JDK是java开发时所需环境&#xff0c;它包含了Java开发时需要用到的API&#xff0c;JRE…