Вложенные цитаты в HTML - PullRequest
Новая
       32

Вложенные цитаты в HTML

2 голосов
/ 02 января 2012

Я играю с некоторым bbcode для моего форума и наткнулся на проблему, связанную с несколькими вложенными цитатами. Я пытаюсь реализовать всплывающую подсказку с изображением при наведении мыши. 

<a href="javascript:void;" onmouseover="tooltip.show(\'<img src=\1.jpg>\', 200);" onmouseout="tooltip.hide();">\1</a>',

( \ 1 - это значение, которое пользователь вводит между тегами [img] [/ img].)

Как видите, у меня нет цитат вокруг моего img src. Каков правильный синтаксис для указания этого с вложенными цитатами? Я пытался использовать обратную косую черту (\\ "и т. Д.), Но это не работает.

Есть идеи?

Ответы [ 2 ]

4 голосов
/ 02 января 2012

Все ваши проблемы с цитатами (и многие другие) исчезнут, как только вы прекратите добавлять встроенные обработчики событий в HTML.

HTML предназначен для представления текстовых и мультимедийных данных, он не должен содержать встроенные CSS и JavaScript.

В качестве первого шага вы можете реорганизовать свой код так, чтобы весь JavaScript был в отдельных файлах.

В HTML: 

<a class="bbcode-link" data-src="\1">\1</a>

<script src="script.js"></script>

In script.js: 

function showTooltip(e) {
    var filename = e.target.getAttribute('data-src')
    return tooltip.show('<img src="' + filename + '.jpg" />', 200)
}

function hideTooltip() {
    return tooltip.hide()
}

[].forEach.call(
    document.querySelectorAll('a.bbcode-link'),
    function (link) {
        link.addEventListener('mouseover', showTooltip, false)
        link.addEventListener('mouseout', hideTooltip, false)
    }
)

Также я надеюсь, что вы продезинфицируете пользовательский ввод перед тем, как вставить его в HTML.

Справочные ссылки:

1 голос
/ 02 января 2012

Это должно работать. 

<a href="javascript:void;" 
onmouseover="tooltip.show('<img src=&quot;\1.jpg&quot;>', 200);"
onmouseout="tooltip.hide();">\1</a>',

Внимательно проверьте, как я использовал &quot;, чтобы браузер не анализировал цитату в качестве разделителя значения атрибута. Также вам не нужно экранировать символ ' внутри значения атрибута.

jsfiddle

...