Ноу-хау: CKEditor

8 января 2018 (09:52:14)

А вы знаете, что современные браузеры умеют копировать с просматриваемых страниц не только текст, но и его оформление в виде тегов HTML? Очень удобная штука для всяких перепостов, копирований между админками и тому подобного.

Есть, однако, важный нюанс: то приложение, куда будет вставляться скопированное, должно понимать, что это именно HTML, иначе вставится голый текст без разметки. Абсолютное большинство редакторов этого не понимают.

С другой стороны, есть интересное решение в виде браузерного редактора. А действительно: если всё это предполагается для каких-то операций онлайн, то и онлайн-решение здесь вполне уместно.

Создаём текстовый файл с расширением htm или html — пусть он называется, к примеру, editor.html и следующим содержанием:


<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>CKEditor</title>
   <script src="https://cdn.ckeditor.com/4.8.0/full/ckeditor.js"></script>
 </head>
  <body>
    <textarea name="editor1"></textarea>
    <script>
      CKEDITOR.replace( 'editor1', {height: '550px'} );
    </script>
  </body>
</html>

Заголовок, естественно, может быть любым. А в строке {height: '550px'} вместо 550 нужно подобрать нужную высоту окна редактирования, соответствующую вашему разрешению экрана, используемым браузерам и т.п.

Дальше всё очень просто: открываем этот файл в браузере (просто кликаем его в файл-менеджере, или делаем закладку на локальный файл, или как вы там ещё предпочитаете) и получаем вполне серьёзный WYSIWYG-редактор HTML-кода. Он и сам по себе неплохо подходит для написания всяких веб-постов (пока это лучший визуальный редактор из всех, что я видел), и вышеупомянутое браузерное копирование отлично понимает.