• Resolved Rajarshi Bose

    (@truthsearcher83)


    I am playing around with shortcodes and how to display HTML in the front end .
    Consider , I have a form like below :

    <form>
        <div class="form-group">
            <label>Title</label>
            <input type="text" class="form-control" id="r_inputTitle">
        </div>
        <div class="form-group">
            <label>Content</label>
            <textarea class="form-control" id="recipecontenteditor"></textarea>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit Recipe</button>
        </div>
    </form>

    I want to display it in the front end on a shortcode . This is how I do it . In
    my index.php :

    add_shortcode( 'recipe_creator', 'r_recipe_creator_shortcode' );

    In creator.php ( which has the shortcode callback ) I have :

    function r_recipe_creator_shortcode(){
      $creatorHTML          = file_get_contents( 'creator-template1.php', true )
      return $creatorHTML;
    }

    This shows the form correctly .

    Now suppose from inside the r_recipe_creator_shortcode() function I call another
    function which just stores in the buffer and return the TinyMCE editor code like
    below :

    <?php
    
    function r_recipe_creator_shortcode(){
      $creatorHTML          = file_get_contents( 'creator-template1.php', true );
      $editorHTML           = r_generate_content_editor();
      return $creatorHTML;
    }
    
    function r_generate_content_editor(){
      ob_start();
      wp_editor( '', 'recipecontenteditor' );
      $editor_contents      = ob_get_clean();
     //var_dump($editor_contents);
      return $editor_contents;
    }

    On doing this I found out the following div to be inserted after
    <label>Content</label> and before <textarea class=”form-control” id=”recipecontenteditor”></textarea> .

    <div id="qt_recipecontenteditor_toolbar" class="quicktags-toolbar">

    This is a screenshot of how it looks like : Screenshot 1

    I understand ob_start() wont output wp_editor() instead output is stored in
    $editor_contents which is being returned to $editorHTML . I am curious how this
    div is inserted in the HTML though I am not doing anything with the $editorHTML
    variable but just returning $creatorHTML from the shortcode callback .

    Investigating further I found out if I var_dump $editor_contents ( which should
    have the complete code for wp_editor()) , the div , <div
    id=”qt_recipecontenteditor_toolbar” class=”quicktags-toolbar”> [ in green ] is in
    there but some divs along with the style are missing [in red] in the output . Screenshot :
    Screenshot 2

    Could some body please tell me a) how the div with id=”qt_recipecontenteditor_toolbar” is getting inserted ? b) why only the div with id=”qt_recipecontenteditor_toolbar” is getting inserted and not the complete HTML for wp_editor() ?

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    I tried your code on my site. I replaced the file_get_contents() with some basic HTML. The editor was not output because the value of $editorHTML is never included in the return. After concatenating $editorHTML to the return, I got exactly what was returned by a direct wp_editor() call. Nothing more, nothing less. Whatever is going on on your site is external to the code you posted.

Viewing 1 replies (of 1 total)
  • The topic ‘wp_editor() with shortcode’ is closed to new replies.