PHP使用KindEditor 富文本编辑器

折扇掩笑颜

已于 2024-07-16 11:26:00 修改

阅读量691

点赞数

分类专栏：前端框架文章标签： php javascript html

于 2022-02-10 10:11:09 首次发布

本文链接：https://blog.csdn.net/curtain_yemu/article/details/122823936

版权

前端框架专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在PHP项目中集成并使用KindEditor富文本编辑器。首先，你需要从官方源下载编辑器，然后将其解压并部署到网站程序目录。最后，在HTML页面中创建文本域，引入JS文件并进行编辑器初始化设置。

摘要由CSDN通过智能技术生成

1. 下载编辑器

下载链接: 下载 - KindEditor - 在线HTML编辑器

2. 编辑器部署

将下载好的压缩包解压后放到网站程序目录里

3.在html页面里部署编辑器

创建HTML文本域

  <textarea name="content" id="Contents" style="width:600px;height:450px;"></textarea>

在页面引入js文件

<script src="/static/kindeditor/kindeditor-all-min.js"></script>
<script src="/static/kindeditor/lang/zh-CN.js"></script>

初始化编辑器

<script>
    //编辑器
    var KE;
    KindEditor.ready(function (K) {
        KE = K.create('#Contents', {
            allowFileManager: true, //浏览图片空间
            filterMode: false, //HTML特殊代码过滤
            afterBlur: function () { this.sync(); }, //编辑器失去焦点(blur)时执行的回调函数（将编辑器的HTML数据同步到textarea）
            afterUpload: function (url, data, name) { //上传文件后执行的回调函数，必须为3个参数
                if (name == "image" || name == "multiimage") { //单个和批量上传图片时
                    var img = new Image(); img.src = url;
                    img.onload = function () { //图片必须加载完成才能获取尺寸
                        if (img.width > 100) {
                            KE.html(KE.html().replace('<img src="' + url + '" width="100" height="100"/>', '<img src="' + url + '" width="100" height="100px"/>'))
                            //KE.html(KE.html().replace('<img src="' + url + '" width="300"/>', '<img src="' + url + '" width="300"/>'))
                        }

                    }
                }
            }
        });
        KindEditor.create('#Contents', { allowImageUpload: false, resizeType: 1, width: "600px", height: "300px" });
    });
</script>