在使用Vue.js在TinyMCE编辑器中插入内容时,可以按照以下步骤进行操作:
mounted
钩子函数初始化TinyMCE编辑器。可以通过tinymce.init()
方法来实现,传入相关的配置选项。tinymce.init()
方法的配置选项中,可以设置setup
属性,用于定义自定义的回调函数。setup
回调函数中,可以使用editor.on()
方法监听init
事件,该事件在编辑器初始化完成后触发。init
事件的回调函数中,可以使用editor.setContent()
方法来设置编辑器的初始内容。以下是一个示例代码:
<template>
<div>
<textarea id="my-editor"></textarea>
</div>
</template>
<script>
import tinymce from 'tinymce';
export default {
mounted() {
tinymce.init({
selector: '#my-editor',
setup: (editor) => {
editor.on('init', () => {
editor.setContent('<p>这是要插入的内容</p>');
});
},
});
},
};
</script>
在上述示例中,我们在Vue组件的mounted
钩子函数中初始化了TinyMCE编辑器,并在setup
回调函数中监听了init
事件。当编辑器初始化完成后,会触发init
事件的回调函数,在该回调函数中使用setContent()
方法插入了指定的内容。
请注意,上述示例中的代码仅供参考,具体的实现方式可能会因项目配置和需求而有所不同。关于TinyMCE编辑器的更多详细配置和使用方法,可以参考TinyMCE官方文档。
领取专属 10元无门槛券
手把手带您无忧上云