java中导入ckeditor,以及获取ckeditor中的纯文本内容

一、引入ckeditor

在java中导入CKeditor,总共需要三步:

1、将ckeditor的解压包整个放进项目中

2、在HTML的<head>标签中添加导入的语句:

<script type="text/javascript" src="F:\fuhong-Work\fuhong_edu\icode-console\src\main\resources\static\ckeditor5-build-classic\ckeditor.js"></script>



<!--当然也可选择cdn版本的,这样的好处是不用去官网下载CDeditor包导入项目-->
<!--下面是从cdn版本的包引入方式>

<script type="text/javascript" src="https://cdn.bootcss.com/ckeditor/4.11.4/ckeditor.js"></script>

这里有两点需要注意,可能会出现问题的:

(1)type的属性值最好是“text/javascript”,有人会写成“text/script”,这样会导致CKeditor导入无效

(2)src这里,我这里用的是绝对路径。之前用相对路径的时候也会导致ckeditor导入无效。

3、在引入完ckeditor后,需要在引入这个富文本的地方,定义一个<textarea>,然后在<script>中用js将他替换掉

<textarea name="article.content"id="contentId"class="ckeditor">${article.content}</textarea>

//将上面定义的textarea替换掉。注意需要给textarea定义一个id,用来在替换时确认替换的组件


<script type="text/javascript">		
    CKEDITOR.replace( 'contentId' );
</script>

二、获取ckeditor的值,并进行判断,传入数据库

先是在,<script>中通过下面这行代码获取文本,

也可以是 var value=CKEDITOR.instances.contentId.getData();if(value.length==0){....}else{}

	//将取出来的值交给后台传到数据库
		// 获得Editor IFrame
		var oEditor = CKEDITOR.instances["article.content"];
		//console.log(1);
		//console.log(oEditor);
		var strHtml = $.trim(oEditor.getData());
		//console.log(strHtml);
		if(strHtml == "") {
			alert("请输入正文内容!");
			return false;
		}
		theForm["article.content"].value = strHtml;
		return true;

三、从数据库中取出值,并显示在ckeditor上

直接在需要显示值的地方调用就可以了。

<textarea class="ckeditor" name="article.content" rows="10">${article.content}</textarea>

一定要定义一个class="ckeditor"

发布了47 篇原创文章 · 获赞 10 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/monologuezjp/article/details/93127759