位置: IT常识 - 正文

富文本编辑器 ck-editor5 的使用(富文本编辑器和markdown编辑器的区别)

编辑:rootadmin
富文本编辑器 ck-editor5 的使用

推荐整理分享富文本编辑器 ck-editor5 的使用(富文本编辑器和markdown编辑器的区别),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:富文本编辑器和markdown编辑器的区别,富文本编辑器怎么实现,富文本编辑器的图片怎么存储,富文本编辑器怎么实现,富文本编辑器后端存储,富文本编辑器后端存储,富文本编辑器实现,富文本编辑器 css,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在项目中需要用到富文本编辑器,据说ck-editor5很不错,于是就使用它了,不过在期间也遇到了很多问题,这里记录下。

一、引入ck-editor5

文档地址:Predefined builds - CKEditor 5 Documentation

这里有个坑,我最初是根据文档执行下面的npm命令下载的,最后捣腾了半天发现里面功能不全,就是一个简单版本的ck-editor

所以不推荐使用

npm install --save @ckeditor/ckeditor5-build-classic

推荐引入方式:

 自定义配置自己所需要的功能生成build文件然后在项目中引入

自定义配置地址:CKEditor 5 Online Builder | Create your own editor in 5 steps

1. 选择一个自己喜欢的风格 - 这里我选择第一个 

2. 添加自己所需要的功能 - 部分功能可能收费 - 选择免费的就可以(标签上带图标的收费 - 猜测)

3.  调整工具栏的位置 - 就算这里位置调错也没事,之后也可以在代码中修改

 4. 选择一种语言 进行下一步

富文本编辑器 ck-editor5 的使用(富文本编辑器和markdown编辑器的区别)

 5. 最后开始生成代码文件就自定义完成了

 6. 最后下载生成的文件

 二、在项目中引入ck-editor5

下载出来的文件中build是刚刚配置完成后打包后的文件

如果需要重新调整工具栏的位置 - 只需要改变这边代码的顺序然后执行npm命令

npm install  npm run build 就能重新生成一个新的build文件

将下载下来文件中的build文件放到自己的项目中

 三、在项目中使用

1. 如果添加了上传图片的功能则需要写一个上传文件的类(这里是也是百度了许久得出的答案)

 创建一个 UploadAdapter.js 文件,代码如下:

/** * 配合ckeditor编辑器的上传类 * */export default class UploadAdapter { // 加载器 #loader; // 上传的地址 #uploadFileUrl = ""; /** 构造方法 */ constructor(loader) { this.loader = loader; } /** 上传方法 */ upload() { this.loader.file.then(res => { console.log(res) }); } /** 中止上传过程方法 */ abort() {}}

 2. 最后一步,使用,直接上代码

我这里是用vue3的,这里获取到的editor对象不能与reactive和ref有关联,单独放在外面就好,不需要响应式!

<template><div><div id="ck-editor"></div><button @click="handleClick">获取内容</button></div></template><script lang="ts">import { defineComponent, reactive, toRefs, onMounted, toRaw } from 'vue';import UploadAdapter from './UploadAdapter.js';export default defineComponent({setup() {const state = reactive({});let editor: any = null;onMounted(() => {(window as any).ClassicEditor.create(document.getElementById("ck-editor")).then((_editor: any ) => {_editor.plugins.get('FileRepository').createUploadAdapter = (loader: any) => {return new UploadAdapter(loader);};editor = _editor;})})const handleClick = () => {console.log(editor.data.get())}return {...toRefs(state),handleClick,} }});</script>

四、最后执行代码  - 点击按钮后就能拿到想要的数据了😀

本文链接地址:https://www.jiuchutong.com/zhishi/295271.html 转载请保留说明!

上一篇:Vue--Router--解决多路由复用同一组件页面不刷新问题(vue-router query)

下一篇:Web应用程序的身份验证:Session认证、Token认证(web应用程序的主要组成部分)

  • 注销微信支付后微信还能用吗(注销微信支付后多久可以重新实名)

    注销微信支付后微信还能用吗(注销微信支付后多久可以重新实名)

  • 华硕天选2键盘灯怎么设置(华硕天选2键盘可以扣下来吗)

    华硕天选2键盘灯怎么设置(华硕天选2键盘可以扣下来吗)

  • 快手赞取消了动态还显示吗(快手赞了取消了对方还看得见吗)

    快手赞取消了动态还显示吗(快手赞了取消了对方还看得见吗)

  • 微信完成群公告的方法是什么(微信完成群公告后就看不到后来人完成吗)

    微信完成群公告的方法是什么(微信完成群公告后就看不到后来人完成吗)

  • 荣耀play4屏幕刷新率是多少(荣耀play4屏幕刷新率多少hz)

    荣耀play4屏幕刷新率是多少(荣耀play4屏幕刷新率多少hz)

  • 固态硬盘qvo和evo的区别(固态硬盘qvo和evo有什么差别)

    固态硬盘qvo和evo的区别(固态硬盘qvo和evo有什么差别)

  • 微信怎么拉黑再删除(微信拉黑了怎么强制加回来)

    微信怎么拉黑再删除(微信拉黑了怎么强制加回来)

  • 如何知道是声控摄像头(如何知道是声控还是灯控)

    如何知道是声控摄像头(如何知道是声控还是灯控)

  • 不是华为手机可以用华为手表吗(不是华为手机可以用hicar吗)

    不是华为手机可以用华为手表吗(不是华为手机可以用hicar吗)

  • 除了qq微信还有什么聊天软件(除了qq微信还有什么软件能聊天)

    除了qq微信还有什么聊天软件(除了qq微信还有什么软件能聊天)

  • e6600cpu配什么主板(e6600cpu能装win7吗)

    e6600cpu配什么主板(e6600cpu能装win7吗)

  • 充电5分钟通话2小时是什么手机(充电5分钟通话2次正常吗)

    充电5分钟通话2小时是什么手机(充电5分钟通话2次正常吗)

  • hdmi输入和输出怎么区分(hdmi输入和输出接口)

    hdmi输入和输出怎么区分(hdmi输入和输出接口)

  • 冻结微信号后有什么后果(冻结微信号后有什么时候能恢复)

    冻结微信号后有什么后果(冻结微信号后有什么时候能恢复)

  • 普通ipad可以画画吗(ipad可以画图吗)

    普通ipad可以画画吗(ipad可以画图吗)

  • 抖音怎么拍自己唱歌(抖音怎么拍自己老了的样子)

    抖音怎么拍自己唱歌(抖音怎么拍自己老了的样子)

  • 苹果8p有猪头特效吗(苹果8猪头说话怎么弄)

    苹果8p有猪头特效吗(苹果8猪头说话怎么弄)

  • mp3怎么用手机下歌(mp3怎么用手机下电子书)

    mp3怎么用手机下歌(mp3怎么用手机下电子书)

  • grub怎么进入win7(grub怎么进入windows)

    grub怎么进入win7(grub怎么进入windows)

  • 小米8步数在哪设置(小米8 步数)

    小米8步数在哪设置(小米8 步数)

  • 微信拉黑别人为什么可以收到信息(微信拉黑别人为什么还能看到头像)

    微信拉黑别人为什么可以收到信息(微信拉黑别人为什么还能看到头像)

  • 浅析什么是伪类和伪元素?伪类和伪元素的区别解析(伪类的常见类型)

    浅析什么是伪类和伪元素?伪类和伪元素的区别解析(伪类的常见类型)

  • lilo命令  安装核心载入(安装libtool)

    lilo命令 安装核心载入(安装libtool)

  • 税后净营业利润和净利润的区别
  • 金税三期是什么时候投入使用的
  • 免税农产品发票开具时税率怎么选
  • 企业注销库存怎么做账
  • 企业工程款发票税率是多少2021
  • 同产品不同单价能相加开票吗
  • 合同成本在哪个科目列支
  • 专用发票抬头一定要打完整吗
  • 税控发票抵税还是抵收
  • 非营利组织可以开发票吗
  • 母公司吸收合并全资子公司土地增值税
  • 纳税申报表多缴了怎么办
  • 营改增后企业要交哪些税
  • 经营性固定资产计入什么科目
  • 注册资本没有到账怎么做账
  • 外汇风险管理的贸易融资法
  • 跨区域施工要交什么税
  • 增值税抵扣期限多少天
  • 医疗器械技术服务合同
  • 公司车辆可以一年一检吗
  • 资产减值损失在贷方表示什么意思
  • 暂估收入的凭证怎么做
  • 工资薪金所得税扣除标准
  • 福利费进行税额转出
  • 收到商品预付款怎么做分录
  • 月末计提电费
  • PHP:session_regenerate_id()的用法_Session函数
  • PHP:Memcached::getMulti()的用法_Memcached类
  • 提取企业发展基金分录比例
  • nw.exe是什么进程
  • 收到专利补贴的分录
  • 收到的税费返还减少说明什么
  • php验证源码
  • php执行sh脚本
  • node-
  • web用户管理系统报告
  • 企业年报经营状态
  • 会计怎么计算
  • 公司对其他公司的投资怎么做账
  • 怎么把python代码发给别人运行
  • 物流公司驾驶员工资计算方式
  • sqlserver创建维护计划
  • mysql show privileges
  • 固定资产折旧提完了继续使用
  • 进项3个点销项13个点是需要交10个点的税吗
  • 经营活动的现金流量占全部现金流量的比重越大
  • 项目提前竣工借款合法吗
  • 营改增后所得税怎么计算
  • 预付账款计提减值吗
  • 集团公司向下属发评先奖金合法吗
  • 对方多开发票怎么处理?
  • 研发支出费用化支出期末有余额吗
  • 其他业务收入如何填写增值税申报表
  • 银行涉外收入申报单
  • 税务登记证办理流程
  • mac安装surge
  • 安装nfs命令
  • win7如何给电脑硬盘加密
  • win7系统开机屏幕出现一条蓝色横杠闪烁
  • ie11 ua
  • 搜索功能使用方法
  • office2003破解
  • 组策略禁止打开文件对话框输入路径
  • win7系统玩游戏好吗
  • win8如何删除登录密码
  • linux find -a
  • win10移动版能运行电脑软件吗
  • linux注销用户快捷键
  • linuxmint设置中文
  • opengl 4.2
  • 微信小程序使用webview
  • nodejs命令行参数解析
  • 安卓开发解析xml
  • 批处理安装
  • ajax简单实例
  • shell错误日志输出
  • JavaScript浏览器扩展
  • 抵扣怎么做账
  • 加计扣除为什么是税收优惠
  • 土地整理费用由谁承担
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设