Подсветка кода в 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

R2m0x94 (Vasily)

21 мая 2022, 14:58

755

Поблагодарить автора Отправить деньги

Комментарии: 11

R2m0x94 (Vasily)

21 мая 2022, 15:08

Или же как-то во FrontendEditor включить Ace?

Константин Ильин

21 мая 2022, 20:44

не будет ли простым решением перейти на CKEditor?
там codemirror по умолчанию идет

R2m0x94 (Vasily)

22 мая 2022, 09:59

Нет, тут необходима кастомизация только для Ace с TinyMce

Артур Шевченко

21 мая 2022, 22:57

Просто интересно, а зачем?

R2m0x94 (Vasily)

22 мая 2022, 09:56

У меня такая потребность появляется, потому что я редактирую в Ace, а контент-менеджер в Mce, поэтому мне надо угодить ему, чтобы было удобно в Mce открыть htmlSource и оперативно верстать при помощи emmet, затем сохранять обратно в Mce.

Думаю тут будет уместным разобрать вопрос, чтобы к нему уже не возвращаться. По факту надо найти функцию Сhange и при переключении toggle подменять на Ace, но как это сделать в Ext ума не приложу, так как если делать на onReady подмену textarea, то только Ace грузится в поле content, нормально объяснил?

Артур Шевченко

22 мая 2022, 16:31

Верстать в админке это сильно, это не каждый сможет. А почему не работаешь с файлами?

R2m0x94 (Vasily)

23 мая 2022, 15:14

А как в всплывающем окне TinyMce [HTML] textarea заменить на редактор кода Ace?

Вячеслав

15 декабря 2022, 16:43

Решение так и не нашли?

Алексей Смирнов

15 декабря 2022, 21:45

решение же выкатил автор вопроса в теле под первым пунктом сразу.

Кровельный

08 июня 2023, 10:16

Вот самый простой вариант, но только для админа.

<?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;
}

Вячеслав

08 июня 2023, 15:05

Так это просто весь MCE меняет на Ace. А вот как во всплывающем окне с исходным кодом, Ace подключить. К примеру как в платном плагине TinyMCE — advcode.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Здесь упомянуты:

Компонент	Текущая версия	Закачки
Ace	1.9.3-pl от 15.05.2022	13 620
FrontendEditor	1.2.2-pl от 14.10.2020	159
ckeditor	1.4.5-pl от 22.04.2023	203