将短代码注入WordPress tinyMCE编辑器

Question

在WordPress中，我的编辑器中有一个操作短代码按钮，我希望它的功能一旦点击，就会在光标的最后一个位置附加两个短代码标签（一个开头，一个结尾）但是我＆＃ 39;我们无法找到关于该主题的先前问答，我已经引用了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（Shortcode 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那样利用它们。

单击按钮

1 个答案:

将短代码注入WordPress tinyMCE编辑器

通过TinyMCE

通过ShortCake（Shortcode UI）

简而言之