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

  • 加工企业税收优惠政策
  • 出租房怎么算平方多少
  • 企业给员工购买社保的规定
  • 税友财务软件一年多少钱
  • 发票冲红重开,重开时是按新税率还是旧税率
  • 单位借款是否纳税
  • 季度不满30万免增值税如何结转
  • 非破产清算会计案例
  • 股权计税成本如何计算?
  • 商业企业月末结转成本
  • 商贸企业收到的检测费可以抵扣进项税吗
  • 欠款还了一部分怎么写起诉书
  • 预缴增值税销售额
  • 公司购买的五金工具报销怎么做
  • 冲以前年度暂估
  • 办公用品报销项目怎么写
  • 出口退税可以用电子专用发票吗
  • 预收账款与预付账款均属于负债
  • 开票资料地址填营业执照
  • 土地使用权摊销年限最新规定
  • 税收返还的账务处理
  • 旅客购买电子客票
  • 王者荣耀中孙尚香怎么玩
  • php面向对象优点,缺点
  • aspnet_admin.exe进程是安全的吗 aspnet_admin进程信息查询
  • 零售业如何盈利
  • linux架构师是做什么的
  • php中include_once
  • wordpress添加css
  • 青龙面板库怎么用
  • php正则替换函数怎么写
  • 小型微利企业所得税优惠政策2023
  • 虚拟机安装win11提示无法运行
  • react错误处理
  • php支付接口对接教程
  • php中文字符串截取
  • useradd 删除用户
  • 带折扣的发票如何入账
  • 外管证预缴税款怎么做分录
  • 印花税应计入哪些费用
  • 个人独资企业用企业资金进行个人消费
  • 进项税额的作用
  • 清卡后还可以勾选发票吗
  • 一步一步的简单
  • 营业收入净额是销售收入净额吗
  • 民宿的房屋租赁费怎么算
  • 应纳税的物品有哪些
  • 出纳需要填写会计凭证吗
  • 职工福利费计提标准是多少
  • 增值税明细账怎么结账
  • 银行账跨年一直没做怎么补
  • 期间费用明细表必须填吗
  • 差旅费退回怎么写
  • 预付账款的会计处理
  • 开发软件应采用
  • 其他应付款的核算范围包括应付短期租赁
  • winxp任务管理器在哪
  • 怎么把iphone作为u盘
  • win7检测有错误怎么办
  • linux 常用 命令
  • window8.1
  • linux在服务器的份额
  • linux 消耗内存命令
  • win7系统回收站文件夹的位置
  • ExtJS扩展 垂直tabLayout实现代码
  • 所有的未知
  • cocos creator构建发布
  • node:js
  • [置顶]游戏名:chivalry2
  • js数组拼接字符串
  • js获取当前日期并格式化
  • 以下关于js函数说法错误的是
  • vue curd生成
  • JavaScript中的对象一般分为
  • javascript判断
  • python 字符串
  • js鼠标滚动控制图片缩放
  • jQuery模拟select实现下拉菜单功能
  • 税控盘异常什么原因
  • 广东国税app安卓版网上预约
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设