楠槡

vue项目使用tinymce

2019-12-15

最近又开始写小说了,但是感觉各种在线写作工具都不太好用,只有阅文的作者后台还算可以,但是必须要创建作品之后才能使用,有些尚处于构思或者内投的作品就不太方便放在阅文的作者后台进行写作了,于是准备使用阅文后台使用的Tinymce自己编写一个在现在写作工具来满足日常的写作需求,后续如果体验尚可,可以延展为独立产品或者开源产品。

安装TinyMCE

TinyMCE官方推荐使用cdn进行加载,但是需要先购买才行,不想购买则只能悬着手动加载TinyMCE。

这里使用 yarn !

1
2
yarn add @tinymce/tinymce-vue@2.1.0
yarn add tinymce@5.0.7

使用TinyMCE

创建一个 writer.vue 的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
<editor :init="init" v-model="data"></editor>
</template>
<script>
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver/theme.min.js';
import 'tinymce/skins/ui/oxide/skin.min.css';
import Editor from '@tinymce/tinymce-vue';
export default {
data() {
return {
data: '',
init: {}
};
},
components: {
Editor
}
};
</script>

在页面中使用则直接加载组件,然后调用即可

汉化!

Tags: Vue
使用支付宝打赏
使用微信打赏

若你觉得我的文章对您有帮助,点击上方按钮请我喝杯咖啡☕

若文章中存在问题,或您有任何意见和疑问,均可与我联系

扫描二维码,分享此文章 📱