Vue使⽤Tinymce富⽂本⾃定义toolbar按钮的实践
⽬录
安装tinymce、tinymce ts、tinymce-vue声明⽂件
封装组件
组件使⽤
Vue使⽤Tinymce富⽂本编辑器⾃定义toolbar按钮
富⽂本编辑器有很多，流⾏的有UEditor , kindeditor, CKEditor 等等。但今天我们来实现tniyMCE 的插件开发。
安装tinymce、tinymce ts、tinymce-vue声明⽂件
npm install tinymce -S
npm install @types/tinymce -S
npm install @tinymce/tinymce-vue -S
封装组件
<template>
<div>
<editor :id="id" v-model="content" :init="init"></editor>
</div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import tinymce from 'tinymce';
import Editor from '@tinymce/tinymce-vue';
import 'tinymce/themes/silver/theme';
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 'tinymce/plugins/media';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/pagebreak';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/hr';
import 'tinymce/plugins/paste';
什么是富文本编辑器import 'tinymce/plugins/codesample';
import 'tinymce/icons/default/icons';
console.log(tinymce);
@Component({ name: 'TinymceEditer', components: { Editor } })
export default class extends Vue {
//设置prop id
@Prop({ default: 'vue-tinymce-' + +new Date() }) id!: string;
//默认⾼度
@Prop({ default: 300 }) height!: number;
@Prop({ default: '' })
private value!: string;
private content: string = '';
@Watch('value')
private onChangeValue(newVal: string) {
}
@Watch('content')
private onChangeContent(newVal: string) {
this.$emit('input', newVal);
}
//富⽂本框init配置
private get init() {
return {
selector: '#' + this.id, //富⽂本编辑器的id
language: 'zh_CN', //语⾔
language_url: '/tinymce/zh_CN.js', //语⾔包
skin_url: '/tinymce/skins/ui/oxide', //编辑器需要⼀个skin才能正常⼯作，所以要设置⼀个skin_url指向之前复制出来的skin⽂件
menubar: false, //菜单条
plugins:
'link lists image code table colorpicker textcolor wordcount contextmenu  media table fullscreen preview pagebreak insertdatetime hr paste codesample emoticons', //插件
toolbar:
'bold italic underline strikethrough  | fontselect | fontsizeselect | formatselect  | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | removeformat| undo redo | link unlink image media insertdatetim            font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun;  微软雅⿊=Microsoft Yahei; Impact=impact,chicago;', //字体
fontsize_formats: '11px 12px 14px 16px 18px 24px 36px 48px 64px 72px', //⽂字⼤⼩
height: this.height, //⾼度
branding: false, //⽔印
elementpath: false, //底部元素路径
paste_data_images: true, //允许粘贴图⽚
//初始化前执⾏
setup: (editor: any) => {},
//实例化执⾏
init_instance_callback: (editor: any) => {
//this.hasInit = true
<('NodeChange Change KeyUp SetContent', () => {
//this.hasChange = true
});
},
/
/视频设置回调
video_template_callback: (data: any) => {
return `<video width="
${data.width} " height="${data.height}"
${data.poster ? 'poster="' + data.poster + '"' : ''}
controls="controls">
<source src="${data.source}"/>
</video>`;
},
//粘贴图⽚回调
images_upload_handler: (blobInfo: any, success: Function, failure: Function) => {
this.handleImgUpload(blobInfo, success, failure);
},
};
}
private mounted() {
}
//上传图⽚
private handleImgUpload(blobInfo: any, success: Function, failure: Function) {
this.$emit('upload', blobInfo, success, failure);
}
}
</script>
<style lang="scss">
.tox-tinymce-aux {
z-index: 3000 !important;
}
</style>
组件使⽤
<template>
<tinymce v-model="content" />
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Tinymce from '@/components/tinymce/tinymce.vue';
@Component({
components: {
Tinymce,
},
})
export default class extends Vue {
private content: string = '';
}
</script>
<style lang="scss" scoped></style>
Vue使⽤Tinymce富⽂本编辑器⾃定义toolbar按钮
这⾥我增加了收缩的按钮
init: {
language: "zh_CN",
skin_url: "/tinymce/skins/ui/oxide",
height: "100%",
fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt",
font_formats:
"微软雅⿊=Microsoft YaHei;⽅正仿宋_GBK=⽅正仿宋_GBK；宋体=simsun,serif；仿宋体=FangSong,serif;⿊体=SimHei;Times New Roman=Times New Roman;",
plugins: {
type: [String, Array],
default: "code lists image media table wordcount indent2em"
,
toolbar:  {
type: [String, Array],
default:
"code | lineheight | undo redo | fontsizeselect | fontselect |  formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | myCustomToolbarButton | bullist numlist outdent indent ind
ent2em| lists image media table | removeformat      },
branding: false,
menubar: false,
setup: editor => {
let _this = this;
istry.addButton("myCustomToolbarButton", {
text: "收缩",
onAction: function() {
_this.show= !_this.show;
}
});
}
},
关键代码
这⾥使⽤箭头函数 => 即可操作vue中属性和事件
setup: editor => {
let _this = this;
istry.addButton("myCustomToolbarButton", {
text: "收缩",
onAction: function() {
_this.show= !_this.show;
}
});
}
到此这篇关于Vue使⽤Tinymce富⽂本⾃定义toolbar按钮的实践的⽂章就介绍到这了，更多相关Vue Tinymce⾃定义toolbar 内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！