vue+tinymce.png
最近因为公司项⽬的后台管理端需要实现编辑器功能, ⼀⽅⾯满⾜编辑各类⽂章内容需求，另⼀⽅⾯要⾃⼰编辑⼀些课程相关的介绍，于是就花了⼀些时间对⽐体验现有的⼀些开源的编辑器。
关于基础配置, 我就不⼀⼀介绍,⽂档中都有详细的说明，如果英语和我⼀样弱鸡，可以借助chrome的翻译,⼤概能看明⽩。下⾯是封装的组件的script内容, 关于⼀些配置直接在代码中说明:
import plugins from '@/components/Tinymce/plugins'
import toolbar from '@/components/Tinymce/toolbar'
import {
uploadFile
} from '@/api/file/upload'
export default {
name: 'Tinymce',
props: {
tid: {
type: String,
default: 'my-tinymce-' + new Date().getTime() + parseInt(Math.random(100))
},
content: {
type: String,
default: ''
},
menubar: { // 菜单栏
type: String,
default: 'file edit insert view format table'
},
toolbar: { // ⼯具栏
type: Array,
required: false,
default () {
return []
}
},
height: {
type: Number,
required: false,
default: 360
}
},
data() {
return {
tinymceId: this.tid,
finishInit: false,
hasChanged: false,
config: {}
}
},
mounted() {
this.initTinymce()
},
methods: {
initTinymce() {
window.tinymce.init({
selector: `#${this.tinymceId}`,
...fig,
content_style: 'img {max-width:100% !important }', // 初始化赋值
init_instance_callback: editor => {
if (t) {
editor.t)
}
bootstrap项目
this.finishInit = true
<('NodeChange Change SetContent KeyUp', () => {
this.hasChanged = true
})
}, // 上传图⽚
images_upload_handler: (blobInfo, success, failure) => {
const formData = new FormData();
formData.append('file', blobInfo.blob());
uploadFile(formData).then(res => {
if (de == 0) {
let file = res.data.data;
success(file.filePath);
return

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。