按钮单击后，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。它提供了一个用户友好的界面，用于将简码插入到帖子内容中，根据我的经验，它很容易集成到现有的简码中:)

他们在 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。