ckeditor加入代码功能(CKEditor5编辑器设置语言高度以及项目中调用方法)
ckeditor加入代码功能(CKEditor5编辑器设置语言高度以及项目中调用方法)language: 'zh-cn' //设置编辑器语言为中文,前提是需要引入zh-cn.js文件 .create( document.querySelector( '#editor' ) {<textarea name="content" id="editor"></textarea><script>ClassicEditor
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>