jfinal + easyui 集成CKEditor5编辑器

本文记录了使用CKEditor5的过程，特殊强调，这里使用的是CKEditor5。

1、下载CKEditor5编辑器
https://ckeditor.com/ckeditor-5/download/

2、在页面引用js文件

<script src="assets/ckeditor5-build-classic/11.1.1/translations/zh-cn.js"></script>
<script src="assets/ckeditor5-build-classic/11.1.1/ckeditor.js"></script>

3、在form表单中插入textarea标签

 		<tr>
 			<td>问题：</td>
 			<td><textarea id="question" name="question"></textarea></td>
 		</tr>
 		<tr>
 			<td>答案：</td>
 			<td><textarea id="answer" name="answer"></textarea></td>
 		</tr>

4、编写初始化编辑器的JS方法

<script type="text/javascript">
//设置编辑器全局变量
var zsContentQuestion = null;
var zsContentAnswer = null;
function createEditor(id){
    ClassicEditor
    .create(document.querySelector(id), {
    	language:'zh-cn'
	   // ,toolbar:['heading', 'document', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
   		,ckfinder: {
               uploadUrl : 'zs/content/uploadImages?command=QuickUpload&type=Files&responseType=json'
               //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
           }
    })
    .then(editor => {
    	if(id=='#question'){
    		zsContentQuestion = editor;
    	}else if(id=='#answer'){
    		zsContentAnswer = editor;
    	}
        //data = editor.getData();
   	    //editor.setData('ddddd');
   	    console.log(editor);
    })
    .catch(error => {
        console.error(error);
    });
}
</script>

5、点击easyui添加按钮的方法（我的eayui已集成了lazy.js）

<a href="javascript:void(0);" onClick="lazy.easyui.openDialog('dlg-zs-content-save',function(){
		$('#fm-zs-content-save #id').val('');  
		//如果编辑器没有初始化，则创建编辑器
		if(zsContentQuestion==null){
			createEditor('#question');
			createEditor('#answer');
		}
	})" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>

6、点击easyui修改按钮的方法（我的eayui已集成了lazy.js）

<a href="javascript:void(0);" onClick="lazy.easyui.editDialog('dg-zs-content-list','dlg-zs-content-save','fm-zs-content-save',function(){
		//如果编辑器没有初始化，则创建编辑器
		if(zsContentQuestion==null){
			createEditor('#question');
			createEditor('#answer');
		}
		var row = $('#dg-zs-content-list').datagrid('getSelected');
		if(row==null){
			$.messager.alert('请选择一行需要编辑的数据！');
		}else{
			zsContentQuestion.setData(row.question);
			zsContentAnswer.setData(row.answer);
		}
	})" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">修改</a>

7、在jfinal中处理图片上传的问题，需要返还uploaded、url两个参数

	//CKEditor上传图片
	public void uploadImages() throws IOException{
		Boolean uploaded = false;
		String url = "";
		//创建上传文件路径
		String Path = "upload/zs/"+DateUtil.formatDate(new Date(), "YYYY-MM")+"/";
		//我是将WEB目录写在配置文件里，用一个方法去读取的
		String filePath = this.getWebRootPath()+"/"+Path;
		FileUtil.mkdirs(filePath);
		UploadFile upload = this.getFile();
		if(upload!=null){
			File f=upload.getFile();
			String extName=StringUtil.getFileFix(f.getName());
			String fileName = System.currentTimeMillis() + "." + extName;
			//调用获取网站Url的方法，拼接成图片链接地址
			url=this.getWebUrl() + "/" + Path + fileName;
			if(f.renameTo(new File(filePath+fileName))){
				uploaded = true;
			}
		}
		Map<String, Object> result = new  HashMap<String, Object>();
		result.put("uploaded", uploaded);
		result.put("url", url);
		render(new JsonRender(result).forIE());
	}

8、CKEditor的工具条栏目可以在创建的时候定制

    ClassicEditor
    .create(document.querySelector(id), {
	   toolbar:['heading', 'document', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
    })
    .then()
    .catch();

    "undo", //撤销
    "redo", //不撤销
    "bold", //加粗
    "italic", //斜体
    "blockQuote",  //块引用
    "imageTextAlternative", //用于图片加载不出来时替换显示的文字
    "imageUpload", // 插入图片
    "heading", // 标题
    "imageStyle:full",  //图片与上下文组合方式：图片占一整行
    "imageStyle:side",  //图片与上下文组合方式：图片在文字的旁边
    "link", // 链接
    "numberedList",   //有序列表
    "bulletedList"    //无序列表

9、使用中的问题
我使用的easyui是片段加载的（JS、CSS等文件只需在主框架加载一次，选项卡页面只会加载中的内容，不必每个页面都加载JS、CSS等文件，但需保证整个框架内的ID编号要唯一），CKEditor5集成后，工具栏中的段落调整和超链接功能不能正常使用。如果你使用的每个页面都要加载JS、CSS等文件的方式，是可以正常使用的。

10、简单的demo示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="translations/zh-cn.js"></script>
<script src="ckeditor.js"></script>
</head>
<body>
 <form id="fm-zs-content-save" action="#" method="post">
 <table>
	<tr>
		<td>编辑器：</td>
		<td><textarea id="editor" name="editor"></textarea></td>
 	</tr>
 	</table>
 </form>
<script type="text/javascript">
var myEditor = null;
ClassicEditor
.create(document.querySelector("#editor"), {
	language:'zh-cn'
   // ,toolbar:['heading', 'document', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
	,ckfinder: {
          uploadUrl : 'zs/content/uploadImages?command=QuickUpload&type=Files&responseType=json'
          //后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
      }
})
.then(editor => {
    myEditor = editor;
})
.catch(error => {
    console.error(error);
});
</script>
</body>
</html>

jfinal + easyui 集成CKEditor5编辑器

猜你喜欢