Présentation de l'éditeur de texte enrichi Tinymce dans le projet Vue

Cet article présente principalement l'exemple de code d'introduction de l'éditeur de texte riche tinymce dans le projet Vue. Il est très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent se référer au code initialement utilisé dans le projet

L'éditeur de texte enrichi est wangEditor, qui est un éditeur très léger et concis

Cependant, l'activité de l'entreprise a été améliorée et je souhaite un éditeur avec des fonctions plus complètes que je recherche depuis longtemps. . Les éditeurs courants incluent actuellement ceux-ci :

UEditor : le projet open source front-end de Baidu, qui est puissant et basé sur jQuery, mais il n'est plus maintenu et le code back-end est limité, ce qui rend la tâche difficile. à modifier.

bootstrap-wysiwyg : micro , facile à utiliser, petit et beau, juste Bootstrap + jQuery...

kindEditor : code puissant et simple, besoin de configurer l'arrière-plan, et il n'a pas été mis à jour depuis longtemps

wangEditor : léger, il est simple et facile à utiliser, mais après la mise à niveau vers 3.x, il n'est pas pratique pour un développement personnalisé. Mais l'auteur est très assidu. Au sens large, lui et moi sommes des membres de la famille. Appelez-moi

plume : elle n'a pas beaucoup de fonctions, mais elle peut être étendue par elle-même. est également facile à comprendre. Si vous comprenez l'anglais...

summernote : je ne l'ai pas étudié en profondeur. L'interface utilisateur est assez belle et c'est un petit et bel éditeur, mais j'ai besoin d'un grand. un

Avec une telle référence, j'ai finalement choisi tinymce. L'éditeur ne peut même pas ouvrir le site officiel sans échelle (c'est simplement demander des ennuis), principalement à cause de deux points :

1. Il y a de nombreuses étoiles sur GitHub et les fonctions sont complètes

2 . Le seul éditeur capable de conserver la plupart du formatage lors du collage à partir de Word

3. personnel pour scanner les codes et changer l'interface, le front-end et le back-end sont séparés

4 Dites Deux bons points !

1. Téléchargement de ressources

tinymce fournit officiellement un composant tinymce-vue pour le projet vue

npm install @tinymce/tinymce-vue -S

Vous pouvez obtenir une erreur lors de l'exécution de ce code dans le terminal de vscode ou webstorm. Il est préférable d'utiliser l'outil de ligne de commande fourni avec le système d'exploitation

Si. vous avez acheté le service de tinymce, vous pouvez vous référer aux instructions de tinymce-vue et utiliser tinymce directement via api-key

Si vous ne l'avez pas acheté comme moi, vous devez quand même télécharger tinymce

npm install tinymce -S

Après l'installation, recherchez le répertoire tinymce/skins dans node_modules, puis copiez le répertoire skins dans le répertoire statique

// Si il s'agit d'un projet dactylographié construit à l'aide de vue-cli 3.x, placez Allez dans le répertoire public. Tous les répertoires statiques de cet article sont gérés comme ceci

tinymce est par défaut une interface anglaise, vous devez donc également télécharger. un pack de langue chinoise (n'oubliez pas de construire une échelle ! Construisez une échelle ! Construisez une échelle !)

Ensuite, mettez ce package de langue dans le répertoire statique Afin d'avoir une structure claire, j'ai inclus une couche de tinymce. répertoire

2. Initialisation

Introduire les fichiers suivants dans la page

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

tinymce-vue est un composant et doit être enregistré dans les composants, puis utilisez directement

L'init ici est l'élément de configuration d'initialisation de tinymce. Certaines API clés seront abordées plus tard Pour l'API complète, veuillez vous référer à la documentation officielle

Exigences de l'éditeur Un skin peut fonctionner correctement, vous devez donc définir un skin_url vers lequel pointer. le fichier skin précédemment copié

init: {
 language_url: '/static/tinymce/zh_CN.js',
 language: 'zh_CN',
 skin_url: '/static/tinymce/skins/lightgray',
 height: 300
}

// dactylographié créé par le projet vue-cli 3.x, supprimez le statique dans l'url, c'est-à-dire skin_url : '/tinymce/skins/lightgray'

En même temps, il doit également être initialisé une fois monté :

Si l'objet init ci-dessus est passé ici, il ne prendra pas effet, mais une erreur sera signalée si aucun paramètre n'est passé, donc un objet vide est passé ici

3. Plug-in d'extension

Après avoir terminé l'initialisation ci-dessus, l'éditeur peut fonctionner normalement, mais seulement avec quelques fonctions de base

tinymce ajoute des fonctions en ajoutant des plugins

Par exemple, si vous souhaitez ajouter une fonction pour télécharger des images, vous devez utiliser le plug-in image. Pour ajouter un lien hypertexte, vous devez utiliser le plug-in lien

. Vous devez également introduire ces plug-ins sur la page :

Après avoir ajouté le plug-in, les boutons de fonction correspondants seront ajoutés à la barre d'outils par défaut. peut également être personnalisé

Publiez le code complet du composant :

<script>
import tinymce from &amp;#39;tinymce/tinymce&amp;#39;
import &amp;#39;tinymce/themes/modern/theme&amp;#39;
import Editor from &amp;#39;@tinymce/tinymce-vue&amp;#39;
import &#39;tinymce/plugins/image&#39;
import &#39;tinymce/plugins/link&#39;
import &#39;tinymce/plugins/code&#39;
import &#39;tinymce/plugins/table&#39;
import &#39;tinymce/plugins/lists&#39;
import &#39;tinymce/plugins/contextmenu&#39;
import &#39;tinymce/plugins/wordcount&#39;
import &#39;tinymce/plugins/colorpicker&#39;
import &#39;tinymce/plugins/textcolor&#39;
export default {
 name: &#39;tinymce&#39;,
 data () {
  return {
   tinymceHtml: &#39;请输入内容&#39;,
   init: {
    language_url: &#39;/static/tinymce/zh_CN.js&#39;,
    language: &#39;zh_CN&#39;,
    skin_url: &#39;/static/tinymce/skins/lightgray&#39;,
    height: 300,
    plugins: &#39;link lists image code table colorpicker textcolor wordcount contextmenu&#39;,
    toolbar:
     &#39;bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat&#39;,
    branding: false
   }
  }
 },
 mounted () {
  tinymce.init({})
 },
 components: {Editor}
}
</script>

4. Télécharger des images

tinymce fournit des API telles que images_upload_url pour permettre aux utilisateurs de configurer les paramètres pertinents pour le téléchargement d'images.

Mais afin de vous adapter à votre propre projet sans backend gênant, vous devez toujours utiliser images_upload_handler pour personnaliser une méthode de téléchargement

Cette méthode fournira trois paramètres : blobInfo, succès, échec

où blobinfo est un objet contenant des informations sur le fichier téléchargé :

le succès et l'échec sont des fonctions, qui sont signalées lorsque le téléchargement est réussi. Le succès transmet une adresse d'image et, en cas d'échec, transmet le message d'erreur

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!