WordPress Customizer TinyMCE编辑器中的文本视图(代码视图)

时间:2018-06-27 作者:Milan Bastola

我在WordPress Customizer中通过将此代码放入函数中实现了TinyMCE编辑器。php文件:

// TinyMCE Editor in Customizer
if (class_exists(\'WP_Customize_Control\')) {
  class Text_Editor_Custom_Control extends WP_Customize_Control {
    function __construct($manager, $id, $options) {
      parent::__construct($manager, $id, $options);

      global $num_customizer_teenies_initiated;
      $num_customizer_teenies_initiated = empty($num_customizer_teenies_initiated)
        ? 1
        : $num_customizer_teenies_initiated + 1;
    }
    function render_content() {
      global $num_customizer_teenies_initiated, $num_customizer_teenies_rendered;
      $num_customizer_teenies_rendered = empty($num_customizer_teenies_rendered)
        ? 1
        : $num_customizer_teenies_rendered + 1;

      $value = $this->value();
      ?>
        <label>
          <span class="customize-text_editor"><?php echo esc_html($this->label); ?></span>
          <input id="<?php echo $this->id ?>-link" class="wp-editor-area" type="hidden" <?php $this->link(); ?> value="<?php echo esc_textarea($value); ?>">
          <?php
            wp_editor($value, $this->id, [
              \'textarea_name\' => $this->id,
              \'media_buttons\' => false,
              \'drag_drop_upload\' => false,
              \'teeny\' => true,
              \'quicktags\' => false,
              \'textarea_rows\' => 5,
              // MAKE SURE TINYMCE CHANGES ARE LINKED TO CUSTOMIZER
              \'tinymce\' => [
                \'setup\' => "function (editor) {
                  var cb = function () {
                    var linkInput = document.getElementById(\'$this->id-link\')
                    linkInput.value = editor.getContent()
                    linkInput.dispatchEvent(new Event(\'change\'))
                  }
                  editor.on(\'Change\', cb)
                  editor.on(\'Undo\', cb)
                  editor.on(\'Redo\', cb)
                  editor.on(\'KeyUp\', cb) // Remove this if it seems like an overkill
                }"
              ]
            ]);
          ?>
        </label>
      <?php
      // PRINT THEM ADMIN SCRIPTS AFTER LAST EDITOR
      if ($num_customizer_teenies_rendered == $num_customizer_teenies_initiated)
        do_action(\'admin_print_footer_scripts\');
    }
  }
}
但它只显示编辑器视图,如何使它也显示“文本视图”(代码视图)。

1 个回复
最合适的回答,由SO网友:Milan Bastola 整理而成

当@Sally CJ在我的问题中发表评论时,我得到了解决方案。

将quicktags设置为true对我起到了作用。

结束

相关推荐

如何在TinyMCE中使用自定义文本样式编辑实际的段落下拉菜单

我想给后端用户只有4种文本样式可供选择。标题、副标题、段落和我们称之为.statement.搜索诸如“TinyMCE中的自定义样式”之类的术语总是以wordpress本身的这篇文章结尾。https://codex.wordpress.org/TinyMCE_Custom_Styles不幸的是,我不想访问其他下拉列表。我需要去掉当前下拉列表中的内容,并用我自己的样式填充它。在第一步中,我实际上并不关心它们在下拉菜单和可视化编辑器中的外观。这里的关键是去掉不必要的造型选项;选项设计(&P);前端将不支持。(尽