在 WordPress 中，我的编辑器中有一个可操作的短代码按钮，我希望能够在单击该按钮后在光标的最后一个位置周围添加两个短代码标签(一个开头，一个结尾)，但是我'我无法找到有关该主题的先前问答，并且我引用了 TinyMCE 文档 Command Identifiers 。这是我的 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中光标位置的适当命令是什么？

请您参考如下方法:

将短代码注入(inject) 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 ，以前称为简码 UI。它提供了一个用户友好的界面，用于将短代码插入到帖子内容中，根据我的经验，集成到现有的短代码中非常简单:)

他们有an example在 github 存储库中，它有很好的评论。如果您对初始设置、所需的 Hook 等有疑问，我建议您看一下。

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

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

将短代码注入(inject) WordPress tinyMCE 编辑器

通过 TinyMCE

通过 ShortCake(短代码 UI)

简而言之