Question

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

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

markdown-editor-textarea

让我的HTML模板存储在一个JavaScript字符串变量中并让它基本上生成这个HTML下面包含原始textarea与CSS类<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>

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

在运行我的jQuery代码之前。只有HTML才会存在

$('.markdown-editor-textarea')

运行代码后，它看起来就像这个

上面的HTML模板

所以我需要帮助将这个HTML包装在使用选择器<textarea class="markdown-editor-textarea"></textarea>

找到的原始textarea周围

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

this

更新

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

HTML

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

JavaScript / jQuery

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

所以这不会起作用，因为我需要它而不是这样......

{{1}}

Answer 1

在插件中，您可以将textarea替换为模板，然后将textarea添加回元素

＆＃13;

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

＆＃13;

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

＆＃13;

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插件都使用它。除了样板本身，还有一些好东西，比如各种图案，指南和命令行生成器。您应该查看{{1}}模式。

Answer 4

replaceWith应该很简单。示例代码如下。

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery围绕现有HTML元素包装HTML结构

4 个答案: