Intégrer un éditeur de texte
Construisez votre propre plugin wysiwyg.
Elgg est actuellement distribué avec un plugin pour CKEditor, et était précédemment distribué avec le support de TinyMCE. Cependant, s’il y a un éditeur wysiwyg que vous préférez, vous pourriez utiliser ce tutoriel pour construire le vôtre.
Tous les formulaires dans Elgg devraient essayer d’utiliser les vues de saisie situées dans views/default/input
. Si ces vues sont utilisées, il est plus aisé pour les auteurs de plugins de remplacer une vue, ici input/longtext
, par une vue avec leur wysiwyg.
Ajoutez la bibliothèque de code WYSIWYG
Vous devez maintenant télécharger TinyMCE dans un répertoire de votre plugin. Nous vous encourageons fortement à utiliser composer
pour gérer les dépendances tierces, car il est tellement plus facile de mettre à niveau et de maintenir de cette façon :
composer require npm-asset/tinymce
Dites à Elgg quand et comment charger TinyMCE
Maintenant que vous avez :
créé le fichier start
initialisé le plugin
chargé le code wysiwyg
Il est temps de dire à Elgg comment appliquer TinyMCE aux champs de saisie de texte.
Nous allons le faire en étendant la vue input/longtext
et en incluant du javascript. Créez une vue tinymce/longtext
et ajoutez le code suivant :
<?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>
Ensuite, dans le fichier elgg-plugin.php
de votre plugin étendez la vue input/longtext
:
return [
'view_extensions' => [
'input/longtext' => [
'tinymce/longtext' => [],
],
],
];
Et voilà ! Maintenant, chaque fois que quelqu’un utilise input/longtext
TinyMCE sera chargé et appliqué à ce champ de saisie de texte.