13.Vue中引入本地富文本编辑器TinyMCE | tinymce

论坛 期权论坛 编程之家     
选择匿名的用户   2021-5-21 11:47   11   0

上次使用的是云端TinyMCE的API KEY 一方面需要注册申请,另一方面好像有免费试用时间,不断搜罗,这次分享本地下载的方法

1.进入首页 链接 首先点击左上角 Products 然后点击 Get Tinymce 进入下载界面

2.进入后,点击Download 下载,如下图依次点击,将文件下载至本地

3.返回至上一界面,下载中文,汉化包

4.将已下载的文件解到指定一个文件夹,第一个下载的 tinymce 选择性解压,一直点击到图中路径

5.将汉化包也粘贴到文件中,最后剩这些文件

6.在搭建好的项目components中新建文件 tinymce-editor(文件名自定义即可)并新建一个 index.vue 作为引用

该vue 可配置如下

<template>
    <section id="tinymce-editor">请输入文字</section>
</template>

<script>
  import './tinymce.min.js'
  import './themes/silver/theme.min.js'
  import './langs/zh_CN'
  import './icons/default/icons.min'

  export default {
    mounted () {
      tinymce.init({
        selector:'#tinymce-editor',
        language:'zh_CN'
      })
    }
  }
</script>

<style scoped>
@import url('./skins/ui/oxide/skin.min.css');
</style>

7.在需要添加的页面引入 路径根据自己文件层级引用 大功告成!

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP