PHP study notes: Use of keditor

　Keditor is a free open source editor used by many companies (Baidu Editor is also good). Recently, in order to build a customer information management system, I used this editor in the email sending module, which also counts as learning something new.

Step one: Download the editor

Go to its official website to download: http://kindeditor.net/down.php

Step 2: Choose the editor style

　Choose the appropriate style to use according to your needs. http://kindeditor.net/demo.php is its editor display page, showing the effects of various styles.

Step 3: Test the selected style

Download the unzipped file and get the following directory:

　

Explanation of the unzipped file:

　attached: obviously the attachment directory

　Examples: It is a demo with many kinds of effects, which is convenient for everyone to use

　lang: This is for language packs

　php: PHP demo

　Plugins: Put editor plug-ins

　themes: put template themes

The others are some js files, let’s ignore them for now, we don’t seem to understand them, hahahahahahahahaha.

　 I directly use the editor as a plug-in and place it in the plugins/keditor path in the root directory of my website, as shown below:

　

I’m taking the default style as an example, the code comes from: examples/default.htmlCopy all the code in, and add an input box to put the email subject. The rest is basically unchanged:

<span style="font-size: 18px;">


    <meta charset="utf-8">
    <title>发送邮件</title>
    <style><span style="color: #000000;">
        form {
            margin</style></span>: 0<span style="color: #000000;">;
        }
        textarea {
            display</span>:<span style="color: #000000;"> block;
        }
    </span>
    <link rel="stylesheet" href="<span%20style=" color:>plugins/keditor/themes/default/default.css" />
    <script charset="utf-8" src="<span%20style=" color:>plugins/keditor/kindeditor-min.js"></script>
    <script charset="utf-8" src="<span%20style=" color:>plugins/keditor/lang/zh_CN.js"></script>
    <script>
        <span style="color: #0000ff;">var<span style="color: #000000;"> editor;
        KindEditor.ready(<span style="color: #0000ff;">function<span style="color: #000000;">(K) {
            editor = K.create('textarea[name="content"]',<span style="color: #000000;"> {
                allowFileManager : <span style="color: #0000ff;">true<span style="color: #000000;">
            });
            K('input[name=getHtml]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                alert(editor.<span style="color: #000000;">html());
            });
            K('input[name=isEmpty]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                alert(editor.<span style="color: #000000;">isEmpty());
            });
            K('input[name=getText]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                alert(editor.<span style="color: #000000;">text());
            });
            K('input[name=selectedHtml]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                alert(editor.<span style="color: #000000;">selectedHtml());
            });
            K('input[name=setHtml]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                editor.html('<h3>Hello KindEditor'<span style="color: #000000;">);
            });
            K('input[name=setText]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                editor.text('<h3>Hello KindEditor'<span style="color: #000000;">);
            });
            K('input[name=insertHtml]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                editor.insertHtml('<strong>插入HTML'<span style="color: #000000;">);
            });
            K('input[name=appendHtml]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                editor.appendHtml('<strong>添加HTML'<span style="color: #000000;">);
            });
            K('input[name=clear]').click(<span style="color: #0000ff;">function<span style="color: #000000;">(e) {
                editor.html(''<span style="color: #000000;">);
            });
        });
    </script>


<h3 id="默认模式">默认模式</h3>

邮件主题：

The effect is as follows:

What needs to be noted here is that because the referenced css and js files were placed in the path plugins/keditor, the header file reference path needs to be modified. I commented it in red above, so please pay attention when using it. Nothing else seems to be difficult. Well, this ends a simple tutorial on how to use the editor.