jQueryを使用して既存のHTML要素の周りにHTML構造をラップします。

Question

jQueryプラグインをビルドしています.HTMLテキスト領域を取り、ヘッダーツールバーをBBCodeスタイルボタンで囲み、Markdown構文をテキストエリアに挿入します。また、MarkdownをHTMLに解析して、テキストエリアの横に表示されるライブプレビューとしてDIVを追加します。

私は

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

、それがJavaScriptの文字列変数に格納された私のHTMLテンプレートを取ると、それは基本的に以下このHTMLを生成しているが...単に、このjQueryのコードを実行できるようにしたいです私のjQueryのコードを実行する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> 

前CSSクラスを元にtextarea arouynd包まれました。存在する唯一のHTMLは

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

になり、コードを実行した後、それはだから私はそのオリジナルのテキストエリアの周りに上記このHTMLをラップで助けを必要とするこの

---

の上にHTMLテンプレートのようになります。私がやっているかのアイデアを与えるために、セレクタ$('.markdown-editor-textarea')

---

プレビュー...

で発見されました

---

UPDATEここ

は、私がこれまで試してみましたされているもの...

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>'); 

結果は、私はそれは、代わりにこのようなことする必要があるとして、

<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> 

だから、これは動作しません...これで...

<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> 

Answer 1

テキストエリアをテンプレートに置き換えて、テキストエリアを要素に戻します。

Answer 2

あなたはこの方法を行うことができます。

$.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); 
    } 
}); 

Answer 3

はjQuery Boilerplateを見てみましょう。プラグインにとっては良いスタートですが、実際にはほとんどのjQueryプラグインがそれを使用しています。ボイラープレート自体に加えて、さまざまなパターン、ガイド、コマンドラインジェネレータなど、いくつかの機能があります。あなたはおそらくwidget factoryパターンを見てください。

Answer 4

replaceWithでこれは簡単です。以下のサンプルコード。

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>