PHP——文本编辑器

本文介绍 KindEditor 富文本编辑器的基本使用方法,包括通过 JavaScript 控制编辑器内容的各种操作,如获取和设置 HTML 内容、插入文本等,并展示了如何在 PHP 环境下使用 KindEditor。

 

简单的代码演示

详细文件在文件目录里

 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Default Examples</title>
        <style>
            form {
                margin: 0;
            }
            textarea {
                display: block;
            }
        </style>
        <link rel="stylesheet" href="../themes/default/default.css" />
        <script charset="utf-8" src="../kindeditor-min.js"></script>
        <script charset="utf-8" src="../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) {
                    alert(editor.html());
                });
                K('input[name=isEmpty]').click(function(e) {
                    alert(editor.isEmpty());
                });
                K('input[name=getText]').click(function(e) {
                    alert(editor.text());
                });
                K('input[name=selectedHtml]').click(function(e) {
                    alert(editor.selectedHtml());
                });
                K('input[name=setHtml]').click(function(e) {
                    editor.html('<h3>Hello KindEditor</h3>');
                });
                K('input[name=setText]').click(function(e) {
                    editor.text('<h3>Hello KindEditor</h3>');
                });
                K('input[name=insertHtml]').click(function(e) {
                    editor.insertHtml('<strong>插入HTML</strong>');
                });
                K('input[name=appendHtml]').click(function(e) {
                    editor.appendHtml('<strong>添加HTML</strong>');
                });
                K('input[name=clear]').click(function(e) {
                    editor.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" />
                <input type="button" name="isEmpty" value="判断是否为空" />
                <input type="button" name="getText" value="取得文本(包含img,embed)" />
                <input type="button" name="selectedHtml" value="取得选中HTML" />
                <br />
                <br />
                <input type="button" name="setHtml" value="设置HTML" />
                <input type="button" name="setText" value="设置文本" />
                <input type="button" name="insertHtml" value="插入HTML" />
                <input type="button" name="appendHtml" value="添加HTML" />
                <input type="button" name="clear" value="清空内容" />
                <input type="reset" name="reset" value="Reset" />
            </p>
        </form>
    </body>
</html>

 php用到的

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Default Examples</title>

        <link rel="stylesheet" href="kindeditor-4.1.10/themes/default/default.css" />
        <script charset="utf-8" src="kindeditor-4.1.10/kindeditor-min.js"></script>
        <script charset="utf-8" src="kindeditor-4.1.10/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) {
                    alert(editor.html());
                    document.getElementById("yanshi").innerHTML=editor.html();
                });
        
            });
        </script>
    </head>
    <body>
        <h3>默认模式</h3>
        
        
            <textarea name="content" style="width:800px;height:400px;visibility:hidden;">KindEditor</textarea>
            <p>
                <input type="button" name="getHtml" value="取得HTML" />
                
            </p>
        
        <div id="yanshi" style="width:1100px; height:500px"></div>
        
        
    </body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值