Replace text by icon in TinyMCE toolbar


I added TinyMCE in the post comment textarea by adding this into my child theme function.php

function rich_text_comment_form( $args ) {
    wp_editor( '', 'comment', array(
        'media_buttons' => true, // show insert/upload button(s) to users with permission
        'textarea_rows' => '10', // re-size text area
        'dfw' => false, // replace the default full screen with DFW (WordPress 3.4+)
        'tinymce' => array(
            'theme_advanced_buttons1' => 'bold,italic,underline,strikethrough,bullist,numlist,code,blockquote,link,unlink,outdent,indent,undo,redo,fullscreen',
            'theme_advanced_buttons2' => '', // 2nd row, if needed
            'theme_advanced_buttons3' => '', // 3rd row, if needed
            'theme_advanced_buttons4' => '' // 4th row, if needed
    $args['comment_field'] = ob_get_clean();
    return $args;
add_filter( 'comment_form_defaults', 'rich_text_comment_form' );

And here is the result :

enter image description here

I try to replace the text inside the toolbar buttons by a font-icon. The problem is that’s not possible to add a pseudo-element to a input element. So I decides to wrap it into a label tag with this:

$('#qt_comment_toolbar input').each(function() {
    var id = $('#qt_comment_toolbar input').attr('id');
    $('#qt_comment_toolbar input').wrap('<label class"label-' + id + '" for="' + id + '"></label>');

But that didn’t work and I don’t understand why. I need to nest the input into a label, then I’ll be able to add a pseudo-element to that label. Here is the HTML part:

<div id="qt_comment_toolbar" class="quicktags-toolbar">
    <input type="button" id="qt_comment_strong" class="ed_button button button-small" aria-label="Bold" value="b">
    <input type="button" id="qt_comment_em" class="ed_button button button-small" aria-label="Italic" value="i">
    <input type="button" id="qt_comment_link" class="ed_button button button-small" aria-label="Insert link" value="link">
    <input type="button" id="qt_comment_block" class="ed_button button button-small" aria-label="Blockquote" value="b-quote">
    <input type="button" id="qt_comment_del" class="ed_button button button-small" aria-label="Deleted text (strikethrough)" value="del"><input type="button" id="qt_comment_ins" class="ed_button button button-small" aria-label="Inserted text" value="ins">
    <input type="button" id="qt_comment_img" class="ed_button button button-small" aria-label="Insert image" value="img">
    <input type="button" id="qt_comment_ul" class="ed_button button button-small" aria-label="Bulleted list" value="ul">
    <input type="button" id="qt_comment_ol" class="ed_button button button-small" aria-label="Numbered list" value="ol">
    <input type="button" id="qt_comment_li" class="ed_button button button-small" aria-label="List item" value="li">
    <input type="button" id="qt_comment_code" class="ed_button button button-small" aria-label="Code" value="code">
    <input type="button" id="qt_comment_more" class="ed_button button button-small" aria-label="Insert Read More tag" value="more">
    <input type="button" id="qt_comment_close" class="ed_button button button-small" title="Close all open tags" value="close tags">

Also, I don’t understand why TinyMCE is displaying text button instead of icons, as I see in the page/post editor (Gutenberg disabled, in visual mode). Is it a question TinyMCE theme or version?

enter image description here

And, last question, is there a way to use TinyMCE v5 in WP comments? I can add the script to my function.php but from there, I don’t know how to apply it to the comment textarea.

Hope I was clear enough. Thanks for reading this.

dragoeco 2 months 0 Answers 7 views 0

Leave an answer