【问题标题】:How to add wysiwyg editor in Wordpress meta box如何在 Wordpress 元框中添加所见即所得编辑器
【发布时间】:2011-03-30 10:18:24
【问题描述】:

我正在为我的自定义帖子类型创建一个元框。有多个字段我想使用所见即所得编辑器而不是<textarea>。是否可以将多个编辑器添加到元框?

非常感谢您的帮助!

非常感谢。 大傻

【问题讨论】:

    标签: wordpress editor field meta-boxes


    【解决方案1】:

    【讨论】:

      【解决方案2】:

      首先安装 TinyMCE Advanced 插件。 其次像这样将“theEditor”类添加到您的文本区域中

      <textarea  class="theEditor" name="custom_meta_box"></textarea>
      

      就是这样 ;)

      纳比尔

      【讨论】:

        【解决方案3】:

        http://codex.wordpress.org/Function_Reference/wp_editor 是迄今为止我发现的最简单的方法,自 3.3 起内置于 Wordpress 中(所以升级 ;-))

        【讨论】:

        • 不要忘记将id 参数设置为与空字符串不同的值,否则它将不起作用...
        【解决方案4】:

        但是您需要用 nl2br() 函数替换演示文稿,因为自定义模板中的 textarea 存在工具 JS 问题,这会删除所有 &lt;P&gt;&lt;br/&gt; 标记,因此会删除所有换行符。

        【讨论】:

          【解决方案5】:

          您可以在 metabox 中使用 wordpress 默认文本编辑器

          add_action( 'edit_page_form', 'my_second_editor' );
          function my_second_editor() {
              // get and set $content somehow...
              wp_editor( $content, 'mysecondeditor' );
          }
          

          【讨论】:

            【解决方案6】:

            这对我有用:

            http://www.farinspace.com/multiple-wordpress-wysiwyg-visual-editors/

            它基本上是用一个 id 创建你的 textarea,然后从 js 调用:

            tinyMCE.execCommand('mceAddControl', false, 'your_textarea_id');
            

            希望对你有帮助!

            【讨论】:

              【解决方案7】:

              这是完整的代码示例:

              add_action( 'add_meta_boxes',  function() { 
                  add_meta_box('html_myid_61_section', 'TITLEEEEE', 'my_output_function');
              });
              
              function my_output_function( $post ) {
                  $text= get_post_meta($post, 'SMTH_METANAME' , true );
                  wp_editor( htmlspecialchars($text), 'mettaabox_ID', $settings = array('textarea_name'=>'MyInputNAME') );
              }
              
              add_action( 'save_post', function($post_id) {
                  if (!empty($_POST['MyInputNAME'])) {
                      $datta=sanitize_text_field($_POST['MyInputNAME']);
                      update_post_meta($post_id, 'SMTH_METANAME', $datta );
                  }
              }); 
              

              附注必须 - 根据我的经验推荐:

              忘记添加自定义代码,使用 Advanced Custom Fields,它非常棒,可以简化您的生活。

              【讨论】:

              • 但对于高级自定义字段,您必须为重复字段支付 30.00 美元。我宁愿自己做。
              • @Matthew 您宁愿自己编写代码也不愿支付 30.00 美元?您认为您需要多长时间才能实现这一目标?
              • @DannyCoulombe 没花太长时间。这也是一次很棒的学习经历!好奇的可以去here
              • @Matthew 为了学习,你有我的祝福! :-)
              • 'get_post_meta($post' 必须是 'get_post_meta($post->ID'
              【解决方案8】:
              // for custom post type
              
              function wo_second_editor($post) {
              
                echo "<h3>Write here your text for the blue box on the right:</h3>";
                $content = get_post_meta($post->ID, 'wo_blue_box' , true ) ;
                wp_editor( htmlspecialchars_decode($content), 'wo_blue_box', array("media_buttons" => false) );
              }
              
              add_action('edit_form_advanced', 'wo_second_editor');
              
              
              function wo_save_postdata($post_id, $post, $update) {
              
                //...
              
                if (!empty($_POST['wo_blue_box'])) {
                  $data=htmlspecialchars($_POST['wo_blue_box']);
                  update_post_meta($post_id, 'wo_blue_box', $data );
                }
              }
              
              add_action('save_post', 'wo_save_postdata');
              
              
              // Theme:
              
              <div class="blue">
                <?php
                $content = get_post_meta(get_the_ID(), 'wo_blue_box' , true );
                  $content = htmlspecialchars_decode($content);
                  $content = wpautop( $content );
                  echo $content;
                ?>
              </div>
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 2015-03-10
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多