Настройка текста Textarea на правильно отформатированный HTML-код с помощью jQuery - PullRequest
Новая
       1

Настройка текста Textarea на правильно отформатированный HTML-код с помощью jQuery

2 голосов
/ 31 мая 2011

Я пытаюсь сгенерировать текст для моего Textarea через Javascript (jQuery), потому что у меня есть переменная в JS, которую я должен включить в нее.Вот что я делаю сейчас: 

$("#txt_banner1").text(
            '<a href="'+producturl+'"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125"><param name="movie" value="../../images/banerxsky2.swf" /><param name="quality" value="high" /><embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed></object>')

Теперь вы, вероятно, подумаете: «Чувак, отформатируй свой код».ну, в этом-то и проблема - я бы хотел, чтобы моя текстовая область содержала мой HTML-код, правильно отформатированный, однако, когда я форматирую свой код в параметрах, он не будет работать (сценарий останавливается).

Есть предложения?

РЕДАКТИРОВАТЬ: форматированный код, который не работает: 

        $("#txt_banner1").text(
        '<a href="'+producturl+'">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
        <param name="movie" value="../../images/banerxsky2.swf" />
        <param name="quality" value="high" />
        <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125">
        </embed>
        </object>');

РЕДАКТИРОВАТЬ2: Вот мой текстовый код: 

<textarea id="txt_banner1"><a href="AFF_URL">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125">
  <param name="movie" value="http://xSkySoftware.com//images/banerxsky2.swf" />
  <param name="quality" value="high" />
  <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed>
  </object>
</textarea>

Ответы [ 4 ]

2 голосов
/ 31 мая 2011

Неприличный ответ: "Вы делаете это неправильно" .Не волнуйтесь, это легко исправить.

JavaScript не поддерживает многострочные строки.Вы можете написать: 

"foo bar\nbaz"

, но не 

"foo bar
baz"

Если вы не избежите символа новой строки (это не часть спецификации ECMA, но все протестированные мною браузеры поддерживают это) 

"foo bar\
baz"

«Правильный» способ создания многострочных строк состоит в добавлении символов новой строки в строку, но вы можете смоделировать символ новой строки с помощью еще нескольких кавычек: 

"foo bar\n"+
"baz"

Да,это отстой, но вот оно у тебя.

1 голос
/ 31 мая 2011

Вы можете поместить свой HTML-код в скрытый контейнер на странице и отформатировать его так, как вам нравится:

Стиль: 

#html_codez { display: none }

Разметка: 

<div id="html_codez">
    <a href="{producturl}">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
            width="125" height="125"><param name="movie" value="../../images/banerxsky2.swf" />
            <param name="quality" value="high" />
            <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf"
                quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
                type="application/x-shockwave-flash" width="125" height="125">
            </embed>
        </object>
    </a>
</div>

(Обратите внимание на закрывающий </a>, который вы пропустили.)

Затем захватите его через innerHTML, который в большинстве браузеров нормализуется для компактного HTML.Если это не происходит в конкретном браузере, вы все равно можете использовать некоторые замены регулярных выражений, чтобы очистить пустое пространство между тегами.В Chrome вам все еще нужно обрезать начальные и конечные пробелы: 

var code = $.trim($("#html_codez").html());

Затем вы можете поместить это в текстовое поле: 

$("#txt_banner1").val(code.replace("{producturl}", producturl));
1 голос
/ 31 мая 2011

Вы можете заранее установить значение вашего txt_banner1 и просто заменить producturl в скрипте: 

<div id="txt_banner1"><a href='MY_NEW_URL'><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="125" height="125"><param name="movie" value="../../images/banerxsky2.swf" /><param name="quality" value="high" /><embed src="http://www.xSkySoftware.com/images/banerxsky2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="125" height="125"></embed></object>

Сценарий: 

var text = $("#txt_banner1").text();
$("#txt_banner1").text(text.replace("MY_NEW_URL", producturl);
0 голосов
/ 31 мая 2011

Я бы предложил вам разместить разметку ссылки на самой странице, используя, скажем, скрытый элемент <div>: 

<div id="content" style="display: none;"><a href="#">
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"
            width="125" height="125">
        <param name="movie" value="../../images/banerxsky2.swf" />
        <param name="quality" value="high" />
        <embed src="http://www.xSkySoftware.com/images/banerxsky2.swf"
               quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"
               type="application/x-shockwave-flash" width="125" height="125" />
    </object>
</a></div>

Затем вы можете использовать jQuery для клонирования ссылки, изменить ее атрибут href на лету и использовать полученную разметку для заполнения элемента <textarea>: 

var $content = $("#content").clone();
$content.children("a").attr("href", producturl);
$("#txt_banner1").val($content.html());

EDIT : слегка улучшенная разметка для лучших результатов. Скрипка доступна здесь .

...