要在Vue2中引入TinyMCE,您可以按照以下步驟操作:
npm install tinymce
import tinymce from 'tinymce/tinymce';
import 'tinymce/themes/silver';
import 'tinymce/plugins/advlist';
import 'tinymce/plugins/autolink';
import 'tinymce/plugins/lists';
import 'tinymce/plugins/link';
import 'tinymce/plugins/image';
import 'tinymce/plugins/charmap';
import 'tinymce/plugins/print';
import 'tinymce/plugins/preview';
import 'tinymce/plugins/anchor';
import 'tinymce/plugins/searchreplace';
import 'tinymce/plugins/visualblocks';
import 'tinymce/plugins/code';
import 'tinymce/plugins/fullscreen';
import 'tinymce/plugins/insertdatetime';
import 'tinymce/plugins/media';
import 'tinymce/plugins/table';
import 'tinymce/plugins/paste';
import 'tinymce/plugins/help';
mounted
生命周期鉤子中初始化TinyMCE編輯器:mounted() {
tinymce.init({
selector: '#myEditor',
menubar: false,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste help'
],
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
}
在上述代碼中,我們使用了一些常用的插件和工具欄按鈕,您可以根據需要進行自定義。
beforeDestroy
生命周期鉤子中銷毀TinyMCE編輯器:beforeDestroy() {
tinymce.remove('#myEditor');
}
<template>
<div>
<textarea id="myEditor"></textarea>
</div>
</template>
現在,您就可以在Vue2中使用TinyMCE編輯器了。請注意,上述示例中的'#myEditor'
選擇器應與您在模板中使用的ID相匹配。