Интеграция 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 по умолчанию не будут отображаться в админки при добавлении поста/страницы скрипты, например такие которые описывались Выше.

АВТОР ПОСТА

Светозар

Основатель блога kolesnikov.pw, Arch'евод, системный администратор. Говорят, хорошей парень )).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *