Интеграция TinyMCE WYSIWYG в AnchorCMS 0.9.2

Всем привет, сегодня я расскажу как интегрировать визуальный редактор   TinyMCE WYSIWYG в AnchorCMS 0.9.2

Делать это буду я через командную строку, но с пояснениями.

В моём примере будет два диалоговых окна для краткой и полной новости. Мне так удобнее, суть от этого меняться не будет.

Есть два метода интеграции, очень простой и совсем простой.

Я рассмотрю Вариант с инсталяции в административную панель AnchorCMS, в Добавление/Удаление постов.

Но сначала определим где лежат файлы, который мы будем редактировать?

 pwd 
/home/admin/web/domain.ltd/public_html/anchor/views/posts

Нас интересуют два файла:

-rw-r--r--  1 root root 5281 Янв  6 21:28 add.php 
-rw-r--r--  1 root root 4223 Янв  6 05:59 edit.php

Откройте оба файла по очереди и удалите следующий код:

<script> 
        $('textarea[name=html]').editor(); 
</script>

и

<?php echo $editor; ?>

Подготовка к совсем простой установки закончена.

Откроем файлы add.php и edit .php

Найдем там код

     <?php echo Form::textarea('html', Input::previous('html'), array( 
                                'placeholder' => __('posts.content_explain') 
                        )); ?>

и вставим Выше код:

<!-- CDN hosted by Cachefly --> 
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script> 
<script type="text/javascript"> 
tinymce.init({ 
    selector: "textarea", 
    theme: "modern", 
    plugins: [ 
        "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
        "searchreplace wordcount visualblocks visualchars code fullscreen", 
        "insertdatetime media nonbreaking save table contextmenu directionality", 
        "emoticons template paste textcolor colorpicker textpattern" 
    ], 
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
    toolbar2: "print preview media | forecolor backcolor emoticons", 
    image_advtab: true, 
    templates: [ 
        {title: 'Test template 1', content: 'Test 1'}, 
        {title: 'Test template 2', content: 'Test 2'} 
    ] 
 
}); 
</script>

Все textarea чудесным образом преобразятся в визуальный редактор.

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

Перейдем в папку

# pwd
/home/admin/web/domain.ltd/public_html/anchor/plugins/

Создадим папку tiny — папка нашего плагина.

Загрузим в неё архив с редактором   TinyMCE WYSIWYG с официального сайта

http://www.tinymce.com/download/download.php

Нам нужен
TinyMCE 4.1.7
Contains all you need for production usage.

Через консоль так:

wget http://download.moxiecode.com/tinymce/tinymce_4.1.7.zip

Далее

unzip tinymce_4.1.7.zip

У нас получится так:

#ls -la
drwxr-xr-x 3 root root   4096 Янв  6 21:15 tinymce 
-rw-r--r-- 1 root root 302675 Ноя 27 16:26 tinymce_4.1.7.zip

Если У Вас нет root/ssh доступов, можно сделать через FTP, или панель управления Вашим хостингом.

Нам снова нужно внести изменения в add.php и edit.php

Найдем там код

     <?php echo Form::textarea('html', Input::previous('html'), array( 
                                'placeholder' => __('posts.content_explain') 
                        )); ?>

и вставим Выше код:

<script type="text/javascript" src="/anchor/plugins/tiny/tinymce/js/tinymce/tinymce.min.js"></script> 
<script type="text/javascript"> 
tinymce.init({ 
    selector: "textarea", 
    theme: "modern", 
    plugins: [ 
        "advlist autolink lists link image charmap print preview hr anchor pagebreak", 
        "searchreplace wordcount visualblocks visualchars code fullscreen", 
        "insertdatetime media nonbreaking save table contextmenu directionality", 
        "emoticons template paste textcolor colorpicker textpattern" 
    ], 
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", 
    toolbar2: "print preview media | forecolor backcolor emoticons", 
    image_advtab: true, 
    templates: [ 
        {title: 'Test template 1', content: 'Test 1'}, 
        {title: 'Test template 2', content: 'Test 2'} 
    ] 
 
}); 
</script>

Установка завершена. Все textarea превращаются в  WYSIWYG редактор.

То же самое можно проделать с формой добавления страниц, и формы комментирования, используя для неё упрощенный вариант формы. Будут вопросы, пишите в коменты!

P.S.

Баг №1: Disable Markdown / Disable Markdown. Нужно поправить, иначе на сайте не будет отображаться код скриптов….

Баг №2: Textarea Bug по умолчанию не будут отображаться в админки при добавлении поста/страницы скрипты, например такие которые описывались Выше.