Comment introduire la configuration en arrière-plan de l'éditeur et du nœud à l'aide de vue

Cet article présente principalement l'introduction de ueditor dans vue et l'explication détaillée de la configuration en arrière-plan du nœud. Maintenant, je le partage avec vous et vous donne une référence.

Récemment, un client de l'entreprise souhaitait utiliser les produits de notre entreprise. Il avait de nombreuses exigences en matière d'éditeur de texte riche dans sa gestion backend. Il avait initialement prévu d'utiliser Quill, mais a constaté que Quill ne pouvait pas y répondre. ses besoins du tout. Après avoir étudié les éditeurs de texte enrichi disponibles sur le marché, il semble qu'il ne reste plus que l'éditeur de Baidu. Même si c'est moche~~~, cela n'a pas d'importance. Le site Web du gouvernement et cet effet sont plus beaux > Téléchargez Baidu ueditor, quelle que soit la version appropriée (cet article utilise la version PHP comme exemple). fonctions complètes, vous pouvez considérer UM

et mettre le dossier correspondant dans En statique

modifier ueditor.confg.js référencé par le front- terminez la partie vue et définissez le chemin window.UEDITOR_HOME_URL = "/static/utf8-php/"
2. Lors de l'écriture des fichiers vue, j'ai configuré la statique dans le chemin du webpack. Je peux le modifier en conséquence. Les différentes méthodes de ueditor peuvent être trouvées dans le index.html du package Baidu ueditor que j'ai téléchargé.

3. Notes

window.UEDITOR_HOME_URL = "/static/utf8-php/"

 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
 /**
  * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
  */
 window.UEDITOR_CONFIG = {

  //为编辑器实例添加一个路径，这个不能被注释
  UEDITOR_HOME_URL: URL
  // 服务器统一请求接口路径
  , serverUrl: "http://localhost:3000/ueditor/ue"
 // ............ 下面忽略................

<template>
 <p class="hello">
 <script id="editor" type="text/plain"></script>
 <button @click="show">你敢点一下吗？</button>
 </p>
</template>

<script>
export default {
 name: &#39;HelloWorld&#39;,
 data () {
 return {
  editor: null
 }
 },
 methods: {
 show () {
  console.log(this.editor.getContent())
 }
 },
 mounted () {
 require(&#39;static/utf8-php/ueditor.config.js&#39;)
 require(&#39;static/utf8-php/ueditor.all.min.js&#39;)
 require(&#39;static/utf8-php/lang/zh-cn/zh-cn.js&#39;)
 require(&#39;static/utf8-php/ueditor.parse.min.js&#39;)
 this.editor = window.UE.getEditor(&#39;editor&#39;)
 },
 destroyed () {
 this.editor.destroy()
 }
}
</script>

L'URL du serveur à l'étape 3 est écrite comme l'adresse du serveur correspondante

1. traitement backend du nœud

2. implémentation express

Quelqu'un sur Internet a déjà implémenté la version express. Ceux qui utilisent express ont de la chance. Cependant, il ne peut pas être utilisé directement lorsque je l'utilise directement. ": inattendu" est signalé dans le navigateur. J'ai modifié son code pour qu'il ne redirige pas lors du retour de la configuration, mais renvoie directement un contenu jsonp et jsonp. config.json sous le fichier php dans le package ueditor de Baidu. N'oubliez pas d'utiliser des expressions régulières ou de supprimer directement les commentaires à la main. Il n'y a aucun commentaire dans json.

1. implémentation de koa

Il s'agit d'une bibliothèque relativement sophistiquée, et la méthode d'écriture du générateur sera supprimée dans la v3. Il n'est progressivement plus pris en charge, utilisez donc la méthode d'écriture asynchrone. J'utilise principalement la bibliothèque wait-busboy pour implémenter le traitement des fichiers.

2. Mise en œuvre du jugement

Articles connexes :

Utiliser Webpack pour résoudre le problème des fichiers bundle.js trop volumineux

const ActionType = ctx.query.action
// 当ActionType为config时返回与express中一样的json
// 当为uploadimage或uploadfile时处理
处理上传
const parse = require('await-busboy')
const parts = parse(ctx)
 let part,
  stream,
  tmp_name,
  file_path,
  filename
 while ((part = await parts)) {
  if (part.length) {
   // 此处解析到form的fields
   console.log({ key: part[0], value: part[1] })
  } else {
  // 此处解析到文件并以可读流形式返回，通过nodejs官方API存储
  if(ActionType === 'uploadimage' && img_type.indexOf(path.extname(part.filename)) >= 0 ){
   filename = 'pic_'+ (new Date()).getTime() + '_' + part.filename
   file_path = path.join(img_path, filename)
  } else if (ActionType === 'uploadfile'){
   filename = 'file_'+(new Date()).getTime()+'_'+part.filename
   file_path = path.join(files_path, filename)
  }
  stream = fs.createWriteStream(path.join(static_path,file_path))
  part.pipe(stream)
  tmp_name = part.filename
 }
 // 返回json要引用koa-jsonp哦~~

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!