暗黑模式切换富文本编辑器

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>暗黑模式切换富文本编辑器</title> <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js"></script> <style> .main{max-width:950px;margin:30px auto} #switchBtn{padding:8px 18px;background:#1f2937;color:#fff;border:none;border-radius:5px;margin-bottom:10px} </style> </head> <body> <div class="main"> <h2>暗黑模式切换富文本编辑器</h2> <button id="switchBtn">切换暗黑/浅色模式</button> <textarea id="darkEdit"></textarea> </div> <script> let darkMode = false; tinymce.init({ selector:"#darkEdit", height:420, language:"zh_CN", skin:"oxide", content_css:"default" }); document.getElementById("switchBtn").onclick = ()=>{ darkMode = !darkMode; let inst = tinymce.get("darkEdit"); if(darkMode){ inst.options.skin = "oxide-dark"; inst.options.content_css = "dark"; }else{ inst.options.skin = "oxide"; inst.options.content_css = "default"; } inst.reload(); } </script> </body> </html>

posted @ 2026-07-02 15:57  wyy330022  阅读(2)  评论(0)    收藏  举报