kindeditor获取html内容之终极大法

请允许我哔哔两句，真是难受啊，有问题去百度，结果百了一堆乱七八糟的内容，有头没尾，有尾没头的，搞得我晕头转向，现在把kindeditor获取HTML的终极打法无偿分享出来，这可是我配置查找了一下午的成果。先把代码贴出来，文件引入看自己的文件位置。

复制代码
    <script>
        KindEditor.ready(function(K) {
　　　　　　　//大概是初始化的意思吧
            editor = K.create('textarea[name="content1"]', {
                uploadJson: 'upload_json.php',
                fileManagerJson: 'file_manager_json.php',
                allowFileManager: true,
                afterCreate: function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                }
            });
            prettyPrint();
        });
    </script>

    <script>
        function btn() {
　　　　　　点击时获取获取html
            editor.sync();
            html = document.getElementById('con').value; //原生API
            console.log(html);
         
        }
    </script>
复制代码

这是主要的javascript。现在也把完整的代码放出来，如果帮到你，记得留下个脚印

复制代码
<?php
$htmlData = '';
if (!empty($_POST['content1'])) {
    if (get_magic_quotes_gpc()) {
        $htmlData = stripslashes($_POST['content1']);
    } else {
        $htmlData = htmlspecialchars($_POST['content1']);
    }
}
?>
<!doctype html>
<html>

<head>
    <meta charset="utf-8" />
    <title>KindEditor PHP</title>
    <link rel="stylesheet" href="../themes/default/default.css" />
    <link rel="stylesheet" href="../plugins/code/prettify.css" />
    <script src="../kindeditor-all-min.js"></script>
    <script src="../lang/zh-CN.js"></script>
    <script src="../plugins/code/prettify.js"></script>
    <script>
        KindEditor.ready(function(K) {
            editor = K.create('textarea[name="content1"]', {
                uploadJson: 'upload_json.php',
                fileManagerJson: 'file_manager_json.php',
                allowFileManager: true,
                afterCreate: function() {
                    var self = this;
                    K.ctrl(document, 13, function() {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                    K.ctrl(self.edit.doc, 13, function() {
                        self.sync();
                        K('form[name=example]')[0].submit();
                    });
                }
            });
            prettyPrint();
        });
    </script>

    <script>
        function btn() {
            editor.sync();
            html = document.getElementById('con').value; //原生API
            console.log(html);
        }
    </script>
</head>

<body>
    <?php echo $htmlData; ?>
    <form name="example" method="post" action="demo.php">
        <textarea id="con" name="content1" style="width:700px;height:200px;visibility:hidden;"><?php echo htmlspecialchars($htmlData); ?></textarea>
        <br />
        <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter)
    </form>
    <button onclick="btn()">获取html？</button>
</body>

</html>
View Code
复制代码
posted @   小枫同学  阅读(2220)  评论(2)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae