Vue3中使用富文本编辑器的方法详解
作者：Csharp 小记
这篇文章主要为大家详细介绍了如何在Vue3中使用富文本编辑器,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以参考一下
前言
由于近年来Web做的比较少，即便做一些后台管理系统，基本也都没要求富文本编辑器，让我一度以为这东西没人用了，突然就想起来最开始使用富文本编辑器得时候还是写Asp.Net WebForm，那个时候好像都用FckEditor还是Ueditor来着。不过由于前后端分离得原因，使我不得不去寻找使用与Vue的富文本编辑器，随便搜索一下，蛮多的，然后翻两页，发现tinymce的使用文档不少，想想就它吧，可是我着实没想到啊，查到的文档大部分在vue3中都不能用，所以就不得不结合一些博客以及官方文档来实现
不过也是我的问题吧，对于前端的知识就了解那么点，多少费了点周折。
以下可参考官网：https://www.tiny.cloud/docs/tinymce/latest/vue-cloud/
开发工具：Visual Studio Code
实现步骤
1.首先新建一个Vue3项目，emmm，这一步其实是不需要的，一般我们都是集成到自己项目中的
npm create vue@3 //然后按照提示一步步走就行了，环境问题不在此考虑，创建完成之后CD进目录
2.安装tinymce包
npm install @tinymce/tinymce-vue -S
3.下载汉化资源https://www.tiny.cloud/get-tiny/language-packages/，找到zh-相关的下载即可，解压后将langs文件夹放在public目录下
4.将node_modules/tinymce/skins文件夹复制到public目录下
5.将富文本框组件化，方便调用，内容如下
<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，开始必须有此模块导入
import "tinymce/themes/silver"; //默认主题
import "tinymce/icons/default"; //引入编辑器图标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",//插件列表，需要先引入插件对应的包
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.调用
<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>由于我需要的还是比较简单的功能，所以像图片上传之类的就没做，有需要可以直接参考官网
实现效果
到此这篇关于Vue3中使用富文本编辑器的方法详解的文章就介绍到这了,更多相关Vue3富文本编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！