带导出文本功能编辑器

<!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> .wrap{max-width:900px;margin:30px auto;padding:20px} .btns button{margin-right:10px;padding:8px 16px;border:none;border-radius:4px;cursor:pointer} #htmlBtn{background:#2563eb;color:#fff} #textBtn{background:#059669;color:#fff} #output{margin-top:15px;padding:12px;border:1px #ccc solid;min-height:80px;white-space:pre-wrap} </style> </head> <body> <div class="wrap"> <h2>带导出文本功能编辑器</h2> <textarea id="editor"></textarea> <div class="btns" style="margin:12px 0"> <button id="htmlBtn">获取HTML代码</button> <button id="textBtn">导出纯文字</button> </div> <div>输出内容：</div> <div id="output"></div> </div> <script> tinymce.init({selector:"#editor",height:350,language:"zh_CN"}); document.getElementById("htmlBtn").onclick = ()=>{ document.getElementById("output").innerText = tinymce.get("editor").getContent(); } document.getElementById("textBtn").onclick = ()=>{ document.getElementById("output").innerText = tinymce.get("editor").getContent({format:"text"}); } </script> </body> </html>

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