瑕佸湪Vue2涓紩鍏inyMCE锛屾偍鍙互鎸夌収浠ヤ笅姝ラ鎿嶄綔锛?/p>

1. 瀹夎TinyMCE渚濊禆椤癸細

npm install tinymce

2. 鍦ㄩ渶瑕佷娇鐢═inyMCE鐨勭粍浠朵腑锛屽紩鍏inyMCE锛?/li>

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';

3. 鍦ㄧ粍浠剁殑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 }'
});
}

鍦ㄤ笂杩颁唬鐮佷腑锛屾垜浠娇鐢ㄤ簡涓€浜涘父鐢ㄧ殑鎻掍欢鍜屽伐鍏锋爮鎸夐挳锛屾偍鍙互鏍规嵁闇€瑕佽繘琛岃嚜瀹氫箟銆?/p>

4. 鍦ㄧ粍浠剁殑beforeDestroy鐢熷懡鍛ㄦ湡閽╁瓙涓攢姣乀inyMCE缂栬緫鍣細

beforeDestroy() {
tinymce.remove('#myEditor');
}

5. 鍦ㄧ粍浠剁殑妯℃澘涓坊鍔犵敤浜庢樉绀篢inyMCE缂栬緫鍣ㄧ殑鍏冪礌锛?/li>

<template>
<div>
<textarea id="myEditor"></textarea>
</div>
</template>

鐜板湪锛屾偍灏卞彲浠ュ湪Vue2涓娇鐢═inyMCE缂栬緫鍣ㄤ簡銆傝娉ㄦ剰锛屼笂杩扮ず渚嬩腑鐨?code>'#myEditor'閫夋嫨鍣ㄥ簲涓庢偍鍦ㄦā鏉夸腑浣跨敤鐨処D鐩稿尮閰嶃€?/p>