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

尽管他们可能不知道其名称，但是使用WordPress的每个人都熟悉TinyMCE编辑器 。 它是创建或编辑内容时所使用的编辑器–具有用于创建粗体文本，标题，文本对齐方式等的按钮的编辑器。 这就是我们将在这篇文章中看到的内容，我将向您展示如何添加功能以及如何在插件中使用它 。

该编辑器基于名为TinyMCE的独立于平台的Javascript系统构建，该系统已在Web上的许多项目中使用。 它有一个很棒的API，WordPress可让您利用它创建自己的按钮并将其添加到WordPress中的其他位置。

添加可用按钮

WordPress使用TinyMCE中提供的一些选项来禁用特定按钮（例如上标，下标和水平规则），以清理界面。 可以将它们添加回去而不必大惊小怪。

第一步是创建一个插件。 查看有关如何执行此操作的WordPress代码库 。 简而言之，您可以在wp-content / plugins文件夹中创建一个名为“ my-mce-plugin”的文件夹。 创建一个具有PHP扩展名的同名文件： my-mce-plugin.php 。

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

<?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文档中的控件列表。

创建我们自己的按钮

从头开始创建我们自己的按钮怎么样？ 许多网站都使用Prism进行代码突出显示，这使用非常语义的方法来标记代码段。 您必须将代码包装在<code>和<pre>标记内，如下所示：

<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个问题。

他们忽略了提及在pre_code_add_button（）函数中添加的按钮名称必须与pre_code_add_javascript（）函数中$ plugin_array变量的键相同 。 稍后，我们还需要在Javascript中使用相同的字符串 。

一些教程还使用附加的admin_head挂钩将所有内容包装起来 。 尽管这将起作用，但不是必需的，并且由于食典不使用它，因此应避免使用它。

下一步是编写一些Javascript来实现我们的功能。 这是我曾经一次获取所有<pre>和<code>标记的内容。

(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" );
            }
        });
    });
})();

其中大部分是由应如何编码TinyMCE插件决定的，您可以在TinyMCE文档中找到有关该插件的一些信息。 现在，您需要知道的是按钮的名称 （pre_code_button） 应该在第2行和第3行中使用。如果您不使用图标，则会在第4行中显示“文本”的值（我们将请稍后看一下添加图标）。

onclick方法指示单击该按钮时的操作。 我想用它来包装前面讨论HTML结构中的选定文本。

可以使用tinyMCE.activeEditor.selection.getContent()来获取所选文本。 然后，我将元素包装并插入它，用新元素替换突出显示的内容。 我还添加了新行，因此可以轻松地在code元素之后开始编写。

如果要使用图标，建议从WordPress附带的Dashicons集中选择一个。 开发人员参考有一个很好的工具来查找图标及其CSS / HTML /字形。 找到代码符号，并注意其下的unicode： f475 。

我们需要在插件上附加一个样式表，然后添加一个简单的样式来显示我们的图标。 首先，让我们将样式添加到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";
}

请注意，该按钮将收到mce-i-[your class here]类，您可以使用它来定位和添加样式。 使用前面的unicode值将字体指定为破折号和内容。

在其他地方使用TinyMCE

插件通常会创建textareas来输入更长的文本 ，如果我们也可以在其中使用TinyMCE，那不是很好吗？ 当然可以，这很容易。 wp_editor（）函数允许我们在admin中的任何位置输出一个，这是它的外观：

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

第一个参数设置框的初始内容 。 例如，这可用于从数据库加载选项。 第二个参数设置HTML元素的ID。 第三个参数是设置数组。 要了解可以使用的确切设置，请参阅wp编辑器文档 。

最重要的设置是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/