Texte enrichi Tinymce

Texte enrichi Tinymce

1. Lien du site officiel : L'éditeur WYSIWYG le plus avancé | Éditeur de texte enrichi de confiance | TinyMCE /

Installer les composants : npm install --save "@tinymce/tinymce-vue@^3"

2. Gestion des FAQ

Le code de gestion des problèmes est intercepté à partir du code source de sitesCMS. Le code complet peut être trouvé dans le code source de sitesCMS. sitesCMS : sitesCMS est un système de gestion de contenu CMS multi-sites basé sur JFinal. Il suit le concept de conception minimaliste de JFinal. Il est léger, facile à développer et à apprendre. Il n'y a pas d'autre solution que JFinal. Forte dépendance. La conception fonctionnelle multi-sites simplifiée facilite le développement deux fois. Un site Web par jour n'est pas un rêve. Le module API complet prend en charge l'accueil frontal de divers mini-programmes tels que les mini-programmes et applications WeChat, ouvrant ainsi les canaux de développement de terminaux mobiles. SitesCMS n'est pas seulement un CMS.

2.1.Chinoisisation

La solution au problème est que TinyMCE utilise par défaut l'anglais. Le package de langue officielle est fourni. Téléchargez le package de langue chinoise correspondant à partir de cette adresse. Packages de langue | Éditeur de texte enrichi de confiance | TinyMCE /Langue de configuration

langue : 'zh-Hans',//package de langue chinoise

2.2. Il n'y a pas d'option de police chinoise

Le problème est que même si le package chinois est utilisé, il n'y a toujours pas de chinois dans le menu déroulant de sélection des polices. Il s'agit toujours d'un problème de configuration. solution

font_family_formats : "Microsoft Yahei=\'Microsoft Yahei\'; Police de chanson=\'Police de chanson\'; Heidi=\'Police Hei\'; Imitation Song Dynasty=\'Imitation Song Dynasty\'; Kai style=\'Kaiti \'; Script officiel =\ 'Lishu\';Youyuan=\'Youyuan\';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Courier New= coursier new,courier; Georgia=georgia,palatino;Webdings=webdings;Wingdings=wingdings",//Options de police

Il s'agit d'un composant encapsulé

<template> 
  <div class="sceditor"> 
    <Editor 
      v-model="contentValue" 
      :init="init" 
      :disabled="disabled" 
      :placeholder="placeholder" 
      @onClick="onClick" 
    /> 
  </div> 
</template> 
​<script>
 
importer l'API depuis "@/api" ; 
importer l'éditeur depuis "@tinymce/tinymce-vue" ; 
importer tinymce depuis "tinymce/tinymce" ; 
importer "tinymce/themes/silver" ; 
importer "tinymce/icons/default" ; 
importer "tinymce/icons/default/icons.min.
importer "tinymce/plugins/media" ; //表格
import "tinymce/plugins/link" ; //超链接
import "tinymce/plugins/preview" ; //ajouter 
import "tinymce/plugins/table" ; //表格
​export
default { 
  composants : { 
    Éditeur, 
  }, 
  accessoires : { 
    modelValue : { 
      type : Chaîne, 
      par défaut : "", 
    }, 
    espace réservé : { 
      type : Chaîne, 
      par défaut : "", 
    }, 
    hauteur : { 
      type : Nombre, 
      par défaut : 300, 
    }, 
    désactivé : { 
      type : booléen, 
      par défaut : false, 
    }, 
    plugins : {
      type : [Chaîne, Tableau], 
      par défaut : "média de la table d'aperçu du lien de code", 
    }, 
    barre d'outils : { 
      type : [Chaîne, Tableau], 
      par défaut : 
        "annuler le rétablissement | couleur du fond de l'avant-plan du média gras italique souligné lien barré | formatselect fontselect fontsizeselect | \ 
                    alignleft aligncenter alignright alignjustify outdent indent lineheight | bullist numlist | \ 
                      aperçu de la table | code selectall", 
    }, 
  }, 
  data() { 
    return { 
      init: { 
        language_url: "tinymce/langs/zh_CN.js", //引入汉化包
        langue : "zh_CN", //中文
        skin_url :"tinymce/skins/ui/oxyde",
        content_css : "tinymce/skins/content/default/content.css", 
        barre de menu : false, 
        barre d'état : true, 
        plugins : this.plugins, 
        barre d'outils : this.toolbar, 
        fontsize_formats : 
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", 
        hauteur : this.height, 
        espace réservé : this.placeholder, 
        branding : false, 
        resize : true, 
        elementpath : true, 
        content_style : "", 
        images_upload_handler : async (blobInfo, success, failed) => { // 这块Il n'y a pas de problème avec 
          const data = new FormData(); 
          data.append("fichier", blobInfo.blob(), blobInfo.
          essayez {
            const res = attendre ceci.$API.model.common.upload.post(data); //接口
            success(res.msg.split(",")[0]); 
          } catch (erreur) { 
            échec("Échec du téléchargement de l'image"); 
          } 
        }, 
        setup : function (éditeur) { 
          editor.on("init", function () { 
            this.getBody().style.fontSize = "14px"; 
          }); 
        }, 
      }, 
      contentValue : this.modelValue, 
    } ; 
  }, 
  regardez : { 
  //内容值
    modelValue(val) { 
      this.contentValue = val; 
    }, 
      //et 
    contentValue(val) {
      this.$emit("update:modelValue", val); 
    }, 
  }, 
  //初始化
  Mounted() { 
    tinymce.init({}); 
  }, 
  méthodes : { 
    onClick(e) { 
      this.$emit("onClick", e, tinymce); 
    }, 
  }, 
} ; 
</script> 
​<style>
 
corps .tox-tinymce-aux { 
  z-index : 5000 ; 
} 
</style>

Présentation des pages ,

importer {definAsyncComponent} depuis "vue" ; 
const scEditor = définirAsyncComponent(() => import("@/components/scEditor")); 
composants : { 
    scEditor, 
  }, 
  <el-col :span="24"> 
  <scEditor v-model="form.description" /> 
  </el-col>

comme le montre la photo :

enfin

Merci d'avoir lu. Si vous avez des lacunes, n'hésitez pas à en discuter dans la zone de commentaires !