裴大头-秦可爱

裴大头-秦可爱

发现一个超好用的文本编辑器!!!

发表于 2022-01-09
裴大头
阅读量 497
更新于 2022-01-17

前言:

之前用的文本编辑器是mavonEditor,总是觉得看着md格式的内容怪怪的,于是乎发现了这么一款超好用的文本编辑器——TinyMCE

 

如何使用:(vue项目中引入TinyMCE)

一、下载依赖

npm install tinymce -S  //当前版本^5.1.1
npm install @tinymce/tinymce-vue -S  //当前版本^3.0.1

二、使用

首先要将node_modules 中找到 tinymce/skins 文件夹拷贝出来放到我们的项目中,vue-cli3以上的版本放到public中(2版本放到static文件夹里)

截图中的zh_CN.js是所需要汉化包

代码点此下载:zh_CN.js

三、开始使用

一般我们需要再次封装一下。

<!--
* @File: index
* @Author: PHY
* @Date: 2022/1/6 18:03
* @Description: tinymce富文本编辑器
-->
<template>
<div class="tinymce">
<editor id="tinymce" :style="'width: 100%;height: ' + tinymceHeight" v-model="value" :init="init"/>
</div>
</template>

<script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/silver/theme'
import 'tinymce/icons/default/icons.min.js'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import {uploadImage} from "@/api/system/image";
export default {
name: "index",
components: {
Editor
},
props: {
tinymceHtml: '',
tinymceHeight: {
type: String,
default: '100%'
}
},
watch: {
tinymceHtml(newV,oldV) {
this.value = newV
}
},
data() {
return {
value: this.tinymceHtml, //父组件通过ref拿到该组件的值
init: {
plugins: "image link code table lists wordcount", //引入插件
toolbar: "h1 h2 h3 h4 | " +
"fontselect fontsizeselect | " +
"bold italic underline strikethrough lineheight forecolor backcolor | " +
"alignleft aligncenter alignright alignjustify numlist bullist | " +
"link image quicklink blockquote table preview fullscreen", //工具栏
selector: "#tinymce", //tinymceid
language_url: "/tinymce/zh_CN.js",
language: "zh_CN",
skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作,所以要设置一个skin_url指向之前复制出来的skin文件
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
elementpath: false, //禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上方menu
fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体

file_picker_types: 'image',
images_upload_credentials: true,
// 图片上传三个参数,图片数据,成功时的回调函数,失败时的回调函数
images_upload_handler: (blobInfo, success, failure) => {
let formData = new FormData();
formData.append("image", blobInfo.blob());
//uploadImg是上传图片的请求接口
uploadImage(formData).then(res => {
const img = "https://pnkx.top" + process.env.VUE_APP_BASE_API + res.imgUrl;
success(img);
})
}
}
}
},
mounted() {
tinymce.init({});
},
methods: {},
}
</script>

<style lang="scss" scoped>
</style>

这是完整的一个组件代码。

其中uploadImage接口是自己的上传图片的接口,success是将url展示到页面文档里。

 

【腾讯云】云产品限时秒杀,爆款2核4G云服务器首年74元

 

推荐阅读

1、若依框架配置文件数据源配置加密

2、SpringBoot + Vue 请求加密(采用国密算法)

3、记录一下vue打包成app(Hbuilder X)

4、Idea 2021.2.3破解过程

5、前端面试精选-基础篇

 

关注公众号

 

 

 

 

 

评论
来发一针见血的评论吧!
表情
  • Ricken

    2022-01-12 01:20

    结束完考试月回家,来逛一下嘻嘻嘻😁

    0
    回复
    • 裴大头

      男博主

      2022-01-12 09:04

      @Ricken

      0
      回复
    • 共1条回复,点击查看
推荐文章
  • JavaScript 的事件循环机制

    1点赞1评论

  • Vue项目代码规范

    1点赞1评论

  • Element UI 级联选择器 el-cascader 实现懒加载和搜索功能

    1点赞0评论

  • Java 23种设计模式——单例模式(Singleton)

    0点赞1评论

  • Java 23种设计模式——适配器模式(Adapter)

    1点赞0评论

Crafted with by Pei你看雪

小破站居然运行了 982 天访客 26086

© 2023 Pei你看雪鲁ICP备19037910号-2