Comment utiliser tinymce dans le projet vue3

tinymce est un plug-in d'éditeur de texte riche entièrement fonctionnel, mais l'introduction de tinymce dans vue n'est pas aussi fluide que les autres plug-ins de texte riche de Vue. tinymce lui-même n'est pas adapté à Vue, et @tinymce/tinymce doit l'être. introduit. -vue, et c'est un plug-in de texte riche étranger. Il n'a pas passé la version chinoise. Vous devez télécharger le package de traduction depuis son site officiel (vous devrez peut-être contourner le mur).

1. Installez les dépendances associées

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

2. Téléchargez le package chinois

3. Créez un nouveau dossier tinymce sous le dossier public du projet,

Extrayez le package chinois téléchargé dans ce dossier

Ensuite, recherchez le dossier skins dans node_modules/tinymce, et copiez-le également dans public/tinymce#🎜🎜 ## 🎜🎜#

4. Encapsulez les composants : créez un nouveau TEditor.vue sous src/components et écrivez le code suivant

<template>
  <editor v-model="myValue" :init="init" :disabled="disabled" :id="tinymceId"></editor>
</template>


<script setup lang="ts">
//JS部分
//在js中引入所需的主题和组件
import tinymce from &#39;tinymce/tinymce&#39;
import &#39;tinymce/skins/content/default/content.css&#39;
import Editor from &#39;@tinymce/tinymce-vue&#39;
import &#39;tinymce/themes/silver&#39;
import &#39;tinymce/themes/silver/theme&#39;
import &#39;tinymce/icons/default&#39;; //引入编辑器图标icon，不引入则不显示对应图标
import &#39;tinymce/models/dom&#39; // 这里是个坑 一定要引入


//在TinyMce.vue中接着引入相关插件
import "tinymce/icons/default/icons"
// import "tinymce/plugins/image" // 插入上传图片插件
// import "tinymce/plugins/media" // 插入视频插件
import "tinymce/plugins/table" // 插入表格插件
import "tinymce/plugins/lists" // 列表插件
import "tinymce/plugins/wordcount" // 字数统计插件
import "tinymce/plugins/code" // 源码
// import "tinymce/plugins/fullscreen" //全屏

//接下来定义编辑器所需要的插件数据
import { reactive, ref } from "vue"
import { onMounted, defineEmits, watch } from "@vue/runtime-core"
import axios from &#39;axios&#39;
// import { updateImg } from &#39;@/api/order/order&#39;
const emits = defineEmits(["getContent"])
//这里我选择将数据定义在props里面，方便在不同的页面也可以配置出不同的编辑器，当然也可以直接在组件中直接定义
const props = defineProps({
  value: {
    type: String,
    default: () => {
      return ""
    },
  },
  baseUrl: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default: "lists  table",
  },//必填
  toolbar: {
    type: [String, Array],
    default:
      "codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat ",
  },//必填
})
//用于接收外部传递进来的富文本
const myValue = ref(props.value)
const tinymceId = ref("vue-tinymce-" + +new Date() + ((Math.random() * 1000).toFixed(0) + ""))
//定义一个对象 init初始化
const init = reactive({
  selector: &#39;#&#39; + tinymceId.value, //富文本编辑器的id,
  language_url: "/tinymce/langs/zh_CN.js", // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
  language: "zh_CN", //语言
  skin_url: "/tinymce/skins/ui/oxide", // skin路径，具体路径看自己的项目
  height: 400, //编辑器高度
  branding: false, //是否禁用“Powered by TinyMCE”
  menubar: true, //顶部菜单栏显示
  image_dimensions: false, //去除宽高属性
  plugins: props.plugins,  //这里的数据是在props里面就定义好了的
  toolbar: props.toolbar, //这里的数据是在props里面就定义好了的
  font_formats: &#39;Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;&#39;, //字体
  fontsize_formats: &#39;11px 12px 14px 16px 18px 24px 36px 48px 64px 72px&#39;, //文字大小
  // paste_convert_word_fake_lists: false, // 插入word文档需要该属性
  paste_webkit_styles: "all",
  paste_merge_formats: true,
  nonbreaking_force_tab: false,
  paste_auto_cleanup_on_paste: false,
  file_picker_types: &#39;file&#39;,
  content_css: &#39;/tinymce/skins/content/default/content.css&#39;, //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  //图片上传
  images_upload_handler: (blobInfo, progress) => new Promise((resolve, reject) => {

    if (blobInfo.blob().size / 1024 / 1024 > 2) {
      reject({ message: &#39;上传失败，图片大小请控制在 2M 以内&#39;, remove: true })
      return
    } else {
      const ph = import.meta.env.VITE_BASE_PATH + ":" + import.meta.env.VITE_SERVER_PORT + "/"
      let params = new FormData()
      params.append(&#39;file&#39;, blobInfo.blob())

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",

        }
      }

      axios.post(&#39;xxxx&#39;, params, config).then(res => {
        if (res.data.code == 200) {
          resolve(ph + res.data.msg)  //上传成功，在成功函数里填入图片路径
        } else {
          reject(&#39;HTTP Error: 上传失败&#39; + res.data.code);
          return
        }
      }).catch(() => {
        reject(&#39;上传出错，服务器开小差了呢&#39;)
        return
      })
    }
  }),

  // 文件上传
  file_picker_callback: (callback, value, meta) => {
    // Provide file and text for the link dialog
    if (meta.filetype == &#39;file&#39;) {
      callback(&#39;mypage.html&#39;, { text: &#39;My text&#39; });
    }

    // Provide image and alt text for the image dialog
    if (meta.filetype == &#39;image&#39;) {
      callback(&#39;myimage.jpg&#39;, { alt: &#39;My alt text&#39; });
    }

    // Provide alternative source and posted for the media dialog
    if (meta.filetype == &#39;media&#39;) {
      callback(&#39;movie.mp4&#39;, { source2: &#39;alt.ogg&#39;, poster: &#39;image.jpg&#39; });
    }
  }
})

//监听外部传递进来的的数据变化
watch(
  () => props.value,
  () => {
    myValue.value = props.value
    emits("getContent", myValue.value)
  }
)
//监听富文本中的数据变化
watch(
  () => myValue.value,
  () => {
    emits("getContent", myValue.value)
  }
)
//在onMounted中初始化编辑器
onMounted(() => {
  tinymce.init({})
})
</script>

5. #🎜🎜 #

// 使用
<TEditor ref="editor" v-model="formState.content" :disabled=&#39;disabled&#39; @getContent="getContent"/>
<script setup lang="ts">
import {  reactive } from "vue";
// 引入
import TEditor from &#39;@/components/TEditor.vue&#39;;
const formState = reactive({contents :&#39;&#39;})
const getContent = (v: string) => {
  formState.contents = v
}
</script>

#🎜🎜 #Version Tinymce #🎜🎜 #

 "@tinymce/tinymce-vue": "^5.0.0"

 "tinymce": "^6.0.3"

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!