WP编辑器添加“添加表情”按钮

流年

309
文章

370
评论

2024年1月14日13:34:50评论322字数 1650阅读5分30秒

基于之前的代码，更改了部分css样式，按钮添加了一个表情字体图标。

字体图标：Dashicons图标

代码

可以根据自己的需要修改其中的css样式和更改Dashicons图标，不过我找了，只有这一个能代表表情的字体图标。

// 添加表情
function fa_get_wpsmiliestrans() {
    global $wpsmiliestrans;
    $wpsmilies = array_unique($wpsmiliestrans);
    $output = '';
    foreach($wpsmilies as $alt => $src_path) {
        $output .= '<a class="add-smily" data-smilies="'.$alt.'"><img src="'.get_bloginfo('template_directory').'/img/smilies/'.rtrim($src_path, "gif").'gif" /></a>';
    }
    return $output;
}

add_action('media_buttons_context', 'fa_smilies_custom_button');
function fa_smilies_custom_button($context) {
    $context .= '<style>.smilies-wrap{background:#fff;border: 1px solid #ccc;padding: 10px;position: absolute;top: 60px;width: 256px;display:none;border-radius: 3px;}.smilies-wrap img{height:24px;width:24px;cursor:pointer;margin-bottom:5px} .is-active.smilies-wrap{display:block} span.dashicons.dashicons-smiley {width: 20px;height: 20px;font-size: 20px;margin: 0 2px 0 0;}</style><a id="insert-media-button" style="position:relative" class="button insert-smilies add_smilies" title="添加表情" data-editor="content" href="javascript:;">
    <span class="dashicons dashicons-smiley"></span>添加表情
    </a><div class="smilies-wrap">'. fa_get_wpsmiliestrans() .'</div><script>jQuery(document).ready(function(){jQuery(document).on("click", ".insert-smilies", function() { if(jQuery(".smilies-wrap").hasClass("is-active")) { jQuery(".smilies-wrap").removeClass("is-active"); } else { jQuery(".smilies-wrap").addClass("is-active"); } }); jQuery(document).on("click", ".add-smily", function() { send_to_editor(" " + jQuery(this).data("smilies") + " "); jQuery(".smilies-wrap").removeClass("is-active"); return false; }); });</script>';
    return $context;
}