vue中使用tinymce，富文本编辑器组件封装。_tinymce-all-in-one@4

最新推荐文章于 2024-08-25 07:07:46 发布

2401_84446513

最新推荐文章于 2024-08-25 07:07:46 发布

阅读量942

点赞数 11

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/2401_84446513/article/details/138236499

版权

本文介绍了如何在Vue.js项目中使用Tinymce作为富文本编辑器，包括初始化、销毁编辑器的方法，以及设置编辑器配置如工具栏、插件等。同时，文章提到了前端基础，如HTML、CSS和JavaScript的重要性，强调了它们在网页设计和动态交互中的作用。

摘要由CSDN通过智能技术生成

  }
},
language() {
  this.destroyTinymce()
  this.$nextTick(() => this.initTinymce())
}

},
mounted() {
this.init()
},
activated() {
if (window.tinymce) {
this.initTinymce()
}
},
deactivated() {
this.destroyTinymce()
},
destroyed() {
this.destroyTinymce()
},
methods: {
init() {
// 引用tinymceCDN,并调用初始化Tinymce方法
load(tinymceCDN, (err) => {
if (err) {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 53: \dotsreturn }̲ this.i\dots$ {this.tinymceId}`, //容器，可使用css选择器
height: this.height,
body_class: 'panel-body ',
object_resizing: false, // 是否禁用表格图片大小调整
toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar, //工具栏
menubar: this.menubar, //菜单栏
plugins: plugins, //选择需加载的插件
end_container_on_empty_block: true, // enter键分块
powerpaste_word_import: ‘clean’, // 是否保留word粘贴样式 clean | merge
code_dialog_height: 450, // 代码框高度、宽度
code_dialog_width: 1000,
advlist_bullet_styles: ‘square’, // 无序列表有序列表
advlist_number_styles: ‘default’,
imagetools_cors_hosts: [‘www.tinymce.com’, ‘codepen.io’],
default_link_target: ‘_blank’,
branding:false, //是否显示POWERED BY TINYMCE
link_title: false,
nonbreaking_force_tab: true, // inserting nonbreaking space need Nonbreaking Space Plugin
// paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像。
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
editor.on(‘NodeChange Change KeyUp SetContent’, () => {
this.hasChange = true
this.$emit(‘input’, editor.getContent())
})
},
setup(editor) {
editor.on(‘FullscreenStateChanged’, (e) => {
_this.fullscreen = e.state
})
},
// it will try to keep these URLs intact
// https://www.tiny.cloud/docs-3x/reference/configuration/Configuration3x@convert_urls/
// https://stackoverflow.com/questions/5