单击按钮后，tinyMCE 光标位于文本中间

Question

在 WordPress 中，我的编辑器中有一个可操作的短代码按钮，我希望它能够在单击后在光标的最后一个位置周围添加两个短代码标签（一个开始，一个结束），但是我一直无法找到关于该主题的先前问答，我参考了 Command Identifiers 的 TinyMCE 文档。这是我的 shortcode.js 文件：

(function() {
    tinymce.PluginManager.add('foobar', function(editor, url) {
        editor.addButton('foobar', {
            title : 'This is just a test',
            text : '<foobar>',
            icon : false,
            onclick : function() {
                editor.execCommand(
                    "mceInsertContent",
                    false,
                    '[foobar][/foobar]'
                );
            }
        });
    });
})(jQuery);

所以一旦按钮 <foobar> 被点击它生成：

<foobar></foobar>cursor is here

光标在结束后 </foobar>。我在编辑器中使用了错误的方法吗？这可能是一个相关的问题，但如果我想构建另一个短代码，它会添加三行，例如：

<foobar>
<!-- Cursor lands here
</foobar>

能够在 tinyMCE 中控制光标位置的适当命令是什么？

Answer 1

将短代码注入 WordPress tinyMCE 编辑器

根据我的经验，有两条路线可以实现这一目标。就个人而言，在与这两种方法一起工作之后，我更喜欢后一种方法，但是每种方法都有自己的缺点。我依次解释每一个，你可以决定什么听起来最适合你。

通过 TinyMCE

在下面的代码中，请注意为该 TinyMCE 插件提供支持的命令是如何拆分为单独的函数的。此版本还扩展了现有功能，以在按下按钮时用我们的 <foobar> 元素包装用户当前选择的任何内容。

(function() {
    // Note the namespacing 'my_project'.  You don't want to conflict with other
    // tinyMCE plugins that may exist so its a good idea to namespace your plugins.
    tinymce.PluginManager.add('my-project_foobar', function(editor, url) {

        // Register our Foobar button with tinyMCE
        editor.addButton('my-project_foobar', {
            title : 'This is just a test',
            text : '<foobar>',
            icon : false,
            onclick : function() {
                var selection = editor.selection;
                editor.execCommand('so_39887396_insert_shortcode', '', selection);
            }
        });

        // Register our button callback command to insert shortcode content.
        editor.addCommand('so_39887396_insert_shortcode', function (ui, selection) {
            // Grab our existing selection, if there is one.
            var content = selection.getContent({
              format: 'html',
            });
            
            // If no selection is found, default content to empty string.
            if (!content.length) {
                content = '';
            }

            // Setup the name of our shortcode.
            var shortcodeName = 'foobar';
            
            // Generate our new content, wrapping any existing selection with our shortcode tags.
            // These opening and closing tags could be broken out into different variables as well  
            // if you were looking to pass additional vars within the shortcode's brackets.
            var newContent = '['+ shortcodeName +']' + content + '[/' + shortcodeName + ']';
            
            // Inject our content into tinyMCE at current selection.
            selection.setContent(newContent);
        });
    });
})(jQuery);

通过 ShortCake（简码 UI）

因此，虽然我们可以通过 tinyMCE 编辑器完成此操作，但最近我一直喜欢使用 Shortcake，以前称为 Shortcode UI。它提供了一个用户友好的界面，用于将简码插入 post 内容，根据我的经验，集成到现有简码中非常简单:)

他们在 github 回购中有 an example，其中有很好的评论。如果您对初始设置、所需的挂钩等有疑问，我建议您查看一下。

<?php
/**
 * All this code was taken from the `dev.php` example on the Shortcake github repo.
 * @see https://github.com/wp-shortcake/Shortcake/blob/master/dev.php
 */

 /**
  * Register Shortcode
  */
function so_39887396_register_shortcode() {
 add_shortcode( 'my-project_foobar', 'so_39887396_shortcode_callback' );
}
add_action( 'init', 'so_39887396_register_shortcode' );

/**
 * Shortcode UI setup for 'my-project_foobar'
 */
function so_39887396_register_foobar_with_shortcake() {
 $args = array(
  /*
   * How the shortcode should be labeled in the UI. Required argument.
   */
  'label' => esc_html__( 'Foobar', 'my-project' ),
  /*
   * Include an icon with your shortcode. Optional.
   * Use a dashicon, or full HTML (e.g. <img src="/path/to/your/icon" />).
   */
  'listItemImage' => 'dashicons-editor-quote',
  /*
   * Limit this shortcode UI to specific posts. Optional.
   */
  'post_type' => array( 'post' ),
 );
 shortcode_ui_register_for_shortcode( 'my-project_foobar', $args );
}
add_action( 'register_shortcode_ui', 'so_39887396_register_foobar_with_shortcake' );

/**
 * Callback for the 'my-project_foobar' shortcode.
 */
function so_39887396_shortcode_callback( $attr, $content, $shortcode_tag ) {
 // Shortcode callbacks must return content, hence, output buffering here.
 ob_start();
 ?>
 <foobar>
        <?php if ( ! empty( $content ) ) : ?>
            <?php echo wp_kses_post( $content ); ?>
        <?php endif; ?>
 </foobar>
 <?php
 return ob_get_clean();
}

简而言之

如果您只使用短代码，我发现 Shortcake 作为开发人员和用户都更容易使用。即使您只是想插入通用 HTML，通常编写一个短代码来执行此操作并将其连接到 Shortcake 会更容易。 TinyMCE 的脆弱性最终会导致格式错误的内容和各种随机副作用，这可能会让编辑或管理员感到非常困惑。

我们还可以使用其他构建在 Shortcake 上的社区插件，例如 Shortcake Bakery。

单击按钮后，tinyMCE 光标位于文本中间

tinyMCE cursor placed in the middle of text after button click

wordpress

jquery

tinymce

button

shortcode

将短代码注入 WordPress tinyMCE 编辑器

通过 TinyMCE

通过 ShortCake（简码 UI）

简而言之