Форум

Ska1n · #1 (**permalink**) 31.01.2013, 13:46

Приветствую. Подскажите новичку в js, пожалуйста, хочется создать велосипед в виде редактора-html, в какую степь копать? нагугливал два способа реализации, мол один использовать редактирование встроенными средствами браузера, а второй - полная эмуляция на js. Вот хочется опробовать второй вариант. Скажем, в какую сторону копать обработку свойств выделенного текста? или, допустим, реализацию подобной фичи - перетаскиваешь картинку из папки в окно редактора, та автоматически загружает ее на сервер и показывает в определенной миниатюре уже в редакторе?

DjDiablo · #2 (**permalink**) 31.01.2013, 14:16

Мне более симпотично средствами браузера

Должно работать во всех современных браузерах включая ie9.

<!DOCTYPE HTML>
<html>
  <head> 
    <style>
      td{
         border:1px solid red; padding:5;border-collapse:collapse;
      }
   </style>

   </head>
  <body>    

<button onClick="document.execCommand('bold', false, null);"> Жирный</button>
<button onClick="document.execCommand('italic', false, null);"> Наклон</button>
<button onClick="document.execCommand('insertunorderedlist', false, null);"> список</button>
<button onClick="document.execCommand('Delete', false, null);"> Удалить </button>


  <div id="myDiv" contenteditable="true">
        <h1>Список</h1>
       <ul id="todolist">  
          <li>Купить123123 молок</li><li>Починить дверь</li>	 
          <li>Отредактировать список!</li>
       </ul>
        <h1>Таблица</h1>
       <table class="tab">
            <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr> 
            <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr> 
      </table>
  </div>    
  </body>
</html>

список команд http://blog.in16.ru/index.php/2010/07/22/execcommand/

описуха Rich Text Editing на MDN + пример толкового редактора

Ska1n · #3 (**permalink**) 31.01.2013, 14:51

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