欢迎来到资源库(www.zyku.net)

工具资源

当前位置:首页 > 网站运营 > 工具资源 > CKEditor

CKEditor 5 编辑器设置语言高度以及项目中调用方法

时间:2020-05-14|栏目:工具资源|点击:|作者:jelly8152 |我要投稿

1、首先需要下载并配置好CKEditor 5代码,将CKEditor 5整个文件夹放到网站资源目录下,然后在需要添加CKEditor编辑器的页面中引入CKEditor 5的核心文件ckeditor.js以及语言包文件zh-cn.js:

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

2、然后在需要引用编辑器的位置插入以下代码:

<textarea name="content" id="editor"></textarea>
<script>
ClassicEditor
	.create( document.querySelector( '#editor' ) ,{
		language: 'zh-cn',       //设置编辑器语言为中文,前提是需要引入zh-cn.js文件
	})
	.catch( error => {
		console.error( error );
	});
</script>

3、设置编辑器宽度与高度:

<style>
	body {
			max-width: 800px;
			margin: 20px auto;
		}
		.ck-editor__editable {
        	min-height: 300px;
    	}
</style>

4、完整代码如下:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CKEditor 5</title>
	<style>
		body {
			max-width: 800px;
			margin: 20px auto;
		}
		.ck-editor__editable {
        	min-height: 300px;
    	}
	</style>
	<script src="ckeditor5/build/ckeditor.js"></script>
	<script src="ckeditor5/build/translations/zh-cn.js"></script>
</head>
<body>
<h1 align="center">在线编辑器</h1>
<textarea name="content" id="editor"></textarea>
<script>
ClassicEditor
	.create( document.querySelector( '#editor' ) ,{
		language: 'zh-cn',
	})
	.catch( error => {
		console.error( error );
	});
</script>
</body>
</html>

(资源库 www.zyku.net)

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务