Texto enriquecido de Tinymce

Texto enriquecido de Tinymce

1. Enlace al sitio web oficial: El editor WYSIWYG más avanzado | Editor de texto enriquecido confiable | TinyMCE /

Instalar componentes: npm install --save "@tinymce/tinymce-vue@^3"

2. Manejo de preguntas frecuentes

El código de manejo de problemas se intercepta del código fuente de sitesCMS. El código completo se puede encontrar en el código fuente de sitesCMS. sitesCMS: sitesCMS es un sistema de gestión de contenidos CMS multisitio basado en JFinal. Sigue el concepto de diseño minimalista de JFinal. Ligero, fácil de expandir y fácil de aprender. No hay otra solución excepto JFinal. Gran dependencia. El diseño funcional optimizado de múltiples sitios facilita el desarrollo dos veces. Un sitio web al día no es un sueño. El módulo API completo admite el acoplamiento frontal de varios mini programas, como mini programas y aplicaciones WeChat, abriendo canales de desarrollo de terminales móviles. SitesCMS no es solo un CMS.

2.1.Chineseización

La solución al problema es que TinyMCE utiliza de forma predeterminada el inglés. Se proporciona el paquete de idioma oficial. Descargue el paquete de idioma chino correspondiente desde esta dirección. Paquetes de idiomas | Editor de texto enriquecido confiable | TinyMCE /Idioma de configuración

idioma: 'zh-Hans',//paquete de idioma chino

2.2 No hay opción de fuente china

El problema es que incluso si se utiliza el paquete chino, todavía no hay chino en el menú desplegable para seleccionar fuentes, lo que sigue siendo un problema de configuración. solución

font_family_formats: "Microsoft Yahei=\'Microsoft Yahei\'; Estilo de canción=\'Estilo de canción\'; Heidi=\'Estilo Hei\'; Imitación de la dinastía de la canción=\'Imitación de la dinastía de la canción\'; Estilo Kai=\'Kaizi \'; Escritura oficial=\ 'Lishu\';Youyuan=\'Youyuan\';Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Courier New= courier new,courier; Georgia=georgia,palatino;Webdings=webdings;Wingdings=wingdings",//Opciones de fuente

Este es un componente encapsulado.

<template> 
  <div class="sceditor"> 
    <Editor 
      v-model="contentValue" 
      :init="init" 
      :disabled="disabled" 
      :placeholder="placeholder" 
      @onClick="onClick" 
    /> 
  </div> 
</template> 
​<script>
 
importar API desde "@/api"; 
importar editor desde "@tinymce/tinymce-vue"; 
importar tinymce desde "tinymce/tinymce"; 
importar "tinymce/themes/silver"; 
importar "tinymce/icons/default"; 
importar "tinymce/icons/default/icons.min.
importar "tinymce/plugins/media"; // 
importar "tinymce/plugins/link"; //超链接
importar "tinymce/plugins/preview"; // 
importar "tinymce/plugins/table"; //表格
​exportar
predeterminado { 
  componentes: { 
    Editor, 
  }, 
  accesorios: { 
    modelValue: { 
      tipo: Cadena, 
      predeterminado: "", 
    }, 
    marcador de posición: { 
      tipo: Cadena, 
      predeterminado: "", 
    }, 
    altura: { 
      tipo: Número, 
      predeterminado: 300, 
    }, 
    deshabilitado: { 
      tipo: booleano, 
      predeterminado: falso, 
    }, 
    complementos: { 
      tipo: [Cadena, Matriz], 
      predeterminado: "código de enlace de vista previa de la tabla de medios", 
    }, 
    barra de herramientas: { 
      tipo: [Cadena, Matriz], 
      predeterminado: 
        "deshacer rehacer | color de fondo del medio color de fondo negrita cursiva subrayado tachado enlace | selección de formato selección de fuente selección de tamaño de fuente | \ 
                    alignleft aligncenter alignright alignjustify anular sangría sangría lineheight | bullist numlist | \ 
                      vista previa de tabla | código selectall", 
    }, 
  }, 
  data() { 
    return { 
      init: { 
        language_url: "tinymce/langs/zh_CN.js", //引入汉化包
        idioma: "zh_CN", //中文
        skin_url:"tinymce/skins/ui/óxido",
        content_css: "tinymce/skins/content/default/content.css", 
        barra de menú: falso, 
        barra de estado: verdadero, 
        complementos: this.plugins, 
        barra de herramientas: this.toolbar, 
        fontsize_formats: 
          "12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px", 
        altura: this.height, 
        marcador de posición: this.placeholder, 
        marca: false, 
        cambio de tamaño: true, 
        elementpath: true, 
        content_style: "", 
        images_upload_handler: async (blobInfo, éxito, fracaso) => { // 这块是上传回调 对接接口
          const data = new FormData(); 
          data.append("archivo", blobInfo.blob(), blobInfo.
          intente {
            const res = espera esto.$API.model.common.upload.post(data); //接口
            success(res.msg.split(",")[0]); 
          } catch (error) { 
            Failure("Falló la carga de la imagen"); 
          } 
        }, 
        configuración: función (editor) { 
          editor.on("init", función () { 
            this.getBody().style.fontSize = "14px"; 
          }); 
        }, 
      }, 
      contentValue: this.modelValue, 
    }; 
  }, 
  mira: { 
  //内容值
    modelValue(val) { 
      this.contentValue = val; 
    }, 
      //传参
    contentValue(val) {
      this.$emit("actualización:modelValue", val); 
    }, 
  }, 
  //初始化
  montado() { 
    tinymce.init({}); 
  }, 
  métodos: { 
    onClick(e) { 
      this.$emit("onClick", e, tinymce); 
    }, 
  }, 
}; 
</script> 
​<estilo>
 
cuerpo .tox-tinymce-aux { 
  índice z: 5000; 
} 
</estilo>

Introducción de la página ,

importar {defineAsyncComponent} desde "vue"; 
const scEditor = defineAsyncComponent(() => import("@/components/scEditor")); 
componentes: { 
    scEditor, 
  }, 
  <el-col :span="24"> 
  <scEditor v-model="form.description" /> 
  </el-col>

como muestra la imagen:

por fin

Gracias por leer. Si tiene alguna deficiencia, ¡no dude en comentarla en el área de comentarios!