Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Wysiwyg. С чего начать? (https://javascript.ru/forum/offtopic/35128-wysiwyg-s-chego-nachat.html)

Ska1n 31.01.2013 13:46

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

DjDiablo 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 31.01.2013 14:51

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

Serg_pnz 31.01.2013 16:28

http://webew.ru/articles/192.webew

Tim 31.01.2013 18:20

Имхо: проще всего допилить Ace

kobezzza 31.01.2013 19:42

Цитата:

Сообщение от Tim (Сообщение 230774)
Имхо: проще всего допилить Ace

Мне кажется человек хочет принципиально написать свой велосипед с целью обучения

Tim 31.01.2013 23:42

kobezzza,
Многовато будет затруднений для новичка. Одно кроссбраузерное выделение текста чего стоит.

Gozar 01.02.2013 01:05

Цитата:

Сообщение от Tim
Многовато будет затруднений для новичка. Одно кроссбраузерное выделение текста чего стоит.

Предлагаешь забить?

Tim 01.02.2013 09:23

Gozar,
Почему бы и нет?

Gozar 01.02.2013 12:44

Цитата:

Сообщение от Tim
Почему бы и нет?

Почему бы не забить на программирование?


Часовой пояс GMT +3, время: 02:04.