TinyMCE编辑器添加下载面板

  • A+
所属分类:源码教程

很多时候,我们会在wordpress文章内插入下载链接,如果单纯做个超链接又不太明显,那就为你的wordpress添加一个下载面板。
最终效果
TinyMCE编辑器添加下载面板

以下为具体步骤

首先在tinymce编辑器添加一个按钮
TinyMCE编辑器添加下载面板

将以下代码加入到主题目录下的function.php里(注意,很多主题特别是商业主题cms主题的函数模板并非是原来的function.php。实际情况自己分析后进行修改)

// 短代码可视化插入按钮 ,先注册一个按钮
function my_add_mce_button() {
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
add_action('admin_head', 'my_add_mce_button');
function my_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_mce_button'] = get_template_directory_uri() .'/js/mce-button.js';//引入js文件
    return $plugin_array;
}
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'my_mce_button' );
    return $buttons;
}

//然后定义一个独立下载面板
function xdltable($atts, $content = null) {
    extract(shortcode_atts(array("source" => "","uptime" => "","fileinfo" => "","magnet" => "","xitong" => "","downlink" => "", ) , $atts));                  //定义一串数组
    return '<table class="dltable"><tbody><tr><td style="background-color:#F9F9F9;" rowspan="6"><p style="text-align: center;"><strong>下<br>载<br>面<br>板</strong></p></td><td><i class="fa fa-list-alt"></i>  文件来源 :' . $source . '</td><tr><td><i class="fa fa-th-large"></i>  上传时间 :' . $uptime . '</td></tr><tr><td><i class="fa fa-list-alt"></i>  文件详情 :' . $fileinfo . '</td><tr><td><i class="fa fa-magnet"></i>  磁力链接 :' . $magnet . '</td></tr><tr><td colspan="2"><i class="fa fa-download"></i>  下载地址 : ' . $content . '</td></tr></tbody></table>'; //下载面板是以表格的形式展示出来的,表格的样式可以自己改
}
add_shortcode('dltable', 'xdltable');
PS:

表格样式中这个fa fa-list-alt是一个图标库的样式,非常美观的一个图标库,名字是fontawesome,感兴趣的可以去看看

点击按钮后出现弹窗,输入完成后自动生成简码.
TinyMCE编辑器添加下载面板

以下为弹窗需要的代码,在主题目录下js文件夹内建立一个新的js文件命名为mce-button.js,没有JS文件夹的新建一个,接着把下面的代码加入新建的文件mce-button.js里面

(function() {
	tinymce.PluginManager.add('my_mce_button', function(editor, url) {  /*注意my_mce_button也就是插件的命名必须与function.php中的插件数组对应*/
		editor.addButton('my_mce_button', {
			text: '下载面板',
			icon: false,
			onclick: function() {
				function getNowFormatDate() {
					var date = new Date();
					var seperator1 = "-";
					var seperator2 = ":";
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					var strDate = date.getDate();
					if (month >= 1 && month <= 9) {
						month = "0" + month;
					}
					if (strDate >= 0 && strDate <= 9) {
						strDate = "0" + strDate;
					}
					var currentdate = year + "年" + month + "月" + strDate + "日";
					return currentdate;
				}
				editor.windowManager.open({
					title: '下载面板',
					body: [{
						type: 'textbox',
						name: 'sourceName',
						label: '文件来源',
						value: '网络'
					}, {
						type: 'textbox',
						name: 'fileinfoName',
						label: '文件描述',
						value: '文件大小 / 提取码: / 密码:',
						multiline: true,
						minWidth: 300,
						minHeight: 60
					}, {
						type: 'textbox',
						name: 'magnetName',
						label: '磁力链接',
						value: '例如:magnet:?xt=urn:btih:hash'
					}, {
						type: 'textbox',
						name: 'downname',
						label: '载点名称',
						value: '例如:百度网盘',
					}, {
						type: 'textbox',
						name: 'downlink',
						label: '下载地址',
						value: 'http://www.esocn.com/',
					}, ],
					onsubmit: function(e) {
						editor.insertContent("





  文件名称:  文件大小:
  磁力链接:
  下载地址:<a href='" + e.data.downlink + "' target='_blank' rel='nofollow'>" + e.data.downname + "</a>
  温馨提示:本站统一解压密码:www.esocn.com或esocn.com 网站资源均来源于网络,版权归原作者所有!
"); } }); } }); }); })();

最后演示的是本站修改过的下载面板,跟上面的有点不一样,都是大同小异





  文件名称:下载面板  文件大小:未知
  磁力链接:暂无
  下载地址:下载1    下载2    下载3    下载4    下载5
  温馨提示:本站统一解压密码:www.esocn.com或esocn.com 网站资源均来源于网络,版权归原作者所有!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: