# 富文本編輯器 ## 8.6.富文本編輯器 富文本編輯器使用的是TinyMCE，[查看中文文檔](http://tinymce.ax-z.cn/)。 ~~~ <textarea id="demoEditor"></textarea> <script type="text/javascript" src="assets/libs/tinymce/tinymce.min.js"></script> <script> layui.use(['layer'], function () { var $ = layui.jquery; var layer = layui.layer; // 渲染富文本編輯器 tinymce.init({ selector: '#demoEditor', height: 525, branding: false, language: 'zh_CN', plugins: 'code print preview fullscreen paste searchreplace save autosave link autolink image imagetools media table codesample lists advlist hr charmap emoticons anchor directionality pagebreak quickbars nonbreaking visualblocks visualchars wordcount', toolbar: 'fullscreen preview code | undo redo | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | formatselect fontselect fontsizeselect | link image media emoticons charmap anchor pagebreak codesample | ltr rtl', toolbar_drawer: 'sliding', images_upload_url: '../../../json/tinymce-upload-ok.json', file_picker_types: 'media', file_picker_callback: function (callback, value, meta) { layer.msg('演示環境不允許上傳', {anim: 6}); }, init_instance_callback: function (editor) { console.log(editor); // 編輯器渲染完成回調，回顯值應該在這里回顯 // tinymce.get('demoEditor').setContent('<span>Hello</span>'); } }); // 獲取內容 var content = tinymce.get('demoEditor').getContent(); // 獲取純文本 var content = tinymce.get('demoEditor').getContent({format: 'text'}); // 設置內容 tinymce.get('demoEditor').setContent('<span>Hello</span>'); // 插入內容 tinymce.get('demoEditor').insertContent('??贊~', {}); }); </script> ~~~ 彈窗中使用應該在彈窗關閉后銷毀編輯器實例： ~~~ admin.open({ type: 1, content: '<textarea id="demoEditor2"></textarea>', success: function () { // 渲染編輯器 tinymce.init({ selector: '#demoEditor2' }); }, end: function () { // 銷毀編輯器 tinymce.get('demoEditor2').destroy(false); } }); ~~~ 解決彈窗遮擋富文本組件： ~~~ <!-- 頁面加入樣式 --> <style> body .tox-tinymce-aux { z-index: 19892000 !important; } </style> ~~~