Comment utiliser l'éditeur de texte enrichi WangEditor dans ThinkPHP6 ?

Avec le développement rapide d'Internet, les éditeurs de texte enrichi sont devenus un élément indispensable du processus de développement de sites Web. En tant qu'éditeur de texte riche open source national, WangEditor possède d'excellentes fonctionnalités telles que la facilité d'utilisation, des fonctions légères et riches, et est progressivement devenu le premier choix de nombreux développeurs.

ThinkPHP6, en tant que l'un des frameworks de développement PHP les plus courants en Chine, fournit également une multitude de fonctions d'extension qui peuvent aider les développeurs à intégrer rapidement l'éditeur de texte riche WangEditor. Cet article présentera en détail comment utiliser l'éditeur de texte enrichi WangEditor dans ThinkPHP6.

1. Téléchargez WangEditor

Tout d'abord, nous devons télécharger le code source de l'éditeur WangEditor. Vous pouvez télécharger la dernière version sur le site officiel de WangEditor (https://www.wangeditor.com/). Après avoir décompressé le code source, copiez le répertoire dans le répertoire public de notre projet ThinkPHP6.

2. Présentez les fichiers de ressources WangEditor

Dans les pages où nous devons utiliser WangEditor, nous devons introduire les fichiers de ressources suivants :

<link rel="stylesheet" type="text/css" href="/public/wangEditor-3.1.1/release/wangEditor.min.css">
<script type="text/javascript" src="/public/wangEditor-3.1.1/release/wangEditor.min.js"></script>

Parmi eux, wangEditor.min.css est le fichier de style de WangEditor et wangEditor. min.js est le fichier de style du fichier Javascript principal de WangEditor.

3. Créer la page

Dans la page où nous devons utiliser WangEditor, nous devons créer un conteneur div pour afficher l'éditeur et définir un identifiant. Par exemple :

<div id="editor"></div>

4. Initialiser WangEditor

Une fois la page chargée, nous devons initialiser WangEditor et définir les paramètres pertinents pour celui-ci. Voici un exemple simple :

<script type="text/javascript">
    var editor = new wangEditor('#editor');
    editor.create();
</script>

où #editor est l'ID du div que nous avons défini. Instanciez via var editor = new wangEditor('#editor');, puis initialisez l'éditeur via la méthode editor.create(). À ce stade, notre page peut utiliser l'éditeur de texte enrichi WangEditor.

5. Définir les paramètres de l'éditeur

En plus d'initialiser l'éditeur, nous pouvons également définir les paramètres de l'éditeur selon nos besoins. Voici quelques exemples, que vous pouvez choisir en fonction de vos besoins :

Définissez la largeur et la hauteur de l'éditeur

var editor = new wangEditor('#editor');
editor.config.height = 500;    //设置编辑器高度
editor.config.width = '100%';  //设置编辑器宽度

Définissez la couleur de la police et la couleur d'arrière-plan de l'éditeur

var editor = new wangEditor('#editor');
editor.config.colors = [    //设置颜色选项
    '#000000', '#eeece0', '#1c487f', '#4d80bf', '#c9c9c9', 
    '#999999', '#005bac', '#ccb8b8', '#7f7f7f', '#f5f5f5', 
    '#c3d69b', '#acc8cc', '#d5e8d4', '#f6cfca', '#ff5555'
];
editor.config.menus = [
    'forecolor',  //字体颜色
    'bgcolor'     //背景颜色
];

Définissez la police de l'éditeur

var editor = new wangEditor('#editor');
editor.config.fontNames = [
    '微软雅黑', '宋体', 'Arial', 'Tahoma', 'Verdana'
];

Définissez la interface pour télécharger des images

var editor = new wangEditor('#editor');
editor.config.uploadImgUrl = '/upload'  //上传图片接口的URL

6. Obtenez le contenu dans l'éditeur

Une fois que l'utilisateur a terminé l'édition, nous devons obtenir le contenu dans l'éditeur. Voici un exemple simple :

<script type="text/javascript">
    var editor = new wangEditor('#editor');
    editor.create();

    //获取编辑器中的内容
    var content = editor.txt.html();   
</script>

où, la méthode editor.txt.html() renvoie la chaîne HTML dans l'éditeur.

Résumé

Ce qui précède est une introduction détaillée à l'utilisation de l'éditeur de texte enrichi WangEditor dans ThinkPHP6. En introduisant simplement des fichiers de ressources, en créant des pages, en initialisant l'éditeur et en définissant les paramètres, nous pouvons rapidement intégrer l'éditeur de texte enrichi WangEditor et implémenter facilement des fonctions d'édition de texte enrichi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!