前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue项目使用tinymce

vue项目使用tinymce

作者头像
李郑
发布2020-02-17 08:38:32
1.7K0
发布2020-02-17 08:38:32
举报
文章被收录于专栏:漫漫全栈路

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

安装TinyMCE

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

这里使用 yarn !

代码语言:javascript
复制
yarn add @tinymce/tinymce-vue@2.1.0
yarn add tinymce@5.0.7

使用TinyMCE

创建一个 writer.vue 的组件

代码语言:javascript
复制
<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>

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

汉化!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-12-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 安装TinyMCE
  • 使用TinyMCE
  • 汉化!
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档