0

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

由于描述是一个文本区域，我已将其插入Froala wysiwug 编辑器。

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

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

在 ember 控制器中。

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

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

我将这个字符串保存在数据库中。一切正常。

现在我想使用灯箱插件

正如您所注意到的，要使用插件，需要将图像包装在锚标记内并添加一些 data-lightbox 属性

由于我正在数据库中查找图像标记标记，因此将图像包装在anchor tag

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

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

4

1 回答 1

0

首先，您应该使用编辑器中可用的方法获取可编辑区域内的 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();
于 2014-10-23T10:19:53.877 回答