kindeditor获取html

最新推荐文章于 2025-03-27 16:23:25 发布

寻找虫洞

最新推荐文章于 2025-03-27 16:23:25 发布

阅读量644

点赞数

分类专栏：前端编程文章标签： js html

本文链接：https://blog.youkuaiyun.com/weixin_43802477/article/details/111474798

版权

前端编程专栏收录该内容

3 篇文章

订阅专栏

最终的目的是：将编辑器获得HTML可以自动存入文件中

<html>
    <head>
        <meta charset="utf-8" />
        <title>Default Examples</title>
        <style>
            form {
                margin: 0;
            }
            textarea {
                display: block;
            }
        </style>
        <link rel="stylesheet" href="editor/themes/default/default.css" />
        <script charset="utf-8" src="editor/kindeditor.js"></script>
        <script charset="utf-8" src="editor/lang/zh-CN.js"></script>
        <script>
            var editor;
            KindEditor.ready(function(K) {
                editor = K.create('textarea[name="content"]', {
                    allowFileManager : true
                });
                K('input[name=getHtml]').click(function(e) {
                    html = editor.html();
                    document.getElementById("demo").innerHTML= html;
                });
            });
        </script>
    </head>
    <body>
        <h3>默认模式</h3>
        <form>
            <textarea name="content" style="width:800px;height:400px;visibility:hidden;">KindEditor</textarea>
            <p>
                <input type="button" name="getHtml" value="取得HTML" />
            </p>
        </form>
    </body>
</html>

看kindeditor部署，来了解文件结构和代码中命令解释。
代码解释
var editor 指定变量
KindEditor.ready(function(K) {
editor = K.create(‘textarea[name=“content”]’, {
allowFileManager : true
});
K(‘input[name=getHtml]’).click(function(e) {
alert(editor.html());
});
});
当textarea标签 name="content"执行 allowFileManager : true ；再次判断 input=“getHtml” 执行 alert(editor.html()) ，在原演示中有许多标签，来完成各种的事件，因为我们的目的，我们这里只留下“取得HTML“ 。
kindEditor.ready() 官方解释是将指定函数绑定到DOM加载完成事(DOMContentLoaded)上（看不明白）

                html = editor.html();
                document.getElementById("demo").innerHTML= html;

点击，直接打印获取的html，我们可以清楚的看到获取的html。