Подсветка кода в TinyMce
1. Как в редакторе TinyMce при переключении чекбокса Toggle Editor редактировать в Ace, и на оборот?
РЕШЕНО:
<script>
// assets/components/tinymce/tiny.js:110 — addContentBelow()
if (cb.dom.checked) {
tinyMCE.execCommand('mceAddControl',false,id);
Ext.state.Manager.set(MODx.siteId+'-tiny',true);
//Ext.select('#x-form-el-ta > .ace_editor').remove();
Ext.select('#x-form-el-ta > .ace_editor').hide().setHeight(0);
} else {
tinyMCE.execCommand('mceRemoveControl',false,id);
Ext.state.Manager.set(MODx.siteId+'-tiny',false);
if (Ext.select('#x-form-el-ta > .ace_editor').elements.length == 0) {
MODx.ux.Ace.replaceTextAreas(Ext.query('#ta'));
Ext.get(id).setHeight(0).hide();
} else {
Ext.select('#x-form-el-ta > .ace_editor').show().setHeight(386);
}
}
</script>
Теперь станет удобно верстать контент разработчику или администратору, если нет контент-менеджера.2. Как в всплывающем окне TinyMce [HTML] textarea заменить на редактор кода Ace?
ВОПРОС:
UPD: Спасибо полезным статьям и их авторам, которые помогли дополнить данный функционал, но вопрос №2 с Ext3 [htmlSource] в TinyMCE, ещё открыт. Предлагайте свои варианты!
Ссылки по теме:
modzone.ru/blog/2016/04/23/plug-ace-to-the-fields/
modx.pro/help/3213
webstool.ru/modx-podklyuchit-tekstovoj-redaktor-k-dop.-polyam-resursa.html
Поблагодарить автора
Отправить деньги
Комментарии: 11
Или же как-то во FrontendEditor включить Ace?
не будет ли простым решением перейти на CKEditor?
там codemirror по умолчанию идет
там codemirror по умолчанию идет
Нет, тут необходима кастомизация только для Ace с TinyMce
Просто интересно, а зачем?
У меня такая потребность появляется, потому что я редактирую в Ace, а контент-менеджер в Mce, поэтому мне надо угодить ему, чтобы было удобно в Mce открыть htmlSource и оперативно верстать при помощи emmet, затем сохранять обратно в Mce.
Думаю тут будет уместным разобрать вопрос, чтобы к нему уже не возвращаться. По факту надо найти функцию Сhange и при переключении toggle подменять на Ace, но как это сделать в Ext ума не приложу, так как если делать на onReady подмену textarea, то только Ace грузится в поле content, нормально объяснил?
Думаю тут будет уместным разобрать вопрос, чтобы к нему уже не возвращаться. По факту надо найти функцию Сhange и при переключении toggle подменять на Ace, но как это сделать в Ext ума не приложу, так как если делать на onReady подмену textarea, то только Ace грузится в поле content, нормально объяснил?
Верстать в админке это сильно, это не каждый сможет. А почему не работаешь с файлами?
А как в всплывающем окне TinyMce [HTML] textarea заменить на редактор кода Ace?
Решение так и не нашли?
решение же выкатил автор вопроса в теле под первым пунктом сразу.
Вот самый простой вариант, но только для админа.
<?php
switch ($modx->event->name) {
case 'OnDocFormPrerender':
if ($doc = $modx->getObject('modDocument', $id)) {
if ($doc->get('richtext') == 1 && $modx->user->id == 1) {
$script = '';
$script .= "MODx.ux.Ace.replaceTextAreas(Ext.query('#ta'));";
$script .= "Ext.select('.x-form-textarea.x-form-field.ace_editor');";
$modx->controller->addHtml('<script>Ext.onReady(function() {' . $script . '});</script>');
}
}
if (!$modx->controller->resourceArray) {
return;
}
break;
default:
return;
}
Так это просто весь MCE меняет на Ace. А вот как во всплывающем окне с исходным кодом, Ace подключить. К примеру как в платном плагине TinyMCE — advcode.
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.