位置: 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应用程序的主要组成部分)

  • 希沃白板文字遮罩功能在哪(希沃白板遮挡)

    希沃白板文字遮罩功能在哪(希沃白板遮挡)

  • 化生寺怎么加点(化生寺怎么加点奶量大)

    化生寺怎么加点(化生寺怎么加点奶量大)

  • xr扬声器左边没声音(xr扬声器有一个不响)

    xr扬声器左边没声音(xr扬声器有一个不响)

  • 快手怎么搜索需要的内容(快手怎么搜索需要的人)

    快手怎么搜索需要的内容(快手怎么搜索需要的人)

  • 华为mate30pro下面三个键怎么设置(华为mate30pro下面屏幕不亮了)

    华为mate30pro下面三个键怎么设置(华为mate30pro下面屏幕不亮了)

  • 拼多多确认收货是什么意思(拼多多确认收货期限是几天)

    拼多多确认收货是什么意思(拼多多确认收货期限是几天)

  • 腾讯会议断开音频会被发现吗(腾讯会议断开音频会开麦吗)

    腾讯会议断开音频会被发现吗(腾讯会议断开音频会开麦吗)

  • 笔记本相机打开有个斜杠(笔记本相机打开黑屏无法拍摄)

    笔记本相机打开有个斜杠(笔记本相机打开黑屏无法拍摄)

  • 629错误代码连不上网(错误代码629是怎么回事)

    629错误代码连不上网(错误代码629是怎么回事)

  • 跟siri说打开旁白会怎样(siri打开旁边关闭网络后果)

    跟siri说打开旁白会怎样(siri打开旁边关闭网络后果)

  • 手机wps怎么空两格(手机wps怎么空两个字符)

    手机wps怎么空两格(手机wps怎么空两个字符)

  • 全民k歌怎么录视频唱歌(全民k歌怎么录屏唱歌)

    全民k歌怎么录视频唱歌(全民k歌怎么录屏唱歌)

  • 分屏为什么不能同时播放(分屏为什么不能聊天和看视频)

    分屏为什么不能同时播放(分屏为什么不能聊天和看视频)

  • 腾讯应用宝是干什么的(腾讯应用宝怎么样,安全吗)

    腾讯应用宝是干什么的(腾讯应用宝怎么样,安全吗)

  • 闲鱼被对方拉黑是什么样的(闲鱼被对方拉黑了,我还能给他发信息,为什么?)

    闲鱼被对方拉黑是什么样的(闲鱼被对方拉黑了,我还能给他发信息,为什么?)

  • 荣耀9lite是青春版吗(荣耀9lite青春版手机壳用什么尺寸)

    荣耀9lite是青春版吗(荣耀9lite青春版手机壳用什么尺寸)

  • 什么是域名系统(域名系统的定义)

    什么是域名系统(域名系统的定义)

  • iphone主题商店在哪里(苹果手机主题商店)

    iphone主题商店在哪里(苹果手机主题商店)

  • 安卓怎样才有隔空投送(安卓隔空投放怎么操作的呀)

    安卓怎样才有隔空投送(安卓隔空投放怎么操作的呀)

  • 小米会员支持几台电视(小米会员通用吗)

    小米会员支持几台电视(小米会员通用吗)

  • iphonexr无线充电多少瓦(iPhonexr无线充电多少w)

    iphonexr无线充电多少瓦(iPhonexr无线充电多少w)

  • iphone短信特效安卓手机能收到么(iphone的短信特效要钱么)

    iphone短信特效安卓手机能收到么(iphone的短信特效要钱么)

  • 小屏智能手机(小屏智能手机有哪些)

    小屏智能手机(小屏智能手机有哪些)

  • 华为手机的手机管家有用么(华为手机的手机助手叫什么)

    华为手机的手机管家有用么(华为手机的手机助手叫什么)

  • p30pro电池容量(p30pro电池容量在哪里)

    p30pro电池容量(p30pro电池容量在哪里)

  • win1020H2打开第三方软件模糊的解决方法(win10打开第二个桌面快捷键)

    win1020H2打开第三方软件模糊的解决方法(win10打开第二个桌面快捷键)

  • 非上市公司股权转让涉及哪些税
  • 一般纳税人附加税优惠政策2023
  • 所得税申报是什么
  • 补缴去年的附加税
  • 税务局买税盘
  • 本期已认证但不想抵扣申报表怎么填写
  • 成本跨年如何处理
  • 股东借款转实收资本需要什么附件
  • 股权拍卖溢价部分如何做会计处理?
  • 超额亏损在合并后怎么算
  • 单位购买食品饮料的进项税可以抵扣吗?
  • 持有营业执照
  • 小企业收到下列票据后,银行存款账户不变的是
  • 车辆一次性入费用会计分录
  • 商贸有限公司要报地税吗
  • 外籍人员劳务费税率表
  • 代扣代缴企业所得税账务处理
  • 减免税款余额方法有哪些
  • 危险废物处理费用发票怎么开
  • 出口退税收汇凭证号
  • "税务 政策"
  • 银行账户基本户是什么意思
  • 公司内部银行往来款会计分录
  • 销售的增长率公式是什么
  • 收入未实现成本怎么进
  • 注册资本认缴制开始实施时间
  • 来料加工原材料计入什么科目
  • 物流企业之间的竞争
  • 苹果14出来13会下架吗
  • pps是啥文件
  • 茶叶的种类有哪些,八大茶类你都知道吗?
  • 在承租土地上建房是否应核算为固定资产会计视野
  • 微信小程序插件有哪些
  • vue的watch不生效
  • 小企业会计准则
  • 无形资产相关税费
  • php匿名函数为何不匿名
  • 确认收入需要哪些资料
  • 注意力机制 q k v
  • 报销单跨月怎么记账
  • 帝国cms移动端设置教程
  • 结转财务费用时怎么做账
  • php二次开发哪个cms
  • 递延收益核算哪些内容
  • 先弥补亏损还是先分配利润
  • 现金结算的特点和概念
  • 个人所得税租房专项扣除标准
  • 个人转让著作权免征增值税判断题
  • 非货币性资产含义
  • 挂靠在运输公司的车辆为什么要记入"固定资产"科目?
  • 开票软件服务费全额抵扣怎么做账
  • 长期待摊的分录
  • 月末结转的各类凭证无需注意先后顺序
  • 成品油购进数据选择没有发票
  • 公司借钱不还怎么办
  • 职工宿舍怎么入账
  • 进项发票认证多了留抵多久
  • 6月收到4月的单子怎么办
  • 申报表应纳税额和财务账金额不一致可以不改申报表吗
  • 财务费用包括哪几项
  • mac系统操作的小技巧
  • windows域环境搭建
  • w7系统删除所有东西
  • 通过修改注册表修改edge主页
  • 怎么给网络设置防火墙
  • mac电脑打开safari
  • centos7 zsh
  • win1021年更新
  • cocos2dx游戏开发进阶卷这本书怎么样
  • js 读取 excel
  • node.js权限管理
  • Cocos2dx CCLabelAtlas字体与CCLabelTTF字体的使用方法
  • unity摄像机在哪里
  • svn如何cleanup
  • Node.js中Bootstrap-table的两种分页的实现方法
  • python ping检测
  • javascript怎么学
  • 广东省国家税务总局官网
  • 税控系统技术维护费每年都要交吗
  • 国家税务总局广西壮族自治区税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设