Question

我使用ember js作为我的前端MVC。我有一个问题和答案模块，类似于堆栈溢出，其中有2个字段用于标题，另一个用于描述。

由于描述是一个文本区域，我已用Froala wysiwug edito r。

插入

现在我使用

获取在ember中的froala文本编辑器中输入的内容

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

<\ t>在余烬控制器中。

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

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

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

现在我想使用lightbox plugin

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

由于我正在对数据库中的图像标记标记进行处理，因此将图像包装在anchor tag

中的最佳方法是什么？

我有两个选择 - 1）在将数据保存到数据库之前，使用javascript进行模式匹配并找到图像并将其包装在锚标记内。 2）在ember视图的didInsertElement钩子中，找到页面上的所有图像并执行dom manuplation并将图像包装在锚标记内。

还有其他方法可以让这个工作吗？需要一些建议。

Answer 1

首先，您应该使用编辑器中提供的方法在可编辑区域内获取HTML，在本例中为getHTML方法http://editor.froala.com/examples/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();

Lightbox 2带有ember js和Froala编辑器（点击图片预览）

1 个答案: