Javascript 带有ember js和Frolaa编辑器的Lightbox 2（单击即可预览图像）

我使用ember js作为前端MVC。我有一个问答模块，类似于堆栈溢出，其中有两个字段，一个用于标题，另一个用于说明

因为描述是一个文本区域，我用r插入了它

现在，我使用

var editorText = $('.froala-element');
var desciption = editorText.html();

在余烬控制器中

例如，如果我在控制台上记录来自textarea的内容

<p><img class="fr-fin" data-fr-image-preview="false" alt="Image title" src="/img/4ad38ae5b4a73cbad30987ac441075998d1e6b35.jpg" width="300"></p><p><br></p>

我将这个字符串保存在数据库中。一切都很好

现在我想用

正如您所注意到的，要使用插件，图像需要包装在锚定标记中，并添加一些数据灯箱属性

既然我在数据库中选择图像标记标记，那么将图像包装在锚定标记中的最佳方法是什么

我有两个选择- 1） 在将图像保存到数据库中之前，使用javascript进行模式匹配，找到图像并将其包装在锚定标记中。 2） 在

didInsertElement

余烬视图的钩子中，找到页面上的所有图像，执行

dom制作

并将图像包装在锚定标记中

---

我还有别的办法让它工作吗？需要一些建议。

首先，您应该使用编辑器中可用的方法获取可编辑区域内的HTML，在本例中为

getHTML

方法。最好这样做，因为getHTML方法会进行一些清理，这样做很好

$('#edit').editable('getHTML', false, true);

您可以使用您建议的RegEx方法，但必须考虑不要将其包装两次。另一种选择是使用jQuery，这更简单

var editorText = $('#edit').editable('getHTML', false, true);
var $div = $('<div>').html(editorText);

// Wrap image.
$div.find('img').each (function (index, img) {
  var $img = $(img);

  // Check if image is already wrapped in your anchor tag.
  if (!$img.parents('a.your_anchor_selector').length) {
    $img.wrap('<a class="your_anchor"></a>');
  }
});

var description = $div.html();

var editorText=$（'#edit'）.editable（'getHTML'，false，true）；
var$div=$（''）.html（editorText）；
//包装图像。
$div.find（'img'）。每个（函数（索引，img）{
var$img=$（img）；
//检查图像是否已包装在锚定标记中。
if（！$img.parents（'a.your\u-anchor\u-selector'）长度）{
$img.wrap（“”）；
}
});
var description=$div.html（）；