kindeditor在Ext的使用

你的名字 2022-08-06 10:05 204阅读 0赞

在 [http://kindeditor.net/][http_kindeditor.net] 下载 kindeditor。可以自己查阅 kindeditor的使用说明：[http://kindeditor.net/docs/usage.html][http_kindeditor.net_docs_usage.html]

下面说说自己的使用：

先看效果：

![Center][]

【1】我下载的的4.1.10版，下载后的文件目录如下：可以根据需求删除以下目录后部署到自己的程序上：http://域名/hcp/kindeditor/ 。

*  asp - ASP程序
 *  asp.net - ASP.NET程序
 *  php - PHP程序
 *  jsp - JSP程序
 *  examples - 演示文件

![Center 1][]

【2】在要使用 kindeditor的HTML网页上添加以下脚本：

【3】使用以下方法便可显示：

{
        	    	xtype: 'textareafield',
                    maxLength : '1000',
                    maxLengthText : '文章提示信息长度不能超过2000字',
                    name : 'desciption',
                    fieldLabel:"初始值",//赋初始值
                    width :'100%',
                    height : 350,
                    id : 'desciption',//不能缺少
                    listeners : {"render" : function(f) {
                    	K = KindEditor;
                    	htmlEditor = K.create('#desciption',//对应id
                    		{
                    			cssPath : 'kindeditor/plugins/code/prettify.css',
                                            uploadJson : 'kindeditor/jsp/upload_json.jsp',//图片上传处理文件，保存图片地址需正确，否则显示：上传目录不存在
                                            fileManagerJson : 'kindeditor/jsp/file_manager_json.jsp',
                                            //fontSizeTable:['21px','20px','17px','18px','16px','14px','12px'],
                                            resizeType : 1,
                                            allowPreviewEmoticons : true,
                                            allowImageUpload : true
                    		});
                        }
                    }
        	    }

【4】获取内容：

var desciption =htmlEditor.html();

【5】弹出“上传文件不存在” ，可查看 “upload\_json.jsp” 文件，并做改善。

将以下内容：

//检查目录
    File uploadDir = new File(savePath);
    if (!uploadDir.exists()) {
    	out.println(getError("上传目录不存在。"));
    	return;
    }

改为：

File uploadDir = new File(savePath);
    if (!uploadDir.exists()) {
    	uploadDir.mkdirs();//创建目录
    }

[http_kindeditor.net]: http://kindeditor.net/
[http_kindeditor.net_docs_usage.html]: http://kindeditor.net/docs/usage.html
[Center]: /images/20220806/bee36a2629c34582bf5e08ef23c23ad1.png
[Center 1]: /images/20220806/a88fcf23f7cc4020b4c7e6bc985c4b6e.png