成都中小企业网站建设公司,品牌推广公司排行榜,网络销售员每天做什么,产品设计公司简介1. TinyMCE 官方网站地址#xff08;可能需要魔法上网才能访问#xff09; 我们直接找到 TinyMCE 关于 vue 的下载地址#xff0c;其他框架的下载也在这里 2. 向下找#xff0c;找到关于vue3下载的地方 下载命令 npm install --save tinymce/tinymce-vue^5 例…1. TinyMCE 官方网站地址可能需要魔法上网才能访问 我们直接找到 TinyMCE 关于 vue 的下载地址其他框架的下载也在这里 2. 向下找找到关于vue3下载的地方 下载命令 npm install --save tinymce/tinymce-vue^5 例子代码把代码直接复制到你的项目中去就能打开 script setup import Editor from tinymce/tinymce-vue /scripttemplatemain idsampleimg altVue logo classlogo src./assets/logo.svg width125 height125 /Editorapi-keyno-api-key:init{plugins: lists link image table code help wordcount}//main /templatestyle scoped .logo {display: block;margin: 0 auto 2rem; }media (min-width: 1024px) {#sample {display: flex;flex-direction: column;place-items: center;width: 1000px;} } /style3. 但是你会发现一个问题 富文本编辑器是只读状态并有一段提示语告诉你要使用API-key才能使用完整功能 他这个提示里面有一个地址链接点击进去看 找到如何获取一个API-key然后点击进行登录获取免费的API-key 点击这个永久免费的版本 然后会让你进行登录两个快捷登录选项一个是goole账号登录一个是github账号登录我这边选择的是github登录 登录进去之后找到vue.js的语法版本找到下面的代码直接复制下来粘贴到你的代码中就可以使用了 这样就可以使用了 4. 汉化 这个版本的 TinyMCE 汉化很简单只需要在上面初始化的版本中加上这句 language: zh_CN 就可以了 5. 上传本地图片 TinyMCE如果不设置的话只能上传有地址的图片或者将图片直接拖拽进富文本编辑器或者直接截图复制进富文本编辑器中都行 但是如果你想要选择相册中的图片上传的话你就加上下面这段就可以了 file_picker_callback: (cb, value, meta) {const input document.createElement(input);input.setAttribute(type, file);input.setAttribute(accept, image/*);input.addEventListener(change, (e) {const file e.target.files[0];const reader new FileReader();reader.addEventListener(load, () {const id blobid new Date().getTime();const blobCache tinymce.activeEditor.editorUpload.blobCache;const base64 reader.result.split(,)[1];const blobInfo blobCache.create(id, file, base64);blobCache.add(blobInfo);cb(blobInfo.blobUri(), { title: file.name });});reader.readAsDataURL(file);});input.click();},注意注意注意 如果这段代码复制进去之后你发现没有 tinymce 这个变量 你需要定义一个ref对象获取 Editor 的示例 然后将 tinymce.activeEditor.editorUpload.blobCache 修改为 editorRef.value.getEditor().editorUpload.blobCache 这样就可以了 Editor v-modelcontent refeditorRef api-key********* :initTinyMCEInitConfig /file_picker_callback: (cb, value, meta) {const input document.createElement(input)input.setAttribute(type, file)input.setAttribute(accept, image/*)input.addEventListener(change, (e) {const file e.target.files[0]const reader new FileReader()reader.addEventListener(load, () {const id blobid new Date().getTime()const blobCache editorRef.value.getEditor().editorUpload.blobCacheconst base64 reader.result.split(,)[1]const blobInfo blobCache.create(id, file, base64)blobCache.add(blobInfo)cb(blobInfo.blobUri(), { title: file.name })})reader.readAsDataURL(file)})input.click()}这样我们就完成了一个简单的富文本编辑器的初始化 总结一下 找到官网找到下载vue版本的地址上执行下载命令将官网上的实例代码复制粘贴上去注册账号获取免费的API-key汉化优化组件行为动作比如上传图片