• Страница 1 из 1
  • 1
Форум » uCoz » Заметки по JS » Вывод картинок в поле
Вывод картинок в поле
waak 17.06.2018 в 14:10 1
Вывод картинок при вставки в поле

кнопка по которой картинка будет вставлена
Код
<span onClick="addImage('http://talantlev.ucoz.ru/.s/a/38/848571053.png');">Add image</span>

Стили
Код
<style>
    .textarea
{
    height:120px;
    width:100%;
    background-color:#f0f0f0!important;
    word-wrap:break-word;
}
textarea
{
    width:100%;
    height:100px;
    border:1px solid black;
}
span
{
    cursor:pointer;
}
</style>

сам скрипт
Код
<script>
// Допустим, что нам известен id нужного тега textarea
var Textarea = document.getElementById("message");
var Container = document.createElement("DIV");

// Добавим контейнер к родителю текстарии, потом перенесем ее внутрь контейнера и скроем
Textarea.parentNode.insertBefore(Container, Textarea);
Container.appendChild(Textarea);
Textarea.style.display = 'none';

        
// Создадим фрейм и добавим его в контейнер редактора
var iframe = "<iframe id='txt-frame' class='textarea' 'src=\"javascript: document.open(); document.domain='" + document.domain + "'; document.close();\" frameborder='0'></iframe>";

Container.innerHTML =  iframe + Container.innerHTML;
var Frame = Container.childNodes[0];

// Хитрое определение IE ;)
var isIE = /*@cc_on!@*/false;

// Выделим документ фрейма в отдельную переменную
var FrameDoc = isIE ? Frame.contentWindow.document : Frame.contentDocument;

FrameDoc.open();

// Если содержимое тега body будет пустым, в FF курсор станет каким-то через-чур маленьким.
// Чтобы этого избежать, добавим & nbsp;
FrameDoc.write('<html><head><style>body{ margin:0; padding:8px; word-wrap:break-word; }</style></head><body>'+ Textarea.value +' </body></html>');
FrameDoc.close();
FrameDoc.designMode = "on";

                

Frame.contentWindow.focus();

function addImage(src)
{
    // Если в IE не установить фокус на окне редактируемого фрейма,
    // то в дальнейшем он может вставить код наверх вашей страницы, а не во фрейм ;)
    Frame.contentWindow.focus();
    var SelectionRange = isIE ? FrameDoc.selection.createRange() : Frame.contentWindow.getSelection().getRangeAt(0);
    
    var html = "<img src='" + src + "' />";

    if (isIE) {
        // тут все просто
        SelectionRange.pasteHTML(html);
    } else {
        // для остальных используем вспомогательный тег
        SelectionRange.deleteContents();
        var el = document.createElement("SPAN");
        FrameDoc.getElementsByTagName("BODY")[0].appendChild(el);

        // Firefox не поймет, если вы сразу замените outerHTML. В версиях ниже 3-ей такое свойство вообще у него отсутствует.
        el.innerHTML = html;
        SelectionRange.insertNode(el);
        el.outerHTML = html;
    }
}
</script>
Буду благодарен за любую финансовую поддержку!
Яндекс 41001566705372 Вебмани R234675901433 Киви 79094024545

Изготовление сайтов в системе uCoz. Изменение и доработка уже готовых сайтов. Установка шаблонов. Настройка сайтов.
Форум » uCoz » Заметки по JS » Вывод картинок в поле
  • Страница 1 из 1
  • 1
Поиск:
форма для входа