Форум

рони · #11 (**permalink**) 09.03.2018, 23:51

Devil198711,
редакторы по ссылке выше, содержат все необходимые вам решения, в том числе и на js, нужно только читать их код.

рони · #12 (**permalink**) 10.03.2018, 01:02

Devil198711,
возможно есть проще варианты

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
    window.addEventListener('DOMContentLoaded', function() {
       var myTextArea = document.querySelector('#myTextArea'),
       but = document.querySelector('#but');
       but.addEventListener('click', function() {
       if(!window.getSelection().anchorNode) return;

       var selection = window.getSelection().getRangeAt(0);
            var selectedText = selection.extractContents();
            var tagname = document.createElement('b');
            tagname.appendChild(selectedText);

          if(tagname.textContent.length) {
          selection.insertNode(tagname);
          var range = document.createRange();
          range.setStart(tagname.childNodes[0], tagname.textContent.length);
          range.collapse(true);
          var sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
          }
          else   myTextArea.focus()


       });
         });
  </script>
</head>

<body>
 <div  id="myTextArea" style="background: #ccc" contenteditable="true">
 текст <br />ещё текст<br />и ещё
</div>
<br />
<input type="button" value="Вставить тег b" id="but">

</body>
</html>

Devil198711 · #13 (**permalink**) 10.03.2018, 14:43

Сообщение от рони

Devil198711,
возможно есть проще варианты

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
    window.addEventListener('DOMContentLoaded', function() {
       var myTextArea = document.querySelector('#myTextArea'),
       but = document.querySelector('#but');
       but.addEventListener('click', function() {
       if(!window.getSelection().anchorNode) return;

       var selection = window.getSelection().getRangeAt(0);
            var selectedText = selection.extractContents();
            var tagname = document.createElement('b');
            tagname.appendChild(selectedText);

          if(tagname.textContent.length) {
          selection.insertNode(tagname);
          var range = document.createRange();
          range.setStart(tagname.childNodes[0], tagname.textContent.length);
          range.collapse(true);
          var sel = window.getSelection();
          sel.removeAllRanges();
          sel.addRange(range);
          }
          else   myTextArea.focus()


       });
         });
  </script>
</head>

<body>
 <div  id="myTextArea" style="background: #ccc" contenteditable="true">
 текст <br />ещё текст<br />и ещё
</div>
<br />
<input type="button" value="Вставить тег b" id="but">

</body>
</html>

Спасибо, но проблемы с вставкой тегов я решил уже, единственное что мне никак не поддается это вернуть выделение в прежнее положение при потере фокуса редактора. То есть когда я нажимаю на кнопку вставки ссылки появляется модальное окно с тремя полями форм (урл, текст ссылки, тайтл), и при установке курсора в любое поле редактор теряет фокус и ответственно забывает выделенный текст, вот я и не могу понять как при нажатии кнопки "вставить ссылку" заменить выделенный текст или вставить там где была каретка

рони · #14 (**permalink**) 10.03.2018, 14:54

Devil198711,
не понимаю, разве код выше не решает ваши проблемы?
что мешает сохранить выделение и вернуть обратно? код перед вами

рони · #15 (**permalink**) 10.03.2018, 14:59

Devil198711,
медитировать здесь https://learn.javascript.ru/range-textrange-selection

Devil198711 · #16 (**permalink**) 10.03.2018, 15:11

Сообщение от рони

Devil198711,
не понимаю, разве код выше не решает ваши проблемы?
что мешает сохранить выделение и вернуть обратно? код перед вами

И беда что я не могу понять как это сделать (Слишком туп наверное)

Devil198711 · #17 (**permalink**) 10.03.2018, 20:04

Всем спасибо за помощь, вот что у меня получилось

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="editor" style="border:1px dashed #999; color:#666; background:#EEE; padding:2px 5px; margin:10px 0;" contenteditable>
    какой-то текст
  </div>
  <div>
    <input onclick="setSelection()" type="button" value="Выделить">
    <input onclick="saveSelection()" type="button" value="Сохранить выделение">
  </div>
  <script>
    var wsEditor = document.getElementById('editor');
    var wsSelection;
    function setSelection() {
        if (wsSelection) {
            var sel = window.getSelection();
            var rng = document.createRange();
            rng.selectNode(wsEditor);
            rng.setStart(wsSelection.startContainer, wsSelection.startOffset);
            rng.setEnd(wsSelection.endContainer, wsSelection.endOffset);
            sel.removeAllRanges();
            sel.addRange(rng);
        }                    
    }
    function saveSelection() {
        wsEditor.focus()
        var sel = window.getSelection();
        if (sel.anchorNode) {
            wsSelection = sel.getRangeAt(0);
        }
    }
  </script>


</body>

рони · #18 (**permalink**) 10.03.2018, 20:29

Devil198711,
добавьте run в пост №17

[HTML  run][/HTML]

Devil198711 · #19 (**permalink**) 14.03.2018, 16:01

Подскажите как получить картинку которая в данный момент выделена

j0hnik · #20 (**permalink**) 14.03.2018, 19:22

смотря как выделена.
event.target ссылка на объект вызвавший событие.

Форум

Справочник

Discord чат

Курсы javascript