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.mzph.cn/diannao/62239.shtml

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

相关文章

css:项目

这是一个完整的网站制作的流程 美工会先制作一个原型图&#xff1a; 原型图写的不详细&#xff0c;就是体现一个网页大致的布局 然后美工再做一个psd样例图片 然后再交给程序员 项目 模块化开发&#xff1a;把代码的不同的样式封装起来&#xff0c;需要用到相同样式的标签就…

AWS EC2设置用户名密码登录

使用AWS EC2 设置用户名密码登录 步骤 1: 访问控制台 登录到AWS管理控制台。导航至 EC2 Dashboard。在左侧导航栏中选择 Instances。选择需要配置的实例。使用 EC2 Instance Connect 访问实例控制台。 步骤 2: 切换到 root 用户 打开终端或命令行工具&#xff0c;通过SSH连…

【通俗理解】Adaptive Gradient Algorithm(自适应梯度算法)——从梯度下降到优化器选择

【通俗理解】Adaptive Gradient Algorithm&#xff08;自适应梯度算法&#xff09;——从梯度下降到优化器选择 关键词提炼 #自适应梯度算法 #梯度下降 #学习率 #优化器 #Adam #RMSprop #机器学习 #深度学习 第一节&#xff1a;自适应梯度算法的类比与核心概念【尽可能通俗】…

Qt桌面应用开发 第九天(综合项目一 飞翔的鸟)

目录 1.鸟类创建 2.鸟动画实现 3.鼠标拖拽 4.自动移动 5.右键菜单 6.窗口透明化 项目需求&#xff1a; 实现思路&#xff1a; 创建项目导入资源鸟类创建鸟动画实现鼠标拖拽实现自动移动右键菜单窗口透明化 1.鸟类创建 ①鸟类中包含鸟图片、鸟图片的最小值下标和最大值…

Spring Boot 整合 Prometheus 实现资源监控

引言 在微服务架构流行的今天&#xff0c;服务的监控和管理变得尤为重要。Prometheus 作为一个开源的监控和告警工具&#xff0c;以其强大的数据采集、存储和查询能力&#xff0c;受到了众多开发者的青睐。Spring Boot 作为 Java 领域快速构建微服务的框架&#xff0c;与 Prom…

网络安全期末复习

第1章 网络安全概括 &#xff08;1&#xff09;用户模式切换到系统配置模式&#xff08;enable&#xff09;。 &#xff08;2&#xff09;显示当前位置的设置信息&#xff0c;很方便了解系统设置&#xff08;show running-config&#xff09;。 &#xff08;3&#xff09;显…

使用Python实现自动化邮件通知:当长时程序运行结束时

使用Python实现自动化邮件通知&#xff1a;当长时程序运行结束时 前提声明 本代码仅供学习和研究使用&#xff0c;不得用于商业用途。请确保在合法合规的前提下使用本代码。 目录 引言项目背景项目设置代码分析 导入所需模块定义邮件发送函数发送邮件 实现步骤结语全部代码…

Python学习35天

# 定义父类 class Computer: CPUNone MemoryNone diskNone def __init__(self,CPU,Memory,disk): self.disk disk self.Memory Memory self.CPU CPU def get_details(self): return f"CPU:{self.CPU}\tdisk:{self.disk}\t…

Opencv+ROS实现摄像头读取处理画面信息

一、工具 ubuntu18.04 ROSopencv2 编译器&#xff1a;Visual Studio Code 二、原理 图像信息 ROS数据形式&#xff1a;sensor_msgs::Image OpenCV数据形式&#xff1a;cv:Mat 通过cv_bridge()函数进行ROS向opencv转换 cv_bridge是在ROS图像消息和OpenCV图像之间进行转…

Spring Boot 动态数据源切换

背景 随着互联网应用的快速发展&#xff0c;多数据源的需求日益增多。Spring Boot 以其简洁的配置和强大的功能&#xff0c;成为实现动态数据源切换的理想选择。本文将通过具体的配置和代码示例&#xff0c;详细介绍如何在 Spring Boot 应用中实现动态数据源切换&#xff0c;帮…

Flink 任务启动脚本-V2(包括ck启动)

#!/bin/bash#crontab时设置&#xff0c;如果依赖其他环境变量配置&#xff0c;可以在脚本执行一下环境变量脚本 source /etc/profile# 进入脚本目录 curdirdirname "$0" curdircd "$curdir"; pwd echo "进入启动脚本目录 $curdir"# 定义应用程序…

C#设计模式——抽象工厂模式(重点)

文章目录 项目地址一、抽象工厂模式1.1 特性1.2 使用反射获取特性标记的类1.3 完整代码 项目地址 教程作者&#xff1a;教程地址&#xff1a; 代码仓库地址&#xff1a; 所用到的框架和插件&#xff1a; dbt airflow一、抽象工厂模式 工厂方法模式依然存在一个问题就是&…

LAMP环境的部署

一、软件安装介绍 在Linux系统中安装软件有rpm安装、yum安装、源码安装等方法&#xff0c;在这里主要给大家介绍 yum 安装&#xff0c;这是一种最简单方便的一种安装方法。 YUM&#xff08;Yellow dog Upadate Modifie&#xff09;是改进版的 RPM 管理器&#xff0c;很好地解…

『VUE』elementUI dialog的子组件created生命周期不刷新(详细图文注释)

目录 1. 测试代码分析令人迷惑的效果 分析原因解决方法 如何在dialog中反复触发created呢?总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 主要是在做表单的时候想要有一个编辑表单在dialog弹窗中出现,同时dialog调用的封装的…

项目实战:基于深度学习的人脸表情识别系统设计与实现

大家好&#xff0c;人脸表情识别是计算机视觉领域中的一个重要研究方向&#xff0c;它涉及到对人类情感状态的理解和分析。随着深度学习技术的发展&#xff0c;基于深度学习的人脸表情识别系统因其高精度和强大的特征学习能力而受到广泛关注。本文旨在探讨基于深度学习的人脸表…

QChart数据可视化

目录 一、QChart基本介绍 1.1 QChart基本概念与用途 1.2 主要类的介绍 1.2.1 QChartView类 1.2.2 QChart类 1.2.3QAbstractSeries类 1.2.4 QAbstractAxis类 1.2.5 QLegendMarker 二、与图表交互 1. 动态绘制数据 2. 深入数据 3. 缩放和滚动 4. 鼠标悬停 三、主题 …

Chrome和edge浏览器如何为任何网站强制暗模式

前言 因为我的编辑器是黑色&#xff0c;可能是看的时间长了比较喜欢这种颜色了&#xff0c;感觉白色有些刺眼。尤其是看文章时&#xff0c;两边的空白纯白色&#xff0c;所以强迫症搜素设置了谷歌浏览器和edge如何设置成黑色。 Chrome和edge浏览器如何为任何网站强制暗模式 前…

使用 Elastic 收集 Windows 遥测数据:ETW Filebeat 输入简介

作者&#xff1a;来自 Elastic Chema Martinez 在安全领域&#xff0c;能够使用 Windows 主机的系统遥测数据为监控、故障排除和保护 IT 环境开辟了新的可能性。意识到这一点&#xff0c;Elastic 推出了专注于 Windows 事件跟踪 (ETW) 的新功能 - 这是一种强大的 Windows 原生机…

k8s网络服务

k8s 中向外界提供服务的几种方法port-forward、NodePort&#xff0c;以及 更加常用的提供服务的资源ingress。 1 kubectl port-forward service/redis 6379:6379 现在k8s中有一个pod运行在6379&#xff0c;本机访问映射到6379上&#xff0c;它可以针对部署&#xff0c;服务&…

手动设置 IP 地址和使用 DHCP 在以下方面存在区别

手动设置 IP 地址和使用 DHCP 在以下方面存在区别&#xff1a; 配置过程 手动设置 IP 地址&#xff1a;需要用户手动输入 IP 地址、子网掩码、默认网关、DNS 服务器地址等网络配置参数。在 Windows 系统中&#xff0c;通常要打开 “控制面板”&#xff0c;进入 “网络和共享中…