溫馨提示×

vue2 renrne 引入tinymce

vue
小云
98
2023-09-28 07:36:50
欄目: 編程語言

要在Vue2中引入TinyMCE，您可以按照以下步驟操作：

  1. 安裝TinyMCE依賴項：
npm install tinymce
  1. 在需要使用TinyMCE的組件中，引入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';
  1. 在組件的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 }'
});
}

在上述代碼中，我們使用了一些常用的插件和工具欄按鈕，您可以根據需要進行自定義。

  1. 在組件的beforeDestroy生命周期鉤子中銷毀TinyMCE編輯器：
beforeDestroy() {
tinymce.remove('#myEditor');
}
  1. 在組件的模板中添加用于顯示TinyMCE編輯器的元素：
<template>
<div>
<textarea id="myEditor"></textarea>
</div>
</template>

現(xiàn)在，您就可以在Vue2中使用TinyMCE編輯器了。請注意，上述示例中的'#myEditor'選擇器應與您在模板中使用的ID相匹配。

0 踩