javascript - 使用 jQuery 在现有 HTML 元素周围包装 HTML 结构

Question

我正在构建一个 jQuery 插件，它将采用任何 HTML 文本区域并将其包装在带有 BBCode 样式按钮的标题工具栏中，以便将 Markdown 语法插入到文本区域中。它还将添加一个 DIV，它将 Markdown 解析为 HTML 作为实时预览，显示在文本区域旁边。

我希望能够简单地运行这个 jQuery 代码...

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

并让它使用存储在 JavaScript 字符串变量中的我的 HTML 模板，并让它基本上生成下面的 HTML，用 CSS 类 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>

在运行我的 jQuery 代码之前。唯一存在的 HTML 将是

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

运行代码后，它看起来像上面的 HTML 模板

---

所以我需要帮助将上面的 HTML 包装在使用选择器 $('.markdown-editor-textarea')

找到的原始文本区域周围

---

预览以了解我在做什么...

---

更新

这是我到目前为止尝试过的...

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

在插件中，您可以用模板替换文本区域，然后将文本区域添加回元素

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