带有输入选项的 WordPress TinyMCE 自定义样式

Question

我想为 wordpress tiny mce 添加自定义样式。有大量的教程可以添加一个简单的选项，比如“highlight”，它将添加一个带有“highlight”类的 span。点赞：https://torquemag.io/2016/09/add-custom-styles-wordpress-editor-manually-via-plugin/

但我需要的是添加其他数据的选项，例如添加链接。你标记单词，点击链接按钮，就会显示一个输入的 url。

我想达到什么目标？自定义样式“缩写”（https://get.foundation/sites/docs/typography-base.html）。我正在考虑的解决方案是，用户标记单词，选择缩写样式，显示输入的描述。鳍。

希望你能帮帮我！

Answer 1

所以我在大多数 WordPress 项目中都有类似的东西。我有一个 TinyMCE 工具栏按钮，它有几个输出引导按钮的字段。

您需要做的是创建自己的 TinyMCE“插件”，要实现这一点，您需要两个部分：

1. 一个 javascript 文件（您的插件）
2. 一个 PHP 的 sn-p，用于将您的 javascript（插件）加载到 TinyMCE 编辑器中。

首先我们创建插件：

/js/my-tinymce-plugin.js

( function() {
    'use strict';

    // Register our plugin with a relevant name
    tinymce.PluginManager.add( 'my_custom_plugin', function( editor, url ) {

        editor.addButton( 'my_custom_button', {
            tooltip: 'I am the helper text',
            icon: 'code', // @link https://www.tiny.cloud/docs/advanced/editor-icon-identifiers/
            onclick: function() {

                // Get the current selected tag (if has one)
                var selectedNode = editor.selection.getNode();

                // If we have a selected node, get the inner content else just get the full selection
                var selectedText = selectedNode ? selectedNode.innerHTML : editor.selection.getContent();

                // Open a popup
                editor.windowManager.open( {
                    title: 'My popup title',
                    body: [

                        // Create a simple text field
                        {
                            type: 'textbox',
                            name: 'field_name_textbox',
                            label: 'Field label',
                            value: selectedText || 'I am a default value' // Use the selected value or set a default
                        },

                        // Create a select field
                        {
                            type: 'listbox',
                            name: 'field_name_listbox',
                            label: 'Field list',
                            value: '',
                            values: {
                                'value': 'Option 1',
                                'value-2': 'Option 2'
                            }
                        },

                        // Create a boolean checkbox
                        {
                            type: 'checkbox',
                            name: 'field_name_checkbox',
                            label: 'Will you tick me?',
                            checked: true
                        }
                    ],
                    onsubmit: function( e ) {
                        // Get the value of our text field
                        var textboxValue = e.data.field_name_textbox;

                        // Get the value of our select field
                        var listboxValue = e.data.field_name_listbox;

                        // Get the value of our checkbox
                        var checkboxValue = e.data.field_name_checkbox;

                        // If the user has a tag selected
                        if ( selectedNode ) {
                            // Do something with selected node
                            // For example we can add a class
                            selectedNode.classList.add( 'im-a-custom-class' );
                        } else {
                            // Insert insert content
                            // For example we will create a span with the text field value
                            editor.insertContent( '<span>' + ( textboxValue || 'We have no value!' ) + '</span>' );
                        }
                    }
                } );
            }
        } );

    } );

} )();

现在我们将下面的 sn-p 添加并修改到您的主题 functions.php 文件中。

/functions.php

<?php
add_action( 'admin_head', function() {
    global $typenow;

    // Check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }

    // Check if WYSIWYG is enabled
    if ( user_can_richedit() ) {

        // Push my button to the second row of TinyMCE actions
        add_filter( 'mce_buttons', function( $buttons ) {
            $buttons[] = 'my_custom_button'; // Relates to the value added in the `editor.addButton` function
            return $buttons;
        } );

        // Load our custom js into the TinyMCE iframe
        add_filter( 'mce_external_plugins', function( $plugin_array ) {

            // Push the path to our custom js to the loaded scripts array
            $plugin_array[ 'my_custom_plugin' ] = get_template_directory_uri() . '/js/my-tinymce-plugin.js';
            return $plugin_array;
        } );
    }
} );

如果您与本示例不同，请务必更新文件名和路径！

WordPress 使用 TinyMCE 4，并且缺少相关文档，因此准确找到所需内容可能会很痛苦。

这只是一个起点，尚未经过测试。

希望这会有所帮助！

---

编辑

下面的代码应该可以帮助您插入“缩写”标签和title 属性。

( function() {
    'use strict';

    tinymce.PluginManager.add( 'my_custom_plugin', function( editor, url ) {

        editor.addButton( 'my_custom_button', {
            tooltip: 'Insert an abbreviation',
            icon: 'plus',
            onclick: function() {

                var selectedNode = editor.selection.getNode();
                var selectedText = selectedNode ? selectedNode.innerHTML : editor.selection.getContent();

                editor.windowManager.open( {
                    title: 'Insert an abbreviation',
                    body: [

                        {
                            type: 'textbox',
                            name: 'abbreviation',
                            label: 'The abbreviated term',
                            value: selectedText
                        },

                        {
                            type: 'textbox',
                            name: 'title',
                            label: 'The full term',
                            value: ''
                        }

                    ],
                    onsubmit: function( e ) {

                        var abbreviation = e.data.abbreviation;
                        var title = e.data.title.replace( '"', '\"' );

                        if ( selectedNode && selectedNode.tagName === 'ABBR' ) {
                            selectedNode.innerText = abbreviation;
                            selectedNode.setAttribute( 'title', title );
                        } else {
                            editor.insertContent( '<abbr title="' + title + '">' + abbreviation + '</abbr>' );
                        }
                    }
                } );
            }
        } );

    } );

} )();