位置: IT常识 - 正文

CKEditor5+vue3使用以及如何添加新工具栏,自定义设置字体fontFamily(vue2editor)

编辑:rootadmin
CKEditor5+vue3使用以及如何添加新工具栏,自定义设置字体fontFamily 基本使用

推荐整理分享CKEditor5+vue3使用以及如何添加新工具栏,自定义设置字体fontFamily(vue2editor),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue ckeditor5,vue editorconfig,vue editormd,vue ckplayer,vue ckplayer,vue ckeditor5,vue editormd,vue ckeditor,内容如对您有帮助,希望把文章链接给更多的朋友!

官网地址:https://ckeditor.com/ckeditor-5/online-builder/ 官网提供了以下几种模式,一般使用经典模式居多,具体差别可访问官网自己试一下。

基本的使用方法(经典模式),先别急着操作,看完再决定使用哪种方法。

//下载ckeditor5-vuenpm install @ckeditor/ckeditor5-vue//下载经典模式npm install @ckeditor/ckeditor5-build-classic代码<template> <div id="ckeditor"> <ckeditor ref="editorRef" v-model="editorDesign" :editor="editor" :config="editorConfig" :disabled="disabled" @ready="onEditorReady" @focus="onEditorFocus" @blur="onEditorBlur" @input="onEditorInput" @destroy="onEditorDestroy" ></ckeditor> </div></template><script setup>import { ref, reactive } from 'vue'import ClassicEditor from '@ckeditor/ckeditor5-build-classic'import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn.js' //引入中文包const props = defineProps({ disabled: { type: Boolean, default: false, //是否禁用 },})const editor = ClassicEditorconst editorDesign = ref('') //默认内容const editorConfig = reactive({ language: 'zh-cn', toolbar: { items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo'], }, language: 'zh', image: { toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'], }, table: { contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], }, ckfinder: { uploadUrl: `/uploadfile`, // 上传图片接口 options: { resourceType: 'Images', }, },})const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy'])const editorRef = ref(null)const onEditorReady = () => { console.log('准备好了') emit('ready')}const onEditorFocus = () => { console.log('聚焦') emit('focus')}const onEditorBlur = () => { console.log('失去焦点') emit('blur')}const onEditorInput = () => { console.log('正在录入') emit('input')}const onEditorDestroy = () => { console.log('销毁') emit('destroy')}</script><style lang="scss">#ckeditor { .ck-editor__editable { min-height: 100px; max-height: 500px; }}</style>效果如图

以上基本的工具栏配置比较少,如果基本的满足你的需要,可直接使用如上的方法。

我想要添加更多的工具栏。 以下是我的踩坑经历,我想要一个字体的工具栏,直接下载了字体的依赖

npm i @ckeditor/ckeditor5-font引入import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor.js';import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily.js';import FontSize from '@ckeditor/ckeditor5-font/src/fontsize.js';

然后直接报错Uncaught CKEditorError:ckeditor-duplicated-modules Read more … 文档说明 大概意思就是重复安装了一些模块,因此以上方法行不通。

更多新工具栏使用方法CKEditor5+vue3使用以及如何添加新工具栏,自定义设置字体fontFamily(vue2editor)

如果想要多工具栏的,直接按照如下方法操作。第一种基本使用方法可不操作。

先说一下操作思路,在@ckeditor/ckeditor5-build-classic代码的基础上,添加新工具栏,然后上传打包后的包到私服或者放到项目目录里。

官网去设置工具栏 官网地址:https://ckeditor.com/ckeditor-5/online-builder/ 1、这里我使用的是第一个经典模式classic

2、这一步操作,可以直接在下面的工具栏中add想要的工具栏。带☆的是收费的。在默认的基础上我又添加了几种。

3、把上面的工具栏添加到下面的可以看效果

4、选择第二个Chinese语言包

5、start生成包并下载 6、下载下来之后,在package.json里面可以看到这些依赖就是刚才我们选择的。build文件就是咱们项目中用到的包。 目前已经有的工具栏就是刚才选择的。如果需要增加新的工具栏,在当前目录执行如添加字体 npm i @ckeditor/ckeditor5-font -D,然后在src/ckeditor.js文件引入,添加到builtinPlugins,defaultConfig

最后执行npm run build打包,重新生成的build文件夹,就是最新的包,把这个包直接放在项目目录里,或者上传到私服都可以。

我这里是上传到了私服,package.json如下配置,package.json的name自己重新命名一下。private改为false。 publishConfig为上传的私服地址

使用npm install @ckeditor/ckeditor5-vue//下载私服上的包npm install @custom/ckeditor5-custom-build

实际项目中的用法和前面的基本方法一样,只需要更新一下toolbar里面的配置和引入的路径名称。 代码:

<template> <div id="ckeditor"> <ckeditor ref="editorRef" v-model="editorDesign" :editor="editor" :config="editorConfig" :disabled="disabled" @ready="onEditorReady" @focus="onEditorFocus" @blur="onEditorBlur" @input="onEditorInput" @destroy="onEditorDestroy" ></ckeditor> </div></template><script setup>import { ref, reactive } from 'vue'import ClassicEditor from '@custom/ckeditor5-build-classic'import '@customr/ckeditor5-build-classic/build/translations/zh-cn.js' //引入中文包const props = defineProps({ disabled: { type: Boolean, default: false, //是否禁用 },})const editor = ClassicEditorconst editorDesign = ref('') //默认内容const editorConfig = reactive({ language: 'zh-cn', toolbar: { items: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|', 'outdent', 'indent', '|', 'imageUpload', 'blockQuote', 'insertTable', 'mediaEmbed', 'undo', 'redo','|','fontColor','fontFamily','fontSize','fontBackgroundColor',], }, //自定义设置字体 fontFamily: { options: [ 'default', '宋体', '新宋体', '仿宋', '楷体', '微软雅黑', '黑体', '华文仿宋', '华文楷体', '华文隶书', '华文宋体', '华文细黑', '华文新魏', '华文行楷', '华文中宋', '隶书', '苹方 常规', '幼圆', ], }, language: 'zh', image: { toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side'], }, table: { contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells'], }, ckfinder: { uploadUrl: `/uploadfile`, // 上传图片接口 options: { resourceType: 'Images', }, },})const emit = defineEmits(['ready', 'focus', 'blur', 'input', 'destroy'])const editorRef = ref(null)const onEditorReady = () => { console.log('准备好了') emit('ready')}const onEditorFocus = () => { console.log('聚焦') emit('focus')}const onEditorBlur = () => { console.log('失去焦点') emit('blur')}const onEditorInput = () => { console.log('正在录入') emit('input')}const onEditorDestroy = () => { console.log('销毁') emit('destroy')}</script><style lang="scss">#ckeditor { .ck-editor__editable { min-height: 100px; max-height: 500px; } //设置默认字体 .ck-editor__editable_inline p { font-family: '宋体' !important; }}</style>

CKEditor5设置默认字体,用的是css写法,这里尝试了config.font_defaultLabel = fontFamily这类写法,都没有用。最后用css实现的。

//设置默认字体 .ck-editor__editable_inline p { font-family: '宋体' !important; }
本文链接地址:https://www.jiuchutong.com/zhishi/278094.html 转载请保留说明!

上一篇:总结Linux中用于文本处理的awk、sed、grep命令用法(linux使用范围)

下一篇:琼斯海滩岛上的笛鸻和它的幼崽 (© Vicki Jauron/Getty Images)(琼斯的大海怪)

  • 怎么解除手机耳机状态(怎么解除手机耳机模式)(怎么解除手机耳机模式苹果6splus)

    怎么解除手机耳机状态(怎么解除手机耳机模式)(怎么解除手机耳机模式苹果6splus)

  • 微信系统维护要多久20218月份(微信系统维护要多久)(微信系统维护要多久6月)

    微信系统维护要多久20218月份(微信系统维护要多久)(微信系统维护要多久6月)

  • 怎么注册全民消防安全平台(怎么注册全民消防平台支付宝)

    怎么注册全民消防安全平台(怎么注册全民消防平台支付宝)

  • 超过5分钟的视频怎么在微信上发(超过5分钟的视频怎么发到朋友圈)

    超过5分钟的视频怎么在微信上发(超过5分钟的视频怎么发到朋友圈)

  • 怎么查看淘宝消费总额(怎么查看淘宝消费账单)

    怎么查看淘宝消费总额(怎么查看淘宝消费账单)

  • nova7和荣耀30对比(nova7手机和荣耀30)

    nova7和荣耀30对比(nova7手机和荣耀30)

  • 苹果电脑怎么强制关机(苹果电脑怎么强制关掉程序)

    苹果电脑怎么强制关机(苹果电脑怎么强制关掉程序)

  • 电脑出厂设置对于电脑有伤害吗(电脑出厂设置后果)

    电脑出厂设置对于电脑有伤害吗(电脑出厂设置后果)

  • oppo手机速览怎么关闭(oppo手机速览怎么恢复)

    oppo手机速览怎么关闭(oppo手机速览怎么恢复)

  • 超威电池售后三包规定(超威电池售后三轮车电话)

    超威电池售后三包规定(超威电池售后三轮车电话)

  • 电脑版钉钉如何扫二维码(电脑版钉钉如何扫二维码进群)

    电脑版钉钉如何扫二维码(电脑版钉钉如何扫二维码进群)

  • 钉钉听筒模式怎么转换扬声器(钉钉怎么设置听筒听语音)

    钉钉听筒模式怎么转换扬声器(钉钉怎么设置听筒听语音)

  • 微软edge什么意思(microsoft edge叫啥)

    微软edge什么意思(microsoft edge叫啥)

  • 拍照广角是什么意思(广角拍照有什么好处)

    拍照广角是什么意思(广角拍照有什么好处)

  • 网已连接不可上网原因(网连接不可上网怎么办)

    网已连接不可上网原因(网连接不可上网怎么办)

  • 华为客户服务中心可以修手机吗(华为客户服务中心修荣耀手机吗)

    华为客户服务中心可以修手机吗(华为客户服务中心修荣耀手机吗)

  • 快手和抖音是一家吗(快手和抖音是一个股东)

    快手和抖音是一家吗(快手和抖音是一个股东)

  • 携程候补购票通道什么意思(携程候补购票通道怎么关闭)

    携程候补购票通道什么意思(携程候补购票通道怎么关闭)

  • 智能路由器和普通路由器的区别(智能路由器和无线路由器的区别)

    智能路由器和普通路由器的区别(智能路由器和无线路由器的区别)

  • load tray1是什么意思(load tray1 a4 210×297)

    load tray1是什么意思(load tray1 a4 210×297)

  • 怎样关闭电脑杀毒软件(怎样关闭电脑杀毒软件和防火墙win11)

    怎样关闭电脑杀毒软件(怎样关闭电脑杀毒软件和防火墙win11)

  • 门户网站是新媒体吗(门户网站是新媒体网站吗)

    门户网站是新媒体吗(门户网站是新媒体网站吗)

  • iPhone耳机怎么播放音乐(苹果无线耳机怎么播放)

    iPhone耳机怎么播放音乐(苹果无线耳机怎么播放)

  • 拼多多挖矿在哪里找(拼多多挖矿游戏怎么玩)

    拼多多挖矿在哪里找(拼多多挖矿游戏怎么玩)

  • vivoz3有没有指纹识别(vivoz3指纹在哪)

    vivoz3有没有指纹识别(vivoz3指纹在哪)

  • 苹果耳机序列号在哪里(苹果耳机序列号查询)

    苹果耳机序列号在哪里(苹果耳机序列号查询)

  • oppor11手机怎么录屏幕视频(oppor11手机怎么恢复出厂设置)

    oppor11手机怎么录屏幕视频(oppor11手机怎么恢复出厂设置)

  • 没有设备管理怎么信任软件(设备管理器没有其它设备怎么办)

    没有设备管理怎么信任软件(设备管理器没有其它设备怎么办)

  • 实收资本的账务处理是怎样的
  • 药品费用开具增值税发票项目应为什么
  • 增值税包括哪些内容
  • 往来款项包括什么
  • 利润表研发费用包括哪些内容
  • 增值税进项加计扣除计入哪个科目
  • 公司先注册实收资本后付账该如何做会计处理呢?
  • 印刷配件有哪些
  • 关于公司食堂的文案
  • 建筑企业升资质主管单位
  • 应交所得税的计算例题
  • 合同额在3000以下的是否缴纳印花税?
  • 填开了红字信息表但未开红字发票
  • 危险废物处理费用发票怎么开
  • 采购合同安装服务费审价规定
  • 研发人员工资加计
  • 股份支付的成本费用怎样才能在税前扣除?
  • 税控盘没有反写会怎样
  • 航天信息服务费280元会计处理
  • 购买的承兑怎么下账
  • 返利红字发票怎么开具
  • 查账征收的个体户注销流程
  • 计提个人社保会计分录实操
  • 怎么用苹果电脑查找苹果手机
  • 网页不播放声音怎么设置
  • 车辆购置税会计科目怎么做账
  • 怎么做win8系统u盘pe
  • 税费缴纳比例
  • 购入研发设备
  • 小微企业减免额怎么计算
  • php判断文件上传类型
  • 质量事故责任书
  • 汇兑差额如何计算
  • 前端向后端传递对象数组
  • cesium description
  • 非货币性资产投资的会计处理
  • 个人独资企业怎么注销
  • 营业执照上的注册资金可以改吗
  • 企业购房怎么贷款
  • 上年所得税费用借方有余额,怎么调整
  • 农机销售免税政策
  • MongoDB aggregate 运用篇个人总结
  • 员工探亲路费报销入哪个科目
  • SqlServer 2005 T-SQL Query 学习笔记(2)
  • 应交税费为什么写在借方
  • 固定资产清理如何做账
  • 小规模纳税人企业所得税税收优惠政策
  • 财务人员如何爱岗敬业
  • 误餐补助需要提供发票吗
  • 贸易公司成本如何计算
  • 农产品开具发票税率是多少?
  • 增值税申报表里期初未缴税额是什么意思
  • 在建工程进项税额抵扣最新通知
  • 个人工资怎么合理避税有什么方法
  • 支付给个人的佣金没有发票
  • 有没有确认
  • 管理费用通俗理解
  • 往来的款项性质有哪些
  • 银行日记账年底是0第二年年初怎么写
  • 固定资产如何管理可以做到节能减排
  • 修改企业账套的步骤
  • mysql存储过程中调用存储过程
  • mysql数据库去重
  • 最新版的win10
  • 强行卸载系统应用
  • ubuntu的安装包
  • 如何使用easyscan
  • ubuntu flash player
  • win8怎么打开cmd命令窗口?
  • 如何在windows制作表格
  • win10如何禁用windows defender
  • win7计算机窗口菜单栏
  • 轻松搞定琥珀甲教程
  • win 7怎么设置开机启动
  • windows8任务管理器在哪
  • linuxmint设置中文
  • dos脚本 菜鸟教程
  • jquery中的children
  • 民间非营利组织包括哪些单位
  • 乾升黄酒好吗值得买吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设