<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>开源富文本编辑器示例</title> <!-- 引入 TinyMCE 开源版 CDN --> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script> <style> /* 简单的页面样式，让编辑器布局更美观 */ body { font-family: Arial, sans-serif; max-width: 1000px; margin: 20px auto; padding: 0 20px; } .editor-container { margin-top: 20px; } h1 { color: #333; text-align: center; } #submit-btn { margin-top: 15px; padding: 8px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } #submit-btn:hover { background-color: #45a049; } #content-preview { margin-top: 20px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; min-height: 100px; } </style> </head> <body> <h1>开源富文本编辑器示例</h1> <div class="editor-container"> <!-- 富文本编辑器容器 --> <textarea id="myeditor"></textarea> <!-- 提交按钮，用于演示获取编辑器内容 --> <button id="submit-btn">获取编辑内容</button> <!-- 内容预览区域 --> <div id="content-preview"> 点击上方按钮可查看编辑的内容 </div> </div> <script> // 初始化 TinyMCE 编辑器 tinymce.init({ // 绑定到 id 为 myeditor 的文本域 selector: '#myeditor', // 语言设置为中文 language: 'zh_CN', // 编辑器高度 height: 400, // 菜单栏（按需开启/关闭） menubar: 'file edit insert view format table tools', // 工具栏（基础功能） toolbar: [ 'undo redo | bold italic underline strikethrough | fontfamily fontsize | forecolor backcolor', 'alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist |', 'link unlink image | blockquote hr | removeformat | preview fullscreen' ], // 允许的内容格式（增强兼容性） extended_valid_elements: 'img[src|alt|title|width|height|style]', // 禁用自动保存（避免新手困惑） autosave_ask_before_unload: false, // 本地图片上传（基础版仅支持 base64 格式） images_upload_handler: function (blobInfo, success, failure) { // 将图片转为 base64 字符串（无需后端） success('data:image/jpeg;base64,' + blobInfo.base64()); }, // 初始化完成后的回调 setup: function (editor) { editor.on('init', function () { console.log('编辑器初始化完成'); }); } }); // 绑定按钮点击事件，获取编辑器内容并预览 document.getElementById('submit-btn').addEventListener('click', function () { // 获取编辑器的 HTML 内容 const content = tinymce.get('myeditor').getContent(); // 将内容显示到预览区域 document.getElementById('content-preview').innerHTML = content; // 控制台也输出一份（方便调试） console.log('编辑器内容：', content); }); </script> </body> </html>需要注册一个api key，但是很简单，1分钟就能注册，随便填。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>富文本编辑器</title> <script src="https://cdn.tiny.cloud/1/xyea5j0c2onwtobabebwjx6wkv7o2ycidg76o6bctf8mus95/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Microsoft Yahei", Arial, sans-serif; max-width: none; margin: 20px auto; padding: 0 20px; background: #fff; } .editor-container { margin-top: 20px; width: 100%; } h1 { color: #333; text-align: center; margin-bottom: 20px; } #submit-btn { margin-top: 15px; padding: 8px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } #content-preview { margin-top: 15px; padding: 15px; border: 1px solid #ddd; border-radius: 4px; min-height: 100px; width: 100%; box-sizing: border-box; } /* 核心：强制工具栏一行+靠左对齐 */ .tox-editor-container { width: 100% !important; } /* 工具栏容器靠左，取消自动换行，溢出滚动 */ .tox-toolbar__primary { width: 100% !important; display: flex !important; flex-wrap: nowrap !important; /* 禁止换行 */ justify-content: flex-start !important; /* 靠左对齐 */ overflow-x: auto !important; /* 超出部分横向滚动 */ overflow-y: hidden !important; } /* 去掉按钮分组的多余间距，紧凑显示 */ .tox-toolbar__group { margin: 0 !important; padding: 0 !important; display: flex !important; justify-content: flex-start !important; } /* 隐藏滚动条（可选，保留也可以） */ .tox-toolbar__primary::-webkit-scrollbar { height: 4px; } .tox-toolbar__primary::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } </style> </head> <body> <h1>富文本编辑器</h1> <div class="editor-container"> <textarea id="myeditor"></textarea> <button id="submit-btn">获取编辑内容</button> <div id="content-preview">点击上方按钮可查看编辑的内容</div> </div> <script> tinymce.init({ selector: '#myeditor', language: 'zh_CN', height: 700, statusbar: false, // 隐藏底部状态栏 menubar: false, // 隐藏菜单栏（进一步精简） // 核心：所有功能按钮整合为一行，保留核心功能 toolbar: [ 'undo redo | bold italic underline strikethrough | fontsize | forecolor backcolor | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | link unlink image | blockquote hr code | removeformat preview fullscreen' ], // 关键配置：禁用工具栏换行/折叠，强制一行 toolbar_mode: 'sliding', // 滑动模式，超出宽度显示滚动/折叠按钮 toolbar_location: 'top', // 工具栏在顶部（默认） toolbar_sticky: true, // 滚动时工具栏固定（可选，提升体验） // 精简按钮样式，减少占用空间 toolbar_groups: { align: { icon: 'align', items: 'alignleft aligncenter alignright alignjustify' }, list: { icon: 'list', items: 'numlist bullist outdent indent' }, color: { icon: 'color', items: 'forecolor backcolor' } }, // 其他基础配置 extended_valid_elements: 'img[src|alt|title|width|height]', autosave_ask_before_unload: false, images_upload_handler: function (blobInfo, success) { success('data:image/jpeg;base64,' + blobInfo.base64()); } }); // 获取内容功能 document.getElementById('submit-btn').addEventListener('click', function () { const content = tinymce.get('myeditor').getContent(); document.getElementById('content-preview').innerHTML = content; console.log('编辑器内容：', content); }); </script> </body> </html>这个感觉好多了
可以直接黏贴具有格式的文本。
