CKEditor编辑器的简单使用方法，取值，赋值

2024-05-01 15:24
21人已看

先从官网下载包。CKEditor 4 - Download Latest Version.

一：在项目里引用JQ基础包和CK的JS包

<script src="/JS/jquery-3.4.1.js?v=1.0"></script>

<script src="/ckeditor/ckeditor.js"></script>

二：在表单内声明CK

<textarea name="editor1"></textarea>
<script>
	CKEDITOR.replace('editor1', {
		height: '800px', // 设置编辑器的高度
	});
</script>

三：JS里赋值和取值

CKEDITOR.instances.editor1.setData(ContHTMLWoman);//给CK编辑器赋值

var contHTMLWoman = CKEDITOR.instances.editor1.getData();//获取CK编辑器的HTML内容
在向后台传值的时候要先转义一下
 'contHTMLWoman': encodeURI(contHTMLWoman)
后台接收时候，也要转义一下
strTemplContentWoman = Request.Form["contHTMLWoman"].ToString();//接收后，未转义前
strTemplContentWoman = HttpUtility.UrlDecode(strTemplContentWoman);//转义后为正常显示内容

详细的参考下面引用文章

参考文章：富文本编辑器CKEditor4简单使用-01_ckeditor富文本-CSDN博客