Wrap HTML structure around an existing HTML element using jQuery

Question

I am building a jQuery plugin which will take any HTML textarea and wrap it wth a header toolbar with BBCode style buttons for inserting Markdown syntax into the textarea. It will also add a DIV which will parse the Markdown into HTML as a live preview which will show up next to the textarea.

I want to be able to simply run this jQuery code...

$('.markdown-editor-textarea').markdownEditor();

and have it take my HTML template which is stored in a JavaScript string variable and have it basically generate this HTML below wrapped arouynd the original textarea with CSS class markdown-editor-textarea

<div class="editor-content-wrapper">
    <div class="editor-toolbar">
        // buttons here
    </div>
    <div class="editor-code">
        <textarea class="markdown-editor-textarea"></textarea>
    </div>
    <div class="editor-preview">
        <div>Markdown parsed from left panel into HTML preview in this right panel</div>
    </div>
</div>

Prior to running my jQuery code. THe only HTML that will exist will be

<textarea class="markdown-editor-textarea"></textarea>

and after running the code it will look like the HTML template above this

So I need help in wrapping this HTML above around the original textarea that is found with the selector $('.markdown-editor-textarea')

Preview to give an idea of what I am doing...

UPDATE

Here is what I have tried so far...

HTML

<textarea class="markdown-editor-textarea"></textarea>

JavaScript/jQuery

$('.markdown-editor-textarea').wrap('<div class="editor-content-wrapper"><div class="editor-toolbar"></div><div class="editor-code"></div><div class="editor-preview"><div>Markdown parsed from left panel into HTML preview in this right panel</div></div></div>');

The result is this...

<div class="editor-content-wrapper">
    <div class="editor-toolbar">
        <textarea class="markdown-editor-textarea2"></textarea>
    </div>
    <div class="editor-code"></div>
    <div class="editor-preview">
        <div>Markdown parsed from left panel into HTML preview in this right panel</div>
    </div>
</div>

So this will not work as I need it to instead be like this...

<div class="editor-content-wrapper">
    <div class="editor-toolbar"></div>
    <div class="editor-code">
        <textarea class="markdown-editor-textarea2"></textarea>
    </div>
    <div class="editor-preview">
        <div>Markdown parsed from left panel into HTML preview in this right panel</div>
    </div>
</div>

Arun P Johny · Accepted Answer · 2016-05-20 04:21:04Z

1

In the plugin you can replace the textarea with the template and then add the textarea back to the element

(function($) {

  var template = '<div class="uk-htmleditor-content">\
  <div class="editor-toolbar">\
    // buttons here\
  </div>\
  <div class="editor-code">\
    \
  </div>\
  <div class="editor-preview">\
    <div>Markdown parsed from left panel into HTML preview in this right panel</div>\
  </div>\
</div>';

  $.fn.markdownEditor = function() {
    return this.each(function() {
      var $ct = $(template);
      $(this).replaceWith($ct);
      $ct.find('.editor-code').append(this);
    });
  };
})(jQuery);

$('.markdown-editor-textarea').markdownEditor();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="markdown-editor-textarea"></textarea>

answered May 20, 2016 at 4:21

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JasonDavis Over a year ago

This is the approach I was actually just testing myself but couldn't get it. Your demo works so this might be my best bet as my actually template contains much more HTML so this technique would allow that to not be a factor. thanks!

Washington Guedes · Accepted Answer · 2016-05-20 04:23:38Z

1

You can do this way:

$.fn.extend({
    markdownEditor: function(){
        if ( $(this).is('textarea') ) {
            var code = $(this).wrap('<div class="editor-code"></div>');
            var wrapper = code.wrap('<div class="editor-content-wrapper"></div>');
            var toolbar = wrapper.prepend('<div class="editor-toolbar"></div>');
            var preview = wrapper.append('<div class="editor-preview"></div>');
            // your plugin code ..
        }
        return $(this);
    }
});

answered May 20, 2016 at 4:23

Washington Guedes

4,3753 gold badges35 silver badges59 bronze badges

Comments

Yordan Ivanov · Accepted Answer · 2016-05-20 04:24:27Z

0

Take a look at jQuery Boilerplate. It's a good start for a plugin and in fact most of the jQuery plugins uses it. Besides the the boilerplate itself, there are some goodies, like a variety of patterns, guides and a command-line generator. You should probably look at the widget factory pattern.

answered May 20, 2016 at 4:24

Yordan Ivanov

5824 silver badges11 bronze badges

Comments

Rajshekar Reddy · Accepted Answer · 2016-05-20 04:41:52Z

0

This should be simple with replaceWith. Sample code below.

var wrapperText = '<div class="editor-content-wrapper"><div class="editor-toolbar"></div><div class="editor-code">'+ $('.markdown-editor-textarea')[0].outerHTML +'</div><div class="editor-preview"><div>Markdown parsed from left panel into HTML preview in this right panel</div></div></div>';

$('.markdown-editor-textarea').replaceWith(wrapperText);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="markdown-editor-textarea"></textarea>

answered May 20, 2016 at 4:41

Rajshekar Reddy

19.1k4 gold badges45 silver badges64 bronze badges

Collectives™ on Stack Overflow

Wrap HTML structure around an existing HTML element using jQuery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related