专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

ckeditor编辑器插件提交时获取编辑器的内容 如何自定义ckeditor编辑器的默认内容

作者:鹏仔先生日期:2020-06-24浏览:1798分类:JavaScript

ckeditor编辑器插件提交时获取编辑器的内容 如何自定义ckeditor编辑器的默认内容

首先,请大家自行下载 ckeditor.js 并引入,我使用的是ckeditor4,下面给大家分享一下获取ckeditor编辑器的内容,和自定义编辑器的内容。


我简单写个提交获取按钮和编辑器

<body>
    <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
    <button id="GetBtn">获取内容</button>
</body>

JS中editor1是编辑器的id或name,大家自行修改自己定义的name或id。

<script>
	CKEDITOR.replace('editor1', {
		uiColor: '#CCEAEE'
	});

	// 编辑器默认的内容
	CKEDITOR.instances.editor1.setData("共享博客 SharedBlog.cn");

	var GetBtn = document.getElementById("GetBtn");
	// 点击时获取编辑器的内容
	GetBtn.onclick = function(){
		// 获取带html的内容
		console.log(CKEDITOR.instances.editor1.getData())
		// 获取纯文本内容
		console.log(CKEDITOR.instances.editor1.document.getBody().getText())
	}
</script>


自定义编辑器内容(常用语再次修改编辑器内容时重新打开)

CKEDITOR.instances.editor1.setData("共享博客 SharedBlog.cn");

获取编辑器带有HTML的内容(一般提交后台时提交此内容)

CKEDITOR.instances.editor1.getData()

获取编辑器纯文本内容(一般文章需要获取摘要,可用此方法,自行js截取下内容即可)

CKEDITOR.instances.editor1.document.getBody().getText()


更多请看ckeditor-4官方文档 https://ckeditor.com/ckeditor-4/

手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

请填写验证码

关灯