<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>TinyMCE 富文本编辑器</title> <script src="https://cdn.tiny.cloud/1/API_KEY/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> <script> tinymce.init({ selector: 'textarea', height: 300, plugins: [ 'advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen', 'insertdatetime media table paste code help wordcount' ], toolbar: 'undo redo | formatselect | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help', menubar: 'file edit view insert format tools table help', content_css: 'https://cdn.jsdelivr.net/npm/tinymce@5/skins/ui/oxide/content.min.css', skin: 'oxide', setup: function (editor) { editor.on('change', function () { tinymce.triggerSave(); }); } }); </script> </head> <body> <h1>TinyMCE 富文本编辑器</h1> <textarea name="content"></textarea> </body> </html>
需要将API_KEY替换为你从TinyMCE官网获取到的API密钥。该代码片段会引入TinyMCE的JavaScript文件，并初始化一个富文本编辑器实例。通过选择器textarea，将富文本编辑器应用于名为content的<textarea>元素。
配置中指定了一些插件和工具栏按钮，以及一些常见的功能，如格式化、插入链接、插入图片、表格等。还可以根据需求进行自定义配置，详细信息可以参考TinyMCE的官方文档。
注意，在使用富文本编辑器时，需要在提交表单或保存数据之前调用tinymce.triggerSave()，将编辑器中的内容同步到对应的<textarea>元素中，以便后续处理
