Has wordpress line count

Use standard WordPress editor TinyMCE for comments

WordPress uses the JavaScript-based WYSIWYG editor TinyMCE for the admin area. We use it to write articles, for example, which playfully underline texts, integrate images and other media content or create complex tables.

In contrast, the standard comment function in WordPress is kept quite simple. If visitors to your website want to format their comments, they have to use HTML tags. Below most of the comment forms, you'll find a cryptic clue like this:

You can use the following HTML tags:

Seriously, how many blog visitors do you think will understand these mysterious HTML codes that they can use to edit their comments on your blog? Wouldn't it be great to give your visitors the TinyMCE editor, which is already available in the backend, as a tool with which they can intuitively format their comments - as they are used to from common word processing programs?

In this article I would like to explain to you with the help of a few lines of PHP code how to use the Standard WordPress editor TinyMCE for comments on your blog can use.

Editor TinyMCE for the frontend

The function was introduced with WordPress 3.3, which allows developers to add the visual editor in the frontend without any problems and thus greatly simplifies the formatting of content for users.

So that you can Visual Editor TinyMCE for comments copy the following code and paste it into the file of the theme you are using.

Path:

/ * ------------------------------------------------ ----------------------------- * / / * Use standard WordPress editor TinyMCE for comments * / / * https: // pixeltuner. de // wordpress-editor-tinymce-for-comments / * / / * --------------------------------- -------------------------------------------- * / // Editor TinyMCE load function comment_editor () {global $ post; ob_start (); wp_editor ('', 'comment', array ('textarea_rows' => 15, // number of lines for the text field 'teeny' => true // output of the minimal editor configuration)); $ editor = ob_get_contents (); ob_end_clean (); // make sure comment media is attached to parent post $ editor = str_replace ('post_id = 0', 'post_id ='. Here is the solution. function wp_editor_fix_scripts () {wp_enqueue_script ('jquery');} add_action ('wp_enqueue_scripts' , 'wp_editor_fix_scripts'); function wp_editor_reply_link ($ link) {return str_replace ('onclick =', 'data-onclick =', $ link);} add_filter ('comment_reply_link', 'wp_editor_reply_link'); function wp_editor_script () { > Save, done.

Result

As soon as you have saved the previous code correctly in the file, the standard comment form is replaced by the Visual Editor TinyMCE from WordPress replaced as the following screenshot shows:

Use the TinyMCE visual editor for WordPress comments

Explanations of the code

If you want to learn to understand the PHP code above instead of simply transferring it by copying & pasting the file, I would like to explain the individual functions of the code.

Customize the TinyMCE visual editor

You can customize the editor. So if you don't need some buttons for formatting, you can remove them from the toolbar of the visual tab. Or if you want to include additional buttons for formatting in the editor, e.g. for selecting the font color, font size and much more, then you can expand or reduce the TinyMCE settings for your needs yourself.

Let's take another look up at the PHP code for the function in line 10:

// load editor TinyMCE wp_editor ('', 'comment', array ('textarea_rows' => 15, // number of lines for the text field 'teeny' => true // output of the minimal version of the visual editor));

There we initially defined two settings:

  • The number of lines for the text field (line 11)
  • The output of the minimal version of the visual editor (line 12)

Since the standard setting for the TinyMCE is already set to, we no longer need this setting assignment in this function. So the visual editor is loaded by default. For this reason, function assignments should only be made if they do not correspond to the standard settings, as the following example shows.

In order to be able to adapt the TinyMCE settings individually, we are integrating all the desired formatting functions as standard buttons in the first editor line () within the toolbar.

Here you can take a look at all TinyMCE standard buttons.

The option is used with TinyMCE 3.x. As of WordPress 3.9, WordPress will integrate the TinyMCE 4 into the core.

Now let's add a few buttons (line 14):

// Load editor TinyMCE wp_editor ('', 'comment', array ('textarea_rows' => 15, // number of lines for the text field 'teeny' => true, // output of the minimal version of the visual editor 'tinymce' => array ('theme_advanced_buttons1' => 'bold, italic, underline, strikethrough, bullist, numlist, code, blockquote, link, unlink, outdent, indent, |, undo, redo, fullscreen', // buttons for formatting 'theme_advanced_buttons2' => '', // 2nd editor line, if necessary 'theme_advanced_buttons3' => '', // 3rd editor line, if necessary 'theme_advanced_buttons4' => '' // 4th editor line, if necessary).));

If you want to add more buttons and the button row in the toolbar does not provide enough space for the buttons, you can place more buttons in another row. A total of four rows in the toolbar are provided for this purpose.

However, you can remove these lines (lines 14-16) from your code if you don't plan to use them:

'tinymce' => array ('theme_advanced_buttons1' => 'bold, italic, underline, strikethrough, bullist, numlist, code, blockquote, link, unlink, outdent, indent, |, undo, redo, fullscreen', // buttons for Formatting 'theme_advanced_buttons2' => '', // 2nd editor line, if necessary 'theme_advanced_buttons3' => '', // 3rd editor line, if necessary 'theme_advanced_buttons4' => '' // 4th editor line, if necessary)

Customize text / HTML editor

Similar to the visual editor, you can add or remove Quicktag buttons influence the functionality of the HTML editor.

If you even want to do without the HTML editor completely, you only need the assignment for set to (line 16):

// Load editor TinyMCE wp_editor ('', 'comment', array ('textarea_rows' => 15, // number of lines for the text field 'teeny' => true, // output of the minimal version of the visual editor 'tinymce' => array ('theme_advanced_buttons1' => 'bold, italic, underline, strikethrough, bullist, numlist, code, blockquote, link, unlink, outdent, indent, |, undo, redo, fullscreen', // buttons for formatting), 'quicktags' => false));

Otherwise, you can add Quicktag buttons (lines 16-18):

// Load editor TinyMCE wp_editor ('', 'comment', array ('textarea_rows' => 15, // number of lines for the text field 'teeny' => true, // output of the minimal version of the visual editor 'tinymce' => array ('theme_advanced_buttons1' => 'bold, italic, underline, strikethrough, bullist, numlist, code, blockquote, link, unlink, outdent, indent, |, undo, redo, fullscreen', // buttons for formatting), 'quicktags' => array ('buttons' => 'strong, em, del, block, ul, ol, li, link, close')));

The following screenshot illustrates the implementation of the HTML Quicktag assignments:

HTML editor: Quicktag buttons

Exclude visual editor filter elements for non-admin users

WordPress filters the commented text for non-admin users. For example, lists, images or links for logged out visitors are excluded from the formatting. Therefore, we are now refusing the filter elements of the visual editor defined by WordPress for logged-out users through the following function:

// Exclude filter elements of the visual editor for non-admin users function wp_editor_allowed_tags () {global $ allowedtags; $ allowedtags ['ul'] = array (); $ allowedtags ['ol'] = array (); $ allowedtags ['li'] = array (); $ allowedtags ['strong'] = array (); $ allowedtags ['ins'] = array ('datetime' => true); $ allowedtags ['del'] = array ('datetime' => true); $ allowedtags ['pre'] = array ('lang' => true, 'line' => true); $ allowedtags ['span'] = array ('style' => true); $ allowedtags ['img'] = array ('width' => true, 'height' => true, 'src' => true, 'alt' => true); $ allowedtags ['a'] = array ('target' => true, 'href' => true, 'title' => true,); } add_action ('init', 'wp_editor_allowed_tags');

Now it is also possible for normal visitors to design their comments appropriately using the formatting spectrum of the visual editor.

Reply to existing comments

The editor for comments works quite well so far. But unfortunately you will find that there is a small problem with replying to existing comments: as soon as you want to reply to a comment, the editor is displayed, but it cannot be used. The editor appears to be frozen.

With the following final lines of code, the visual editor for comments will now work smoothly on your WordPress blog:

// wp_editor does not work when replying to comments. Here is the solution. function wp_editor_fix_scripts () {wp_enqueue_script ('jquery'); } add_action ('wp_enqueue_scripts', 'wp_editor_fix_scripts'); function wp_editor_reply_link ($ link) {return str_replace ('onclick =', 'data-onclick =', $ link); } add_filter ('comment_reply_link', 'wp_editor_reply_link'); function wp_editor_script () {?> Enough

With this manageable PHP code, it is possible to use the standard editor TinyMCE from WordPress for your comments. Finally, an end to misunderstanding HTML hints for your blog visitors. I hope you can work with this code!

If you have any unanswered questions, please feel free to leave your comment.

(Article image from opensourceway, cc)