javascript - 如何制作一个按钮，将选定的文本包装在具有特定类的 div 中？

Question

我在我的网站管理面板的文本区域中使用 nicedit。现在我想添加一个自定义按钮，该按钮将使所选文本换行在带有 class=info 的 div 中。 我使用了 nicedit wiki 中的信息。这是到目前为止我的 js 文件代码:

/**
* nicInfodiv
* @description: Adds blue square wrapper to text
* @requires: nicCore, nicPane, nicAdvancedButton
* @author: Brian Kirchoff
* @version: 0.9.0
*/

/* START CONFIG */
var nicInfodivOptions = {
    buttons : {
        'infodiv' : {name : __('Some alt text for the button'), type : 'nicEditorInfodiv'}
    }/* NICEDIT_REMOVE_START */,iconFiles : {'infodiv' : '/js/nicInfodiv/icons/div.gif'}/* NICEDIT_REMOVE_END */
};
/* END CONFIG */

var nicEditorInfodiv = nicEditorButton.extend({   
  mouseClick : function() {
   //WHAT SHOULD I WRITE HERE????
  }
});

nicEditors.registerPlugin(nicPlugin,nicInfodivOptions);

我在任何地方都找不到帮助。谁能给我在 mouseclick 事件中编写适当的代码，以便它将 div class=info 包装器添加到所选文本中？ 有人能帮帮我吗？

Answer 1

您可以使用.wrap() .

$(this).wrap('<div class="info"></div>');

每次单击该元素时，都会在该元素周围创建一个新的包装器 div。如果您允许多次单击此按钮，您可能希望在创建元素时创建一次包装器 div ，然后只需将 info 类添加到稍后父 div。

$(this).parent().addClass('info');