在vue项目中使用富文本编辑器 - tinymce

 推荐文章

  • tinymce常用配置

摘要


在vue项目中使用tinymce富文本编辑器。这款编辑器比较轻量级、界面简洁、功能丰富,主要是易扩展。

使用步骤

安装tinymce官方地址

1.安装tinymce

# pnpm命令是npm命令的增强,p是proformance的意思,高性能
pnpm install --save "@tinymce/tinymce-vue@^5"

2.引入tinymce的mainjs

tinymce官方提供了将tinymce插件引入项目的多种方式,其中最简便的是使用官方的api-key,但是这种方式不适合用在国内,因为api-key的方式是自动引入mainjs,由于网络防火墙的原因,这个mainjs的请求会超时。所以最好使用将tinymce的最小资源包下载到本地再引入的方式。

2.1下载最小资源包

tinymce最小资源包下载地址
一般按官方安装文档都是下载最新版本的,所以在最小资源包下载地址直接下载最新的即可
下载完成后将资源包放在项目可访问的目录下,如项目的/src/assets/,一般vue项目都会有这个目录

你可能感兴趣的:(vue,富文本编辑器,vue.js,前端,javascript,编辑器)