快捷導(dǎo)航

Vue3中使用富文本編輯器的方法詳解

更新時間：2024年01月17日 10:40:34 作者：Csharp 小記

這篇文章主要為大家詳細介紹了如何在Vue3中使用富文本編輯器,文中的示例代碼講解詳細,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以參考一下

前言

由于近年來Web做的比較少，即便做一些后臺管理系統(tǒng)，基本也都沒要求富文本編輯器，讓我一度以為這東西沒人用了，突然就想起來最開始使用富文本編輯器得時候還是寫Asp.Net WebForm，那個時候好像都用FckEditor還是Ueditor來著。不過由于前后端分離得原因，使我不得不去尋找使用與Vue的富文本編輯器，隨便搜索一下，蠻多的，然后翻兩頁，發(fā)現(xiàn)tinymce的使用文檔不少，想想就它吧，可是我著實沒想到啊，查到的文檔大部分在vue3中都不能用，所以就不得不結(jié)合一些博客以及官方文檔來實現(xiàn)

不過也是我的問題吧，對于前端的知識就了解那么點，多少費了點周折。

以下可參考官網(wǎng)：https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/

開發(fā)工具：Visual Studio Code

實現(xiàn)步驟

1.首先新建一個Vue3項目，emmm，這一步其實是不需要的，一般我們都是集成到自己項目中的

npm create vue@3
//然后按照提示一步步走就行了，環(huán)境問題不在此考慮，創(chuàng)建完成之后CD進目錄

2.安裝tinymce包

npm install @tinymce/tinymce-vue -S

3.下載漢化資源https://www.tiny.cloud/get-tiny/language-packages/，找到zh-相關(guān)的下載即可，解壓后將langs文件夾放在public目錄下

4.將node_modules/tinymce/skins文件夾復(fù)制到public目錄下

5.將富文本框組件化，方便調(diào)用，內(nèi)容如下

<template>
  <Editor :disabled="disabled" :init="init" :api-key="apiKey" style="width: 100%" />
</template>
<script setup>
import tinymce from "tinymce/tinymce"; //tinymce核心文件
import Editor from "@tinymce/tinymce-vue";

import "tinymce/models/dom"; // 引入dom模塊。從 Tinymce6，開始必須有此模塊導(dǎo)入
import "tinymce/themes/silver"; //默認主題
import "tinymce/icons/default"; //引入編輯器圖標(biāo)icon

import 'tinymce/plugins/code'//引入需要的插件

const apiKey = "qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc";

const init = {
  height: 300,
  language_url: "./tinymce/langs/zh-Hans.js",
  language: "zh-Hans",
  skin_url: "./tinymce/skins/ui/oxide",
  content_css: "./tinymce/skins/content/default/content.css",
  branding: false,
  menubar: false,
  statusbar: true,
  plugins: "code",//插件列表，需要先引入插件對應(yīng)的包
  toolbar:
    "undo redo |fontsize bold italic underline strikethrough forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent blockquote | lists image media table | codesample code removeformat save preview",
};//顯示在工具欄中的菜單
</script>

6.調(diào)用

<template>
  <div style="width: 80vw">
    <TinymceEditor v-model="data"></TinymceEditor>
  </div>
  <div>
    <button @click="getInput" >獲取</button>
  </div>
</template>
<script setup>
import TinymceEditor from "./components/TinymceEditor.vue";
import { ref, onMounted, watch } from "vue";
const data = ref("");
const getInput = () => {
  alert(data.value);
};
</script>

<style scoped></style>

由于我需要的還是比較簡單的功能，所以像圖片上傳之類的就沒做，有需要可以直接參考官網(wǎng)