目录
官网:
https://www.tiny.cloud/auth/signup/
资源下载
tinymce 官方为 vue 项目提供了一个组件tinymce-vue
npm install @tinymce/tinymce-vue -S
在 vscode、webstorm 的终端运行这段代码可能会报错，最好使用操作系统自带的命令行工具
如果有购买 tinymce 的服务，可以参考 tinymce-vue 的说明，通过 api-key 直接使用 tinymce
像我这样没购买的，还是要老老实实下载 tinymce
npm install tinymce -S
安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public 目录下
// 如果是使用 vue-cli 3.x 项目，就放到 public 目录下，
tinymce 默认是英文界面，所以还需要下载一个中文语言包
https://www.tiny.cloud/get-tiny/language-packages/
然后将这个语言包放到 public 目录下，为了结构清晰，我包了一层 tinymce 目录
上代码
<template>
<div class="app-container">
<!-- 添加或修改对话框 -->
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-tabs type="border-card">
<el-tab-pane label="基本配置">
<el-form-item label="标题" prop="title">
<el-input v-model="form.title" placeholder="标题"/>
</el-form-item>
<el-form-item label="标签" prop="keywords">
<el-input v-model="form.keywords" placeholder="标签"/>
</el-form-item>
<el-form-item label="文章作者" prop="author">
<el-input v-model="form.author" placeholder="文章作者"/>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="文章内容">
<el-form-item label="" label-width="0" prop="content">
<editor v-model="form.content" :init="init"></editor>
</el-form-item>
</el-tab-pane>
</el-tabs>
<hr />
<div v-html="form.content"></div>
</el-form>
<div>
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</div>
</template>
<script>
import {getArticle, addArticle, updateArticle} from '@/api/article'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import "tinymce/themes/silver"
import 'tinymce/icons/default/icons.min.js'
// 编辑器插件plugins 里用到的插件,都要import引入一下,不然控制台会报错
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
import 'tinymce/plugins/advlist'
import 'tinymce/plugins/autolink'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/print'
import 'tinymce/plugins/preview'
import 'tinymce/plugins/anchor'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/visualblocks'
import 'tinymce/plugins/insertdatetime'
import 'tinymce/plugins/help'
import 'tinymce/plugins/autoresize'
import 'tinymce/plugins/image'// 插入上传图片插件
import 'tinymce/plugins/imagetools'// 图片编辑
import 'tinymce/plugins/media'// 插入视频插件
import 'tinymce/plugins/table'// 插入表格插件
import 'tinymce/plugins/lists'// 列表插件
import 'tinymce/plugins/wordcount'// 字数统计插件
import "tinymce/themes/silver/theme"
import "tinymce/plugins/paste"
import "tinymce/plugins/link"
import "tinymce/plugins/code"
import 'tinymce/plugins/fullscreen';
import {uploadAvatar} from "@/api/system/sysuser"; //上组组件
export default {
components: {
Editor
},
name: 'ArticleCreate',
data() {
return {
init: {
// 引入汉化组件
language_url: '/tinymce/zh_CN.js', //public目录下
// 设定语言为中文
language: 'zh_CN',
// 官网抄的图片上传 项目如果用了vue-resource可以用$http 因为比较懒就没改
images_upload_handler(blobInfo, success, failure) {
// 图片base64
// let imageUrl = "data:image/jpg;base64,"+ blobInfo.base64();
// console.log("blobInfo", blobInfo);
// let imageUrl = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1596234646&di=c6754daed08666a5b975f8960120e77b&src=http://pic1.win4000.com/pic/2/7c/bed1803982.jpg';
// success(imageUrl) //成功后插入图片
let formData = new FormData
let imageUrl = ""
formData.append("upload[]",blobInfo.blob(),blobInfo.filename());
//Axios上传图片
uploadAvatar(formData).then(response => {
if (response.code === 200) {
imageUrl = process.env.VUE_APP_BASE_API + '/' + response.data
success(imageUrl) //成功后插入图片
// this.msgSuccess('修改成功')
} else {
this.msgError(response.msg)
}
})
},
// 加入主题
skin_url: '/tinymce/skins/ui/oxide', //public目录下 //主题样式
height: 500, //高度
// toolbar: false,//false禁用工具栏（隐藏工具栏）
// menubar: false,// 隐藏最上方menu菜单
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
// statusbar: false, // 隐藏编辑器底部的状态栏
// elementpath: false, //禁用下角的当前标签路径
paste_data_images: true, // 允许粘贴图像
plugins: [
'advlist autolink lists link imagetools image charmap print preview anchor colorpicker textcolor contextmenu',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount autoresize'
],
toolbar:
'undo redo | formatselect | bold italic backcolor |
alignleft aligncenter alignright alignjustify |
bullist numlist outdent indent |imagetools image media | removeformat | help'
},
// 遮罩层
loading: true,
isEdit: false,
// 类型数据字典
typeOptions: [],
isRecommendOptions: [], isTopOptions: [], statusOptions: [],
// 表单参数
form: {},
// 表单校验
rules: {
articleId:
[
{required: true, message: '不能为空', trigger: 'blur'}
],
navigateId:
[
{required: true, message: '栏目ID不能为空', trigger: 'blur'}
],
title:
[
{required: true, message: '标题不能为空', trigger: 'blur'}
],
author:
[
{required: true, message: '文章作者不能为空', trigger: 'blur'}
],
content:
[
{required: true, message: '内容不能为空', trigger: 'blur'}
],
}
}
},
created() {
this.getDicts('sys_yes_no').then(response => {
this.isRecommendOptions = response.data
})
this.getDicts('sys_yes_no').then(response => {
this.isTopOptions = response.data
})
this.getDicts('sys_normal_disable').then(response => {
this.statusOptions = response.data
})
},
watch: {},
methods: {
// 取消按钮
cancel() {
this.reset()
},
// 表单重置
reset() {
this.form = {
articleId: undefined,
navigateId: undefined,
title: undefined,
keywords: undefined,
description: undefined,
imageUrl: undefined,
content: undefined,
author: undefined,
source: undefined,
hits: undefined,
isRecommend: undefined,
isTop: undefined,
url: undefined,
tags: undefined,
commentNums: undefined,
status: undefined,
timeFormt: undefined,
}
this.resetForm('form')
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm('queryForm')
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const articleId = row.articleId || this.ids
getArticle(articleId).then(response => {
this.form = response.data
this.open = true
this.title = '修改文章表'
this.isEdit = true
})
},
// 上传图片
// uploadImg() {
// this.$refs.cropper.getCropBlob(data => {
// const formData = new FormData()
// formData.append('upload[]', data)
// uploadAvatar(formData).then(response => {
// if (response.code === 200) {
// this.open = false
// this.options.img = process.env.VUE_APP_BASE_API + '/' + response.data
// this.msgSuccess('修改成功')
// } else {
// this.msgError(response.msg)
// }
// this.$refs.cropper.clearCrop()
// })
// })
// },
/** 提交按钮 */
submitForm: function () {
this.$refs['form'].validate(valid => {
if (valid) {
if (this.form.articleId !== undefined) {
updateArticle(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess('修改成功')
this.open = false
this.getList()
} else {
this.msgError(response.msg)
}
})
} else {
addArticle(this.form).then(response => {
if (response.code === 200) {
this.msgSuccess('新增成功')
this.open = false
this.getList()
} else {
this.msgError(response.msg)
}
})
}
}
})
},
}
}
</script>
效果
已经上传到后台的static目录里了
到此已经完成了