kindEditor的使用_kindeditor修改主题-CSDN博客

本文链接：https://blog.csdn.net/qq_43567222/article/details/113035405

本文介绍了如何在网页中集成KindEditor富文本编辑器，并着重解决了在更换主题时遇到的CSS引用错误和参数配置问题。通过提供正确的HTML和JS代码示例，展示了如何设置编辑器的样式、大小、功能以及自定义事件。同时，强调了直接复制代码可能存在风险，建议读者理解每个配置项含义以避免类似困扰。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上图：

在这里插入图片描述

下载好kindEditor的资源放到static下，如下图：

在Html页面中写入JS代码，由于原始的富文本编辑器样式太丑了，换个theme，这里刚使用时改主题耗了太久时间，最后发现是CSS样式引入的错误和themes后面的参数写错，直接拿代码用的风险太大了（是我太菜了┭┮﹏┭┮）

//开头引入所需主题的CSS即可
<link rel="stylesheet" href="/static/js/kindeditor/themes/darkGray/darkGray.css"/>
<link rel="stylesheet" href="/static/js/kindeditor/themes/darkGray/style.css.css"/>
//P标签放在自己所需的地方
<p><textarea class="textarea" onfocus="" id="answerContent" name="content" ></textarea></p>
//JS代码，创建富文本编辑框，ID对应P标签的ID
KindEditor.ready(function (K) {
            editor = K.create('textarea[id="questionContent"]', {
                themeType : 'darkGray',//主题在这里设置
                //否允许浏览服务器已上传文件,默认是false
                allowFileManager: true,
                width:"1182px",
                basePath : '/static/js/kindeditor/',//指定编辑器的根目录路径
                formatUploadUrl :false,//false时不会自动格式化上传后的URL
                resizeType : 0,//2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。默认值: 2
                autoHeightMode : false,//自适应高度
                allowPreviewEmoticons : true,//true或false，true时鼠标放在表情上可以预览表情
                allowImageUpload : true,//true时显示图片上传按钮
                // uploadJson :'user/control/answer/uploadImage.htm?questionId='+questionId,//指定浏览远程图片的服务器端程序
                filePostName:'file',//文件上传字段 默认imgFile
                items : ["source","fontname","fontsize","forecolor","hilitecolor",
                    "bold","italic","underline","removeformat","link","unlink",
                    "justifyleft","justifycenter","justifyright","insertorderedlist",
                    "insertunorderedlist","emoticons","image","insertfile","media","embedVideo",
                   "uploadVideo","hidePassword","hideComment","hideGrade","hidePoint","hideAmount","fullscreen"],
                afterChange : function() {
                    this.sync();
                }
            });
        });