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

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (Пока оценок нет)
Загрузка...

Автор

Светозар

Основатель блога kolesnikov.pw, увлекаюсь свободным ПО и операционными системами Linux. В качестве основной ОС сейчас использую Arhc Linux с Deepin DE. Кроме Linux интересуюсь разработкой WEB сайтов и страйкболом(Airsoft).

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

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