<template>
|
<div class="tinymce-box">
|
<editor
|
v-model="myValue"
|
:init="init"
|
:disabled="disabled"
|
@click="onClick">
|
</editor>
|
</div>
|
</template>
|
|
<script>
|
// 文档 http://tinymce.ax-z.cn/
|
// 引入组件
|
import tinymce from 'tinymce/tinymce' // tinymce默认hidden，不引入不显示
|
import Editor from '@tinymce/tinymce-vue'
|
|
// 引入富文本编辑器主题的js和css
|
import 'tinymce/themes/silver/theme.min.js'
|
import 'tinymce/icons/default/icons' // 解决了icons.js 报错Unexpected token '<'
|
|
// 编辑器插件plugins
|
// 更多插件参考：https://www.tiny.cloud/docs/plugins/
|
import "tinymce/themes/silver";
|
import "tinymce/plugins/image";
|
import "tinymce/plugins/link";
|
import "tinymce/plugins/code";
|
import "tinymce/plugins/table";
|
import "tinymce/plugins/lists";
|
import "tinymce/plugins/wordcount";
|
import "tinymce/plugins/print";
|
export default {
|
components: {
|
Editor
|
},
|
name: 'word',
|
props: {
|
// 默认的富文本内容
|
value: {
|
type: String,
|
default: ''
|
},
|
// 基本路径，默认为空根目录，如果你的项目发布后的地址为目录形式，
|
// 即abc.com/tinymce，baseUrl需要配置成tinymce，不然发布后资源会找不到
|
// 禁用
|
disabled: {
|
type: Boolean,
|
default: false
|
},
|
plugins: {
|
type: [String, Array],
|
default: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern emoticons autosave bdmap indent2em autoresize formatpainter axupimgs'
|
},
|
toolbar: {
|
type: [String, Array],
|
default: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
|
styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
|
table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs'
|
}
|
},
|
data () {
|
return {
|
init: {
|
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
|
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
|
language_url: `/static/tinymce/langs/zh_CN.js`,
|
language: 'zh_CN',
|
skin_url: `/static/tinymce/skins/ui/oxide`,
|
convert_urls: false,
|
height: 500,
|
// content_css（为编辑区指定css文件）,加上就不显示字数统计了
|
content_css: `/static/tinymce/skins/content/default/content.css`,
|
// （指定需加载的插件）
|
plugins: this.plugins,
|
toolbar: this.toolbar, // （自定义工具栏）
|
|
statusbar: true, // 底部的状态栏
|
menubar: true, // （1级菜单）最上方的菜单
|
theme: "silver",
|
zIndex: 1101,
|
branding: false, // （隐藏右下角技术支持）水印“Powered by TinyMCE”
|
importcss_append: true,
|
// 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
|
// 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
|
images_upload_handler: (blobInfo, success, failure) => {
|
const img = 'data:image/jpeg;base64,' + blobInfo.base64()
|
success(img)
|
console.log(failure)
|
},
|
toolbar_sticky: true,
|
autosave_ask_before_unload: false,
|
},
|
myValue: this.value
|
}
|
},
|
mounted () {
|
tinymce.init(
|
this.init
|
)
|
},
|
methods: {
|
// 添加相关的事件，可用的事件参照文档=> https://github.com/tinymce/tinymce-vue => All available events
|
// 需要什么事件可以自己增加
|
onClick (e) {
|
this.$emit('onClick', e, tinymce)
|
},
|
// 可以添加一些自己的自定义事件，如清空内容
|
clear () {
|
this.myValue = ''
|
},
|
getValue(){
|
return this.myValue
|
}
|
},
|
watch: {
|
value (newValue) {
|
this.myValue = newValue
|
},
|
myValue (newValue) {
|
this.$emit('input', newValue)
|
}
|
}
|
}
|
|
</script>
|
<style scoped>
|
|
</style>
|
