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

  • 朋友圈营销中的七大核心错误 你中枪了吗(朋友圈营销的目的)

    朋友圈营销中的七大核心错误 你中枪了吗(朋友圈营销的目的)

  • 微信来电铃声怎么设置自己喜欢的音乐(微信来电铃声怎么更换)

    微信来电铃声怎么设置自己喜欢的音乐(微信来电铃声怎么更换)

  • 华为手机充电器通用吗(华为手机充电器66W和40W的区别)

    华为手机充电器通用吗(华为手机充电器66W和40W的区别)

  • win7任务管理器快捷键(win7任务管理器没有详细信息)

    win7任务管理器快捷键(win7任务管理器没有详细信息)

  • realme和oppo系统不一样吗(realme系统和oppo系统区别)

    realme和oppo系统不一样吗(realme系统和oppo系统区别)

  • vivo x6s A老是自动关机怎么回事(vivox6总是自动开关机)

    vivo x6s A老是自动关机怎么回事(vivox6总是自动开关机)

  • 华为荣耀20青春版有没有耳机(华为荣耀20青春版图片)

    华为荣耀20青春版有没有耳机(华为荣耀20青春版图片)

  • 苹果11与苹果x区别(苹果11和苹果x的区别)

    苹果11与苹果x区别(苹果11和苹果x的区别)

  • 抖音该应用未获得微信登录的权限(抖音该应用未获得qq权限怎么办)

    抖音该应用未获得微信登录的权限(抖音该应用未获得qq权限怎么办)

  • 微信被永久封对个人有影响吗(微信被永久封对方知道吗)

    微信被永久封对个人有影响吗(微信被永久封对方知道吗)

  • 怎么取消微信视频号功能(怎么取消微信视频美颜功能)

    怎么取消微信视频号功能(怎么取消微信视频美颜功能)

  • 云台电机过载解决办法(云台电机过载解除方法)

    云台电机过载解决办法(云台电机过载解除方法)

  • 相机快门按不下去是怎么回事(相机快门按不下提示Card)

    相机快门按不下去是怎么回事(相机快门按不下提示Card)

  • 电脑局部截屏的快捷键是什么(电脑局部截屏的三种方法图片)

    电脑局部截屏的快捷键是什么(电脑局部截屏的三种方法图片)

  • 红米k30尺寸(红米k30尺寸重量)

    红米k30尺寸(红米k30尺寸重量)

  • 开通商品橱窗需要什么条件(开通商品橱窗需要多久)

    开通商品橱窗需要什么条件(开通商品橱窗需要多久)

  • 表格打印预览在哪里(表格打印预览在一张纸上为何打印出来)

    表格打印预览在哪里(表格打印预览在一张纸上为何打印出来)

  • autosleep无法同步数据

    autosleep无法同步数据

  • 手机视频怎么去掉字幕(手机视频怎么去除人声音)

    手机视频怎么去掉字幕(手机视频怎么去除人声音)

  • 蓝牙打印机连接不上(蓝牙打印机连接不上电脑)

    蓝牙打印机连接不上(蓝牙打印机连接不上电脑)

  • 字符型常量的表示方法(字符型常量表示)

    字符型常量的表示方法(字符型常量表示)

  • vivo手机内存卡怎么装(vivo手机内存卡怎么使用)

    vivo手机内存卡怎么装(vivo手机内存卡怎么使用)

  • 投影仪模糊怎么调整(投影仪模糊怎么搞)

    投影仪模糊怎么调整(投影仪模糊怎么搞)

  • vivox9s怎么格式化(vivox9手机怎么格式化)

    vivox9s怎么格式化(vivox9手机怎么格式化)

  • 系统触感反馈是干嘛的(系统触感反馈的作用)

    系统触感反馈是干嘛的(系统触感反馈的作用)

  • pr制作抖音视频尺寸(pr制作抖音视频教程)

    pr制作抖音视频尺寸(pr制作抖音视频教程)

  • 苹果微信能分身吗(苹果微信能分身份吗)

    苹果微信能分身吗(苹果微信能分身份吗)

  • 为什么浏览器下载的东西安装不了(为什么浏览器下载的文件打不开)

    为什么浏览器下载的东西安装不了(为什么浏览器下载的文件打不开)

  • 电脑怎么制表格(电脑怎么制表格过程)

    电脑怎么制表格(电脑怎么制表格过程)

  • 天猫精灵一直联网失败(天猫精灵每次又要重新连接)

    天猫精灵一直联网失败(天猫精灵每次又要重新连接)

  • 【更新】vue使用 wangeditor4 富文本 + 富文本回显带标签+wangEditor4 加字数,光标会跑到最后 问题 (已解决)(vue使用技巧)

    【更新】vue使用 wangeditor4 富文本 + 富文本回显带标签+wangEditor4 加字数,光标会跑到最后 问题 (已解决)(vue使用技巧)

  • 二手车过户需要带什么资料
  • 房地产企业样板间装修费计入什么科目
  • 培训发生的差旅费怎么记账
  • 收到代发工资的信息
  • 预付的房租计入什么费用
  • 小规模纳税检查怎么做
  • 已过期增值税专票怎么开
  • 上市公司股票增持是什么回事
  • 工会经费如何做会计分录科目
  • 网上平台服务年费应该计入什么费用?
  • 材料含税价怎么算
  • 开出转账支票用什么凭证
  • 开办费一次性摊销企业所得税
  • 查账征收企业所得税年度申报
  • 差额纳税计算方法
  • 个税更正申报需要逐月更正吗
  • 自营方式建造固定资产成本包括增值税吗
  • 收到多开的发票会计上怎么入成本?
  • 房地产企业建设的幼儿园如何缴纳城镇土地使用税
  • 企业银行承兑汇票
  • 一般纳税人不能转为小规模纳税人吗
  • 外资股东是什么意思
  • 财产清查的账务处理原则
  • 在windows7是一种
  • win10下载软件被阻止安装怎么办
  • 上一年度的费用能入今年账吗
  • 怎么绕开中介找到房主
  • 格里姆火山
  • 土地增值税扣除系数
  • Laravel中七个非常有用但很少人知道的Carbon方法
  • 在海洋里游泳
  • 黄石国家公园的建立意义
  • 作废的专票能认证过去吗
  • php实现留言板功能
  • 公司购买办公用品会计分录
  • 中华人民共和国禁毒法第十三条规定
  • 应付职工薪酬账户期末余额可能是
  • 公司注销退还股票流程
  • 财务费用包括什么利息
  • 安装织梦数据库连接不上
  • 事业单位购入固定资产当月计提折旧
  • 当期进项加计额怎么填
  • 税控盘 金税盘
  • 公司帮员工全额买社保该怎么入账?
  • 待摊费用属于企业的债权
  • 家庭保洁服务包括什么
  • 预收货款开票怎么做账
  • 普通发票和增值税发票的税率
  • 新会计准则有哪三个
  • 超市的小票能入账吗
  • 销售公司扣款制度合法吗
  • 食堂辅助账的账务处理
  • 应交税金及附加怎么计算
  • 税款返点如何做账务处理
  • 会计科目漏记怎么补记
  • 没有进货发票可以开票吗?
  • 贷记坏账准备借记什么
  • 劳务报酬与经营所得
  • 预收账款的金额是什么
  • 可供出售金融资产公允价值变动
  • 税金及附加如何记账
  • 会计核算和监督两项基本会计职能是相辅相成
  • 专栏设计模板
  • linux配置ftp服务
  • babylon.exe进程有什么作用 babylon进程是什么文件
  • 彻底禁止win11自动更新
  • centos7添加桌面图标
  • windows7的注册表在哪里
  • win8的计算机在哪里
  • 红石cpu教程
  • linux cz命令
  • linux的syslog配置
  • javascript的
  • python爬虫代码怎么写
  • input限制数字大小
  • &lt;script defer&gt; defer 是什么意思
  • javascript编程软件
  • 北京地方税务局电话
  • 大班直播课怎么上
  • 商住两用房出售要交契税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设