在WordPress中使用TinyMCE编辑器[指南]

这就是我们将在这篇文章中看到的内容，我将向您展示如何添加功能以及如何在插件中使用它 。

它是创建或编辑内容时所使用的编辑器–具有用于创建粗体文本，标题，文本对齐方式等的按钮的编辑器。

尽管他们可能不知道它的名字，但是使用WordPress的每个人都熟悉TinyMCE编辑器 。

它有一个很棒的API，WordPress可让您利用它创建自己的按钮并将其添加到WordPress中的其他位置。

该编辑器基于称为TinyMCE的独立于平台的Javascript系统构建，该系统已在Web上的许多项目中使用。

添加可用按钮

可以将它们添加回去而不必大惊小怪。

WordPress使用TinyMCE中提供的一些选项来禁用特定的按钮（例如上标，下标和水平规则），以清理界面。

创建一个具有PHP扩展名的同名文件： my-mce-plugin.php 。

简而言之，您可以在wp-content / plugins文件夹中创建一个名为“ my-mce-plugin”的文件夹。

查看有关如何执行此操作的WordPress代码库 。

第一步是创建一个插件。

在该文件内粘贴以下内容：

<?php
/**
    *Plugin Name: My TinyMCE plugin
    *Description: A plugin for adding custom functionality to the WordPress TinyMCE plugin.
*/

从现在开始，所有代码都可以粘贴到该文件中。

完成后，您应该能够在WordPress中选择此插件并**它。

这是允许我们启用我提到的3个按钮的代码：

因此，回到启用一些内置但隐藏的按钮 。

add_filter( 'mce_buttons_2', 'my_tinymce_buttons' );
function my_tinymce_buttons( $buttons ) {
    $buttons[] = 'superscript';
    $buttons[] = 'subscript';
    $buttons[] = hr;
    return $buttons;
}

要知道可以添加哪些按钮以及它们的名称，请查看TinyMCE文档中的控件列表。

创建我们自己的按钮

您必须将代码包装在<code>和<pre>标记内，如下所示：

许多网站使用Prism突出显示代码，该代码使用非常语义化的方法标记代码段。

从头开始创建我们自己的按钮怎么样？

<pre><code>$variable = 'value'</code></pre>

让我们创建一个按钮来为我们做到这一点！

让我们开始吧！

您将需要添加一个按钮，加载一个javascript文件，然后实际编写Javascript文件的内容。

这是一个三步过程。

添加按钮并加载Javascript文件非常简单，这是我用来完成代码的代码：

add_filter( 'mce_buttons', 'pre_code_add_button' );
function pre_code_add_button( $buttons ) {
    $buttons[] = 'pre_code_button';
    return $buttons;
}
add_filter( 'mce_external_plugins', 'pre_code_add_javascript' );
function pre_code_add_javascript( $plugin_array ) {
	$plugin_array['pre_code_button'] = get_template_directory_uri() . '/tinymce-plugin.js';
	return $plugin_array;
}

当我看到有关此的教程时，经常会遇到2个问题。

稍后，我们还需要在Javascript中使用相同的字符串 。

他们忽略了提及在pre_code_add_button（）函数中添加的按钮名称必须与pre_code_add_javascript（）函数中$ plugin_array变量的键相同 。

尽管这将起作用，但不是必需的，并且由于食典不使用它，因此应避免使用它。

一些教程还使用附加的admin_head挂钩将所有内容包装起来 。

这是我曾经一次获取所有<pre>和<code>标记的内容。

下一步是编写一些Javascript来实现我们的功能。

(function() {
    tinymce.PluginManager.add('pre_code_button', function( editor, url ) {
        editor.addButton( 'pre_code_button', {
            text: 'Prism',
            icon: false,
            onclick: function() {
            var selected = tinyMCE.activeEditor.selection.getContent();
            var content = '<pre><code>' + selected + '</code></pre>';
            editor.insertContent( content + "\n" );
            }
        });
    });
})();

现在，您只需要知道按钮的名称 （pre_code_button） 应该在第2行和第3行中使用。如果您不使用图标，则会在第4行中显示“文本”的值（我们将请稍后看一下添加图标）。

其中大部分是由应如何编码TinyMCE插件决定的，您可以在TinyMCE文档中找到有关该插件的一些信息。

我想用它来包装前面讨论HTML结构中的选定文本。

onclick方法指示单击该按钮时的操作。

我还添加了新行，因此可以轻松地在code元素之后开始编写。

然后，我将元素包装并插入它，用新元素替换突出显示的内容。

可以使用tinyMCE.activeEditor.selection.getContent()来获取所选文本。

找到代码符号，并注意其下的unicode： f475 。

开发人员参考有一个很好的工具来查找图标及其CSS / HTML / Glyph。

如果要使用图标，建议从WordPress附带的Dashicons集中选择一个。

首先，让我们将样式添加到WordPress：

我们需要在插件上附加一个样式表，然后添加一个简单的样式来显示我们的图标。

add_action( 'admin_enqueue_scripts', 'pre_code_styles' );
function pre_code_styles() {
	wp_enqueue_style( 'pre_code_button', plugins_url( '/style.css', __FILE__ ) );
}

返回Javascript，然后在addButton函数中的图标旁边，将“ false”替换为您希望按钮具有的类–我使用了pre_code_button 。

现在在您的插件目录中创建style.css文件，并添加以下CSS：

i.mce-i-pre_code_button:before {
	font-family:dashicons;
	content: "\f475";
}

使用前面的unicode值将字体指定为破折号和内容。

请注意，该按钮将收到mce-i-[your class here]类，您可以使用它来定位和添加样式。

在其他地方使用TinyMCE

wp_editor（）函数允许我们在admin中的任何位置输出一个，这是它的外观：

当然可以，这很容易。

插件通常会创建textareas来输入更长的文本 ，如果我们也可以在其中使用TinyMCE，那不是很好吗？

wp_editor( $initial_content, $element_id, $settings );

要了解可以使用的确切设置，请查看wp编辑器文档 。

第三个参数是设置数组。

第二个参数设置HTML元素的ID。

例如，这可用于从数据库加载选项。

第一个参数设置框的初始内容 。

这是在选项页面中使用时我的编辑器的外观：

这将填充textarea元素的name属性，从而使您可以轻松保存数据。

最重要的设置是textarea_name 。

$settings = array( 'textarea_name' => 'buyer_bio' );

wp_editor( get_option('buyer_bio'), 'buyer_bio', $settings );

这等效于编写以下代码，这将导致一个简单的文本区域：

<textarea id='buyer_bio' class='buyer_bio'><?php get_option( 'buyer_bio' ) ?></textarea>

结论

它允许那些不想格式化其内容的人只键入内容并完成它，而那些想摆弄它的人则花费尽可能多的时间来获得正确的内容。

TinyMCE编辑器是一种用户友好的方式，可让用户在输入内容时具有更大的灵活性。

如果您知道一个特别好的TinyMCE插件或用例，对您有很大帮助，请在下面的评论中告诉我们！

创建新的按钮和功能可以通过非常模块化的方式完成，而我们只是在摸索所有可能性。

翻译自: https://www.hongkiat.com/blog/wordpress-tinymce-editor/