Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 09.03.2018, 23:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Devil198711,
редакторы по ссылке выше, содержат все необходимые вам решения, в том числе и на js, нужно только читать их код.
Ответить с цитированием
  #12 (permalink)  
Старый 10.03.2018, 01:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

contenteditable возвращение курсора в конец выделения
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>

Последний раз редактировалось рони, 10.03.2018 в 01:05.
Ответить с цитированием
  #13 (permalink)  
Старый 10.03.2018, 14:43
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Devil198711,
не понимаю, разве код выше не решает ваши проблемы?
что мешает сохранить выделение и вернуть обратно? код перед вами
Ответить с цитированием
  #15 (permalink)  
Старый 10.03.2018, 14:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Devil198711,
медитировать здесь https://learn.javascript.ru/range-textrange-selection
Ответить с цитированием
  #16 (permalink)  
Старый 10.03.2018, 15:11
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

Сообщение от рони Посмотреть сообщение
Devil198711,
не понимаю, разве код выше не решает ваши проблемы?
что мешает сохранить выделение и вернуть обратно? код перед вами
И беда что я не могу понять как это сделать (Слишком туп наверное)
Ответить с цитированием
  #17 (permalink)  
Старый 10.03.2018, 20:04
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

Всем спасибо за помощь, вот что у меня получилось
<!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>

Последний раз редактировалось Devil198711, 11.03.2018 в 22:39.
Ответить с цитированием
  #18 (permalink)  
Старый 10.03.2018, 20:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,052

Devil198711,
добавьте run в пост №17
[HTML  run][/HTML]
Ответить с цитированием
  #19 (permalink)  
Старый 14.03.2018, 16:01
Интересующийся
Отправить личное сообщение для Devil198711 Посмотреть профиль Найти все сообщения от Devil198711
 
Регистрация: 21.04.2016
Сообщений: 21

Подскажите как получить картинку которая в данный момент выделена
Ответить с цитированием
  #20 (permalink)  
Старый 14.03.2018, 19:22
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите написать условия совершения события wingsfury Events/DOM/Window 1 21.12.2016 23:03
Ребят помогите, не знаю как написать скрипт с проверкой файлов на присутствие sergera0 Ваши сайты и скрипты 1 16.07.2016 14:35
Помогите написать скрипт! tema1508 Общие вопросы Javascript 1 01.03.2013 00:05
Онлайновый текстовый редактор html/js. Нужны советы. elf2002 Javascript под браузер 9 03.01.2012 02:48
Помогите плисс написать скрипт Gnusmus Events/DOM/Window 6 17.08.2011 15:51