# 富文本编辑器 ## 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> ~~~