KindEditor - 富文本编辑器 - 使用+上传图片

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了KindEditor - 富文本编辑器 - 使用+上传图片相关的知识，希望对你有一定的参考价值。

效果：

技术分享

 

项目结构：

  • Extend：存放各种扩展
  • BlogAction.class.php：博文模块
  • addBlog.html:添加博文页面

技术分享

 

Html代码：

只是用一个核心文件也可，也可以加入其他js文件，比如语言包，扩展包。

addBlog.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>添加博文</title>
    <link rel="stylesheet" href="__PUBLIC__/Css/Public.css" />
</head>
<body>
    <table class="table">
     
         //代码省略......
　　　　　//代码省略......
　　　　　//代码省略......
     
        <tr>
            <td colspan="2" align="center">
                <!-- KindEditor编辑器 Begin -->
                <textarea name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>
                <!-- KindEditor编辑器 End -->
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <!-- <input type="text" value="保存提交" /> -->
                <a href="" id="submit">提交</a>
            </td>
        </tr>
    </table>


    <!-- JQuery CDN Begin -->
    <script src="//cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <!-- JQuery End -->
    <!-- KindEditor编辑器JS Begin -->
    <script charset="utf-8" src="__EXTEND__/KindEditor/kindeditor.js"></script>
    <!-- KindEditor编辑器JS End -->
    <!-- 调用js Begin -->
    <script>
        $(function () {
            //初始化编辑器
            var ed = null;
            KindEditor.ready(function(K) {
　　　　　　　　　//上传操作
                ed = K.create(‘textarea[name="content"]‘, {
                    uploadJson : ‘../Blog/upload‘,//post提交图片的地址，在后台按照往常的上传函数接受即可。
                });
            });

            //提交事件
            $(‘#submit‘).click(function() {
                var content = ed.html();//获取编辑器内容
                alert(content);
            });
        });
    </script>
    <!-- 调用js End -->

</body>
</html>

 

PHP后台：

  • 此处使用了ThinkPHP的MVC模式搭建项目：
  • 所以传递到这个路径：../Blog/upload,其中 ../ 代表文件所在位置其上的所有目录结构。文件所在目录，看顶部图片。
  • 上传成功或失败，按照注释所给的json格式传递会前台即可。

BlogAction.class.php->upload()

/**
 * 处理上传图片
 * @return [type] [description]
 */
Public function upload() {
    //上传文件
    import(‘ORG.Net.UploadFile‘);
    $upload = new UploadFile();
    $upload->savePath = ‘./App/Uploads/‘;
    $upload->autoSub = true;
    $upload->subType = ‘date‘;
    $upload->dateFormat = ‘Ymd‘;
    
    // 返回值：
    // //成功时
    // {
    //         "error" : 0,
    //         "url" : "http://www.example.com/path/to/file.ext"
    // }
    // //失败时
    // {
    //         "error" : 1,
    //         "message" : "错误信息"
    // }
    if ( !$upload->upload() ) {
        echo json_encode(array(‘error‘=>1, $upload->getErrorMsg()));
    } else {
        $UplaodFileInfo = $upload->getUploadFileInfo();
        $imagePath = ‘/App/Uploads/‘ . $UplaodFileInfo[0][‘savename‘];
        echo json_encode(array(‘error‘=>0, ‘url‘=>$imagePath));
    }

}

 

以上是关于KindEditor - 富文本编辑器 - 使用+上传图片的主要内容，如果未能解决你的问题，请参考以下文章

Springboot中使用kindeditor富文本编辑器

富文本编辑器KindEditor的使用

kindEditor 富文本编辑器 使用介绍

django项目中使用KindEditor富文本编辑器

KindEditor - 富文本编辑器 - 使用+上传图片

kindeditor富文本框使用方法