如何给wordpress的编辑器添加一个自定义按钮,并且实现插入功能

简介:

1、添加按钮

 

在  functions.php  文件里面添加下面代码:

add_action('media_buttons', 'add_my_media_button');

function add_my_media_button() {
    echo '<a href="#" id="insert-my-media" class="button">Add my media</a>';
}

添加后,登录后台编辑文章看到如图所示:

 

2、添加命令

继续添加代码,引用自己定义的JS,我命名为  media_button.js  ,存放好路径之后,自己修改  path/to/  为存放的路径。

function include_media_button_js_file() {
    wp_enqueue_script('media_button', 'path/to/media_button.js', array('jquery'), '1.0', true);
}

 

3、添加JS命令

 media_button.js 添加下面代码:

复制代码
jQuery(function($) {
    jQuery(document).ready(function(){
            jQuery('#insert-my-media').click(open_media_window);
    });
    
    function open_media_window() {
        if (this.window === undefined) {
            this.window = wp.media({
                    title: 'Insert a media',
                    library: {type: 'image'},
                    multiple: false,
                    button: {text: 'Insert'}
                });
     
            var self = this; // Needed to retrieve our variable in the anonymous function below
            this.window.on('select', function() {
                    var first = self.window.state().get('selection').first().toJSON();
                    wp.media.editor.insert('[myshortcode id="' + first.id + '"]');
                });
        }
     
        this.window.open();
        return false;
    }
});
复制代码

就可以实现点击按钮弹出媒体选择框,插入之后自动插入短网址。




本文转自黄聪博客园博客,原文链接:http://www.cnblogs.com/huangcong/p/4551206.html,如需转载请自行联系原作者

相关文章
|
7月前
|
Shell Linux Apache
学习Nano编辑器:入门指南、安装步骤、基本操作和高级功能
学习Nano编辑器:入门指南、安装步骤、基本操作和高级功能
1018 0
|
8月前
|
设计模式 Java 数据库连接
只要100行代码,实现文本编辑器中的草稿箱功能
大家都用过网页中的富文本编辑器,编辑器通常都会附带草稿箱、撤销等操作。下面用一段代码来实现一个这样的功能。假设,我们在GPer社区中发布一篇文章,文章编辑的过程需要花很长时间,中间也会不停地撤销、修改,甚至可能要花好几天才能写出一篇精品文章,因此可能会将已经编辑好的内容实时保存到草稿箱。
73 1
|
8月前
|
前端开发
vue3 中wangEditor富文本编辑器上传图片功能
vue3 中wangEditor富文本编辑器上传图片功能
150 0
|
1月前
|
Linux iOS开发 MacOS
Star 10.4k!推荐一款国产跨平台、轻量级的文本编辑器,内置代码对比功能
Star 10.4k!推荐一款国产跨平台、轻量级的文本编辑器,内置代码对比功能
|
6月前
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
CocosCreator3.8研究笔记(二十三)CocosCreator 动画系统-动画编辑器相关功能面板说明
|
10月前
|
PHP
WordPress 的最佳设计和自定义页面布局生成器是什么吗?
WordPress 有很多设计和自定义页面布局生成器可供选择,它们都有不同的特点和优缺点,最佳的选择取决于您的需求和偏好。以下是一些常用和受欢迎的 WordPress 页面布局生成器:
|
11月前
|
存储 JSON iOS开发
Apple 的 plist 编辑器入门指南:基础操作与高级功能详解
【摘要】 PlistEdit Pro是一款专为macOS编写的最高级属性列表Plist编辑器。对于Mac和IOS开发人员来说,编写应用程序时必须编辑各种列表文件。PlistEdit Pro通过提供直观且功能强大的界面,使编辑这些文件更加容易。它不仅能够复制和粘贴或拖放属性列表数据,还提供强大的搜索和替换功能,并定义了可轻松访问属性列表中各种标准文件中最常用键的结构。有经验的用户还可以从浏览器中提取Pl...
|
12月前
|
搜索推荐 前端开发 PHP
wordpress建站如何自定义404页面
当在 WordPress 上创建自定义 404 页面比以往任何时候都更简单时,不要用错误页面来烦扰您的用户。这里有一些不同的方法。
|
存储 JSON JavaScript
fabric.js开发图片编辑器可以实现哪些功能?多图
使用fabric.js开发了图片编辑器,用文字加动图的形式直观的分享出来,帮助做功能参考,项目已开源。
fabric.js开发图片编辑器可以实现哪些功能?多图
|
JavaScript
在vue里用codemirror实现代码编辑器功能?
在vue里用codemirror实现代码编辑器功能?
453 0
在vue里用codemirror实现代码编辑器功能?