20241124 Typecho 视频插入插件

devtools/2024/11/25 8:56:29/

博文免不了涉及到视频插入这些,网上的插件都或多或少的比较重,和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"><?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.ppmy.cn/devtools/136798.html

相关文章

前端项目支持tailwindcss写样式

安装 npm install -D tailwindcss npx tailwindcss init配置 tailwind.config.js //根据个人需求填写&#xff0c;比如vue简单配置 /** type {import(tailwindcss).Config} */ module.exports {darkMode: "class",corePlugins: {preflight: false},content: [&quo…

Spring—Bean工厂进一步学习

基于xml的spring应用 XML配置方式: 功能描述: bean的id和全限定名配置 通过name设置bean的别名&#xff0c;通过别名也能直接获取到bean实例 bean的作用范围 bean的实例化时机&#xff0c;是否延迟加载 bean实例化后自动执行的初识方法,method指定方法 bean实例销毁前的方法 设…

Python XML 解析

Python XML 解析 XML&#xff08;eXtensible Markup Language&#xff09;是一种用于存储和传输数据的标记语言。它是一种自我描述的语言&#xff0c;允许用户定义自己的标签和文档结构。Python 提供了多种库来解析 XML 数据&#xff0c;其中最常用的是 xml.etree.ElementTree…

Elasticsearch 实战应用:全面解析与实践

Elasticsearch 是一个基于 Lucene 构建的开源分布式搜索引擎,广泛应用于日志分析、全文搜索、实时分析等场景。它的高性能、高可扩展性和强大的查询能力使其成为现代应用中的核心组件之一。在本文中,我们将介绍 Elasticsearch 的基本概念、配置与搭建,并通过一个实际应用案例…

【unity小技巧】unity常用的编辑器扩展

文章目录 1. **自定义 Inspector&#xff08;Inspector 面板&#xff09;**示例&#xff1a; 2. **Editor Window&#xff08;自定义编辑器窗口&#xff09;**示例&#xff1a; 3. **PropertyDrawer&#xff08;自定义属性绘制&#xff09;**示例&#xff1a; 4. **菜单项&…

SQL进阶技巧:如何分析互逆记录?| 相互关注为例分析

目录 1 什么是互逆记录 2 互逆记录的解决方案 3 互逆记录应用【互相关注的人】 3.1 场景描述 3.2 数据准备

Excel求和如何过滤错误值

一、问题的提出 平时&#xff0c;我们在使用Excel时&#xff0c;最常用的功能就是求和了&#xff0c;一说到求和你可能想到用sum函数&#xff0c;但是如果sum的求和区域有#value #Div等错误值怎么办&#xff1f;如下图&#xff0c;记算C列中工资的总和。 直接用肯定会报错&…

Python脚本消费多个Kafka topic

在Python中消费多个Kafka topic&#xff0c;可以使用kafka-python库&#xff0c;这是一个流行的Kafka客户端库。以下是一个详细的代码示例&#xff0c;展示如何创建一个Kafka消费者&#xff0c;并同时消费多个Kafka topic。 1.环境准备 &#xff08;1&#xff09;安装Kafka和…