Найти на сайте

Html редактор Ace. Обновление !!!

+21
2.93K
  2. Блоги
  3. Html редактор Ace. Обновление !!!
HTML ACE предназначен для удобной работы с встроенным html кодом на вашем сайте. В стандартном поле HTML блок нет подсветки и эта проблема решена в HTML ACE, плюс подключены клавиатурные комбинации. В пакете идет само поле HTML ACE, которое вы можете подключить к типу контента и виджет с встроенным HTML ACE. Подробное об этом редакторе вы можете прочитать тут https://ace.c9.io/, пощупать как работает редактор тут https://ace.c9.io/build/kitchen-sink.html (в левом блоке настроек уберите галочку с Read-only для доступа к редактированию страницы)
В данной реализации я настроил работу с Emmet.
Доступны следующие клавиатурные комбинации 

  1. Keyboard Shortcuts
  2.  
  3. goToNextError : Alt-E
  4.  
  5. goToPreviousError : Alt-Shift-E
  6.  
  7. selectall : Ctrl-A
  8.  
  9. gotoline : Ctrl-L
  10.  
  11. toggleFoldWidget : F2
  12.  
  13. findnext : Ctrl-K
  14.  
  15. findprevious : Ctrl-Shift-K
  16.  
  17. find : Ctrl-F
  18.  
  19. overwrite : Insert
  20.  
  21. selecttostart : Ctrl-Shift-Home
  22.  
  23. gotostart : Ctrl-Home
  24.  
  25. selectup : Shift-Up
  26.  
  27. golineup : Up
  28.  
  29. selecttoend : Ctrl-Shift-End
  30.  
  31. gotoend : Ctrl-End
  32.  
  33. selectdown : Shift-Down
  34.  
  35. golinedown : Down
  36.  
  37. selectwordleft : Ctrl-Shift-Left
  38.  
  39. selecttolinestart : Alt-Shift-Left
  40.  
  41. gotolinestart : Alt-Left|Home
  42.  
  43. selectleft : Shift-Left
  44.  
  45. gotoleft : Left
  46.  
  47. selectwordright : Ctrl-Shift-Right
  48.  
  49. gotowordright : Ctrl-Right
  50.  
  51. selecttolineend : Alt-Shift-Right
  52.  
  53. gotolineend : Alt-Right|End
  54.  
  55. selectright : Shift-Right
  56.  
  57. gotoright : Right
  58.  
  59. selectpagedown : Shift-Pagedown
  60.  
  61. gotopagedown : Pagedown
  62.  
  63. selectpageup : Shift-Pageup
  64.  
  65. gotopageup : Pageup
  66.  
  67. scrollup : Ctrl-Up
  68.  
  69. scrolldown : Ctrl-Down
  70.  
  71. selectlinestart : Shift-Home
  72.  
  73. selectlineend : Shift-End
  74.  
  75. togglerecording : Ctrl-Alt-E
  76.  
  77. replaymacro : Ctrl-Shift-E
  78.  
  79. jumptomatching : Ctrl-P
  80.  
  81. selecttomatching : Ctrl-Shift-P
  82.  
  83. expandToMatching : Ctrl-Shift-M
  84.  
  85. removeline : Ctrl-D
  86.  
  87. duplicateSelection : Ctrl-Shift-D
  88.  
  89. sortlines : Ctrl-Alt-S
  90.  
  91. togglecomment : Ctrl-/
  92.  
  93. toggleBlockComment : Ctrl-Shift-/
  94.  
  95. modifyNumberUp : Ctrl-Shift-Up
  96.  
  97. modifyNumberDown : Ctrl-Shift-Down
  98.  
  99. replace : Ctrl-H
  100.  
  101. undo : Ctrl-Z
  102.  
  103. redo : Ctrl-Shift-Z|Ctrl-Y
  104.  
  105. copylinesup : Alt-Shift-Up
  106.  
  107. movelinesup : Alt-Up
  108.  
  109. copylinesdown : Alt-Shift-Down
  110.  
  111. movelinesdown : Alt-Down
  112.  
  113. del : Delete
  114.  
  115. backspace : Shift-Backspace|Backspace
  116.  
  117. cut_or_delete : Shift-Delete
  118.  
  119. removetolinestart : Alt-Backspace
  120.  
  121. removetolineend : Alt-Delete
  122.  
  123. removetolinestarthard : Ctrl-Shift-Backspace
  124.  
  125. removetolineendhard : Ctrl-Shift-Delete
  126.  
  127. removewordleft : Ctrl-Backspace
  128.  
  129. removewordright : Ctrl-Delete
  130.  
  131. outdent : Shift-Tab
  132.  
  133. indent : Tab
  134.  
  135. blockoutdent : Ctrl-[
  136.  
  137. blockindent : Ctrl-]
  138.  
  139. transposeletters : Alt-Shift-X
  140.  
  141. touppercase : Ctrl-U
  142.  
  143. tolowercase : Ctrl-Shift-U
  144.  
  145. expandtoline : Ctrl-Shift-L
  146.  
  147. addCursorAbove : Ctrl-Alt-Up
  148.  
  149. addCursorBelow : Ctrl-Alt-Down
  150.  
  151. addCursorAboveSkipCurrent :Ctrl-Alt-Shift-Up
  152.  
  153. addCursorBelowSkipCurrent :Ctrl-Alt-Shift-Down
  154.  
  155. selectMoreBefore : Ctrl-Alt-Left
  156.  
  157. selectMoreAfter : Ctrl-Alt-Right
  158.  
  159. selectNextBefore : Ctrl-Alt-Shift-Left
  160.  
  161. selectNextAfter : Ctrl-Alt-Shift-Right
  162.  
  163. alignCursors : Ctrl-Alt-A
  164.  
  165. findAll : Ctrl-Alt-K
(Большая часть комбинаций мною были проверены и работали должным образом, если вы обнаружите не рабочий вариант, пожалуйста сообщите мне об этом)

Html редактор Ace
Виджет

Html редактор Ace

от Atid
Скачать 1 753 загрузки


Обновление
+ Добавлена возможность вывода поля Html Ace в записях
Шаблон OneMinima для InstanCMS2 (Релиз)
htmlhtml aceредактор
Олег Васильевич я Олег Васильевич я 6 лет назад #
Комментарий удален
0
Pro AV Pro AV 6 лет назад #
Да просто супер, очень понравилось.
Там у вас поле для контента есть но почему то без функции вывода на сайт
public function parse($value) // вывод записи контента
это на обновление оставили, или как?
0
Atid Atid 6 лет назад #
Я доподлинно пока не знаю как будет правильнее сделать этот вывод. поэтому не подключил пока.
Код PHP:
  1.         public function parse($value){
  2.  
  3.             if ($this->getOption('is_html_filter')){
  4.                 $value = cmsEventsManager::hook('html_filter', array(
  5.                     'text'                => $value,
  6.                     'is_auto_br'          => true,
  7.                     'build_redirect_link' => (bool)$this->getOption('build_redirect_link')
  8.                 ));
  9.             }
  10.  
  11.             return $value;
  12.  
  13.         }
Вот так вроде правильно.
0
Pro AV Pro AV 6 лет назад #
Вот так работает правильно ::

Код PHP:
  1. 	// получаем фильтр :: 
  2. 	public function getFilterInput($value) {
  3.         return html_input('text', $this->name, $value);
  4.     }
  5.  
  6. 	// вывод записи контента ::
  7. 	public function parse($value) {
  8.         if ($this->getOption('is_html_filter')){
  9.             $value = cmsEventsManager::hook('html_filter', array(
  10.                 'text'                => $value,
  11.                 'is_auto_br'          => false,
  12.                 'build_smiles'        => $this->getOption('editor') == 'markitup', // пока что только так
  13.                 'build_redirect_link' => (bool)$this->getOption('build_redirect_link')
  14.             ));
  15.         }
  16.         return $value;
  17.     }
  18.  
  19. 	// применить фильтр ::
  20. 	public function applyFilter($model, $value) {
  21.         return $model->filterLike($this->name, "%{$value}%");
  22.     }
0
Atid Atid 6 лет назад #
а для чего
Код PHP:
  1. `build_smiles'        => $this->getOption('editor') == 'markitup',
? Что он делает?
0
ideasdigger ideasdigger 6 лет назад #
$this->getOption('editor')
получает опцию из настроек
$this->getOption('editor') == 'markitup',
сравнивает её с markitup возвращает true
0
Loadырь Loadырь 6 лет назад #
Весь блок public function parse($value) в данном типе поля не нужен так как нет этих опций 'is_html_filter', 'editor', 'build_redirect_link'. Либо он сведётся к минимуму
Код PHP:
  1. // вывод записи контента ::
  2. public function parse($value) {
  3.     return $value;
  4. }
А это равнозначно тому, что выведет родительский класс поля.
Методы public function getFilterInput($value) и public function applyFilter($model, $value), тоже сомнителны, нужна ли фильтрация по коду в данном случае.
В общем всё гораздо проще можно сделать. А если это поле используется только в виджете с кодом, то его можно вообще сделать скрытым в общем списке полей.
0
webtotma webtotma 6 лет назад #
За настройку emmet отдельное спасибо ...

Еще от автора

Шаблон OneMinima для InstanCMS2 (Релиз)

Шаблон OneMinima для InstanCMS2 (Релиз)

Здравствуйте уважаемые пользователи и гости сайта InstantCMS. Представляем вашему вниманию релиз шаблона OneMinima для второй ветки.
19
Анонс шаблона OneMinima для InstanCMS2

Анонс шаблона OneMinima для InstanCMS2

Здравствуйте уважаемые пользователи!
26
Обновление шаблона OneNews под InstancCMS 2.4.0

Обновление шаблона OneNews под InstancCMS 2.4.0

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

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.