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

Question

在WordPress中,我在编辑器中有一个操作短代码按钮,我希望它的功能一旦点击,就会在光标的最后一个位置附加两个短代码标签(一个开头,一个在末尾),但我一直无法找到关于该主题的先前问答,我已经引用了命令标识符的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 存储库中有一个示例，其中有很好的评论。如果您对初始设置、所需的挂钩等有疑问，我建议您看一下。

<?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。