Лайтбокс 2 с ember js и редактор Froala (предварительный просмотр изображения по клику)

Question

Я использую ember js как мой внешний MVC. У меня есть модуль вопросов и ответов, который похож на переполнение стека, где есть два поля для заголовка, а другое для описания.

Поскольку описание представляет собой текстовую область, и я подключил ее к Froala wysiwug edito r.

Теперь я получаю содержание набранный в текстовом редакторе froala в уголек с помощью

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

в контроллере Ember.

Например, если я утешаю войти то, что приходит из текстового поля

<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

И, как вы заметили, чтобы использовать плагин в изображения должно быть обернуто внутри тега привязки и добавил несколько данных-осветителя атрибуты

Поскольку I утра stroing изображения теги разметка в базе данных, что это лучший подход обернуть изображение внутри anchor tag

у меня 2 варианта - 1) Перед тем как сохранить изображение в базе данных, сделать поиск по шаблону с яваскрипт и фи и оберните его внутри тега привязки. 2) В крючке с угловым изображением найти все изображения на странице и выполнить 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();