带内容预览图文编辑器

<!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> .box{max-width:900px;margin:0 auto;padding:20px} #pre{border:1px #ccc solid;padding:15px;margin-top:15px;min-height:100px} button{padding:8px 20px;background:#007bff;color:#fff;border:none;border-radius:4px} </style> </head> <body> <div class="box"> <h2>带内容预览图文编辑器</h2> <textarea id="editor"></textarea> <button id="btn">生成预览</button> <h4>预览区域</h4> <div id="pre"></div> </div> <script> tinymce.init({selector:"#editor",height:350,language:"zh_CN"}); document.getElementById("btn").onclick=()=>{ document.getElementById("pre").innerHTML=tinymce.get("editor").getContent(); } </script> </body> </html>

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