【问题标题】:Call TinyMCE in a WordPress plugin在 WordPress 插件中调用 TinyMCE
【发布时间】:2011-02-20 19:17:27
【问题描述】:

有没有办法将 TinyMCE 添加到我自己的 WordPress 插件中?

我的后端脚本中有一个文本区域,并希望将此区域设置为 TinyMCE 所见即所得的可编辑字段。有没有办法做到这一点?

此代码对我不起作用:

<?php
    wp_tiny_mce(false,array("editor_selector" => "test"));
?>
<textarea class="test" id="test" name="test"></textarea>

显示 javascript 错误

f is undefined

萤火虫截图:

这也不起作用:

<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>

【问题讨论】:

    标签: php javascript wordpress plugins tinymce


    【解决方案1】:

    在 WordPress 3.3 中使用 wp_editor() 函数更容易做到这一点。

    我正在开发一个插件,可以将 TinyMCE 实例添加到主题选项页面。这是它的样子:

    // Add TinyMCE visual editor
    wp_editor( $content, $id );
    

    其中 $content 是存储的内容,$id 是字段的名称。也可以传递选项来自定义 TinyMCE 功能,请查看 WordPress Codex 了解更多详细信息。

    【讨论】:

    • 这确实是最新最简单的。将它用于一个新项目,效果很好
    【解决方案2】:

    Camden 已经回答了这个问题,但是如果有人需要完整的代码……一定要挂在 admin_head 中,挂在 admin_enqueue_scripts 中会导致它在其他脚本之前加载,例如 jQuery,所以它不起作用。

    add_action("admin_head","load_custom_wp_tiny_mce");
    function load_custom_wp_tiny_mce() {
    
    if (function_exists('wp_tiny_mce')) {
    
      add_filter('teeny_mce_before_init', create_function('$a', '
        $a["theme"] = "advanced";
        $a["skin"] = "wp_theme";
        $a["height"] = "200";
        $a["width"] = "800";
        $a["onpageload"] = "";
        $a["mode"] = "exact";
        $a["elements"] = "intro";
        $a["editor_selector"] = "mceEditor";
        $a["plugins"] = "safari,inlinepopups,spellchecker";
    
        $a["forced_root_block"] = false;
        $a["force_br_newlines"] = true;
        $a["force_p_newlines"] = false;
        $a["convert_newlines_to_brs"] = true;
    
        return $a;'));
    
     wp_tiny_mce(true);
    }
    
    
    }
    

    然后在模板的某处插入一个常规文本区域:

    <textarea id="intro"></textarea>
    

    【讨论】:

    • 这在我的插件页面 (wp 3.2.1) 上非常适合我我使用 add_action('admin_head-mypluginpage' 仅在我的插件页面上加载它
    【解决方案3】:

    以下示例适用于我。只需确保在 $a["elements"] 变量中使用您要选择的文本区域的 id。

    假设您有一个 id 为 'intro' 的 textarea:

    // attach the tiny mce editor to this textarea
    if (function_exists('wp_tiny_mce')) {
    
      add_filter('teeny_mce_before_init', create_function('$a', '
        $a["theme"] = "advanced";
        $a["skin"] = "wp_theme";
        $a["height"] = "200";
        $a["width"] = "800";
        $a["onpageload"] = "";
        $a["mode"] = "exact";
        $a["elements"] = "intro";
        $a["editor_selector"] = "mceEditor";
        $a["plugins"] = "safari,inlinepopups,spellchecker";
    
        $a["forced_root_block"] = false;
        $a["force_br_newlines"] = true;
        $a["force_p_newlines"] = false;
        $a["convert_newlines_to_brs"] = true;
    
        return $a;'));
    
     wp_tiny_mce(true);
    }
    

    ?>

    【讨论】:

      【解决方案4】:

      微型 mce 函数 wp_tiny_mce 现在已弃用。对于最新的 wordpress,您要使用 wp_editor

      $initial_data='What you want to appear in the text box initially';
      $settings = array(
      'quicktags' => array('buttons' => 'em,strong,link',),
      'text_area_name'=>'extra_content',//name you want for the textarea
      'quicktags' => true,
      'tinymce' => true
      );
      $id = 'editor-test';//has to be lower case
      wp_editor($initial_data,$id,$settings);
      

      有关更多说明,请查看 wordpress 中的文档

      http://codex.wordpress.org/Function_Reference/wp_editor

      【讨论】:

      • 最新版wordpress中弃用的编辑器函数wp_tiny_mce()...
      • key "text_area_name" 必须改写为 "textarea_name"
      【解决方案5】:

      遵循herethere 的指南(感谢this),以下是我如何设法在wordpress 3.0.5 上运行:

      <?php
      add_action("admin_print_scripts", "js_libs");
      function js_libs() {
          wp_enqueue_script('tiny_mce');
      }
      wp_tiny_mce( false , // true makes the editor "teeny"
          array(
              "editor_selector" => "tinymce_data"
          )
      );
      ?>
      
      <script type="text/javascript">
          jQuery(document).ready(function($) {
              $('a.toggleVisual').click(function() {
                  console.log(tinyMCE.execCommand('mceAddControl', false, 'tinymce_data'));
              });
              $('a.toggleHTML').click(function() {
                  console.log(tinyMCE.execCommand('mceRemoveControl', false, 'tinymce_data'));
              });
          });
      </script>
      
      <form method="post" action="">
      <ul>
        <li>
          <span id="submit"><input class="button" type="submit"></span>
          <p id="toggle" align="right"><a class="button toggleVisual">Visual</a><a class="button toggleHTML">HTML</a></p>
        </li>
        <li><textarea style="width:100%;" class="tinymce_data" id="tinymce_data" name="tinymce_data"></textarea></li>
      </ul>
      </form>
      

      【讨论】:

        【解决方案6】:

        我遇到了类似的问题,class="theEditor" 也没有帮助我(起初)。我使用的自定义帖子类型不包含默认编辑器(即supports 参数不包含'editor')。

        这意味着 WordPress 不包含 TinyMCE 代码。一旦我添加了

        add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );
        

        到我的functions.php(基于general-template.php 中the_editor 函数中的代码)它运行良好(使用class="theEditor")。

        【讨论】:

          【解决方案7】:

          在 wordpress 3.3.1 上测试和工作

          添加到函数或插件文件。

          <?php
              add_filter('admin_head','ShowTinyMCE');
              function ShowTinyMCE() {
                  // conditions here
                  wp_enqueue_script( 'common' );
                  wp_enqueue_script( 'jquery-color' );
                  wp_print_scripts('editor');
                  if (function_exists('add_thickbox')) add_thickbox();
                  wp_print_scripts('media-upload');
                  if (function_exists('wp_tiny_mce')) wp_tiny_mce();
                  wp_admin_css();
                  wp_enqueue_script('utils');
                  do_action("admin_print_styles-post-php");
                  do_action('admin_print_styles');
              }
          ?>
          

          用于添加新内容..

          <?php the_editor($id='content');?>
          

          用于编辑我的内容

          <?php the_editor($mySavedContent); ?>
          

          这将包括在您的插件或模板文件中生成 tinyMCE 文本区域所需的全部脚本/css 和代码。..

          希望这会有所帮助..

          M

          【讨论】:

            【解决方案8】:

            我在这方面遇到了很多麻烦。在搜索了一整天并尝试了几十个代码示例之后,我无法获得 Wordpress 主题选项来将 MCE 值保存到数据库。我尝试了一切,jQuery 答案,隐藏字段等。这些都不适合我,可能是因为我在某处遗漏了一步。

            终于找到了这个页面:http://wptheming.com/options-framework-theme/

            从 Github 下载并按照指示安装(简单)。安装后,主题选项中的最后一个选项卡有一个 MCE 编辑器。输入一些测试段落。现在打开下载中的 index.php 文件,查看如何在页面中包含每个内容的示例。例如,我打开 footer.php 并添加一些代码。

            我需要做的唯一修改是:

            <?php
            $ft = of_get_option('example_editor', 'no entry');
            $format_ft = wpautop( $ft, false );
            echo ($format_ft);
            ?>
            

            Wordpress 的函数 wpautop() 添加了段落标签,因为它们从未保存在 wp 数据库中。我将该代码放在页脚中以显示 MCE 的内容。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2015-04-19
              • 1970-01-01
              • 2013-10-19
              • 1970-01-01
              • 2012-12-15
              相关资源
              最近更新 更多