如何重新映射其中一个TinyMCE高级编辑器按钮以打开WordPress媒体库?

时间:2021-07-11 作者:Sanu_012

我正在为我的Wordpress网站使用TinyMCE高级编辑器。我希望前端的用户能够使用Wordpress媒体库上传图像,为此,我想重新映射Insert/edit image 按钮,或添加新按钮(以更可行的为准)以打开Wordpress媒体库,以便作者可以向其图像添加标题和alt文本:

enter image description here

我一直在网上搜索这方面的信息,但还没有找到任何有成效的结果。

有人能在这方面提供帮助吗?

1 个回复
SO网友:Morteza Mohammadi

您需要做的第一件事是能够在您使用的页面上加载WordPress媒体管理器。这意味着您需要加载WordPress的核心,或者从WP调用media方法。下面的代码将加载WordPress core并查询所有需要调用媒体管理器的文件。

require_once( \'wp-load.php\' );
wp_enqueue_media();
接下来要做的事情是创建一个javascript函数来加载WordPress媒体管理器。以下函数将执行此操作,然后将所选图像返回到触发它的TinyMCE实例。原因是,页面上可能有多个TinyMCE实例,您需要确保将数据返回到正确的实例。

<script type="text/javascript">
function wpmediabrowser(field_name, url, type, win)
{
    var image = wp.media({ 
        title: \'Upload Image\',
        multiple: false
    }).open().on(\'select\', function(e){
    var uploaded_image = image.state().get(\'selection\').first();
        jQuery("#" + field_name).val(uploaded_image["attributes"]["url"]);
        var arr = field_name.split(\'-\');
        var field = arr[0];
        var number = parseInt(field.split(\'_\')[1]) + 1;
        var descriptionid = field.split(\'_\')[0] + "_" + number;
        jQuery("#" + descriptionid).val(uploaded_image["attributes"]["description"]);
    });
}
</script>
您可以通过使用a href调用该函数来测试其是否工作。要做的最后一步是将此函数链接到TinyMCE的init中。以下代码就是您所需要的全部代码

"file_browser_callback: wpmediabrowser,";
TinyMCE init中的此变量将告诉应用程序您正在使用文件管理器,并在单击browse按钮时调用名为“wpmediabrowser”的函数。当您从WordPress文件管理器中选择图像时,它会将图像url返回到框中。

相关推荐

为什么我不能执行wp-includes文件夹下的php文件?

我正在调整WordPress以更好地理解它,玩它。出于个人目的。但从加载自定义文件/wp-includes 文件夹无法工作。我试图添加信息。php文件位于/wp-includes 包含phpinfo() 当我尝试通过以下方式在浏览器中访问它时example.com/wp-includes/info.php, 服务器返回错误503。文件夹权限设置为775,文件权限设置为644。Important note: 如果我重命名wp-includes 文件夹,例如wp-include, 那就行了!我联系了主机支持人