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

Question

我想给wordpress tiny mce 添加自定义样式。有大量的教程只是添加一个简单的选项，如 "highlight"，它将添加一个带有 "highlight" class 的跨度。喜欢：https://torquemag.io/2016/09/add-custom-styles-wordpress-editor-manually-via-plugin/

但我需要的是添加额外数据的选项，例如添加 link。你标记单词，点击 link 按钮，输入 url 出现。

我想达到什么目的？自定义样式 "abbriation" (https://get.foundation/sites/docs/typography-base.html)。我想到的解决方案是，用户标记单词，选择缩写样式，然后显示描述输入。鳍

希望你能帮帮我！

Answer 1

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

您需要做的是创建您自己的 TinyMCE "plugin"，为此您需要两个部分：

一个javascript文件（你的插件）
PHP 的一个片段，用于将您的 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>' );
                        }
                    }
                } );
            }
        } );

    } );

} )();

现在我们将以下代码段添加并修改到您的主题 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 并且缺乏这方面的文档，因此很难准确找到您需要的内容。

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

希望对您有所帮助！

编辑

下面的代码应该可以帮助您插入 "abbreviations" 标签和 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>' );
                        }
                    }
                } );
            }
        } );

    } );

} )();

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

WordPress TinyMCE custom styles with input option

wordpress

tinymce

editor

编辑