Интеграция визуального текстового редактора

Создайте свой собственный плагин wysiwyg.

Elgg поставляется с плагином для CKEditor, а ранее поддерживал TinyMCE. Однако, если у вас есть предпочтительный wysiwyg, вы можете использовать этот урок, чтобы помочь вам создать свой собственный.

Все формы в Elgg должны стараться использовать предоставленные представления input, расположенные в views/default/input. Если эти представления используются, то авторам плагинов просто заменить представление, в данном случае input/longtext, на свой wysiwyg.

Добавление кода библиотеки WYSIWYG

Теперь вам нужно загрузить TinyMCE в директорию вашего плагина. Мы настоятельно рекомендуем использовать composer для управления сторонними зависимостями, так как это значительно упрощает обновление и поддержку:

composer require npm-asset/tinymce

Сообщите Elgg, когда и как загружать TinyMCE

Теперь, когда у вас есть:

  • создан ваш стартовый файл

  • инициализирован плагин

  • загружен код wysiwyg

Пришло время сообщить Elgg, как применять TinyMCE к полям longtext.

Мы сделаем это, расширив представление input/longtext и добавив немного JavaScript. Создайте представление tinymce/longtext и добавьте следующий код:

<?php

    /**
     * Elgg long text input with the tinymce text editor intacts
     * Displays a long text input field
     */

?>
<!-- include tinymce -->
<script language="javascript" type="text/javascript" src="<?php echo $vars['url']; ?>mod/tinymce/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<!-- intialise tinymce, you can find other configurations here http://wiki.moxiecode.com/examples/tinymce/installation_example_01.php -->
<script language="javascript" type="text/javascript">
   tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,image,blockquote,code",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],
hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]"
});
</script>

Затем в файле elgg-plugin.php вашего плагина расширьте представление input/longtext:

return [
    'view_extensions' => [
            'input/longtext' => [
                    'tinymce/longtext' => [],
            ],
    ],
];

Вот и всё! Теперь каждый раз, когда кто-то использует input/longtext, TinyMCE будет загружен и применён к этому текстовому полю.