CKEditor 5 编辑器设置语言高度以及项目中调用方法
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)
上一篇:CKEditor 5 在线生成工具online-builder使用方法
栏 目:工具资源
下一篇:SyntaxHighlighter网页代码高亮插件build构造方法
本文标题:CKEditor 5 编辑器设置语言高度以及项目中调用方法
本文地址:https://www.zyku.net/gongju/1917.html
您可能感兴趣的文章
- 06-26CKEditor 4 编辑器添加code标签按钮的方法
- 05-13CKEditor 5 在线生成工具online-builder使用方法
- 05-13CKEditor 5 npm方式安装调用与配置教程
- 09-14docker容器中安装vim编辑器的方法
- 08-17织梦kindeditor编辑器图片上传增加图片alt属性和title
- 02-10Linux中Vim编辑器的使用教程
- 01-12CKEditor常用配置属性整理
- 12-20CKEditor编辑器上传图片禁止自动设置宽高的方法
- 12-16CKEditor结合CKFinder上传管理图片教程
- 12-13CKEditor利用ThinkPHP上传图片的方法
- 01-11铁行租车-铁行租车应用软件功能介绍
- 01-11美白瘦脸美颜相机-美白瘦脸美颜相机应
- 02-17帝国CMS-管理员密码重置插件下载
- 11-07苹果13promax怎样开启游戏专注模式
- 01-12云视通-云视通应用软件功能介绍
- 02-20Debian系统下安装PHP和Nginx环境
- 12-04SmartFTP – 国外著名的文件传输工具
- 04-22oppoReno7同步账号数据教程
- 10-29oppok9s怎么设置返回键
- 09-11红米k40如何开启性能模式
最近更新
阅读排行
猜你喜欢
- 01-09约个的士-约个的士应用软件功能介绍
- 07-05Linux groupdel命令
- 02-17opporeno5通话背景设置方法
- 03-11nginx、php-fpm、mysql用户权限解析
- 02-27华为watch3开启微信消息提醒教程
- 11-22Ubuntu16.04 调整屏幕分辨率的方法
- 09-12支付宝哪里可以查看开学标签
- 05-28sublime设置缩进空格的方法
- 09-21抖音解散粉丝群流程一览
- 02-10小米11无障碍功能启用步骤