快捷搜索:  汽车  科技

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>

ckeditor加入代码功能(CKEditor5编辑器设置语言高度以及项目中调用方法)(1)

猜您喜欢: