位置: 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)(琼斯的大海怪)

  • 新开网吧需要缴纳哪些税金
  • 出口发票开错了如何处理
  • 企业为员工承担的个税可以税前扣除吗
  • 资产管理公司的使命
  • 经营范围没有的可以开票吗
  • 行政事业单位国有资产处置管理办法
  • 利率与股价的计算方法
  • 未认证的进项也就是库存
  • 电子缴税付款凭证
  • 公司搞活动的话术
  • 然后销售产品
  • 企业年金税前扣除标准表
  • 无法执行合同的说明函
  • 以前年度的税务怎么查
  • 原始股 出售
  • 占用土地行为不征收耕地占用税有哪些?
  • 发票月初抄税流程
  • 一个企业为另一个企业作证有法力
  • 合同返点提成犯法吗
  • 收到转账支票怎么填写凭证
  • 设备租赁收入属于什么收入
  • 销售收入大于纳税申报销售收入
  • xp系统怎么取消用户登录
  • 公司向法人借款有税务风险吗
  • 如何做批发
  • php保留两位小数的函数
  • 营业收入包括应收账款吗
  • 处置二手固定资产
  • php中imagestring
  • 前端后端选择
  • 结转损益类收入科目分录
  • 简述gnss数据处理流程
  • php 模拟post
  • 代开开增值税专票和自己开有什么区别
  • 2018年残保金申报表填表说明
  • 财务处理的时候要做什么
  • 企业付检测费的会计科目
  • 自产赠送视同销售的成本怎么确定
  • 外聘人员怎么申报个税
  • 跨域问题是什么
  • dubbo 实现原理
  • 定额计税的有哪些
  • 离职员工个税申诉企业怎么处理
  • mysql如何调优
  • 小规模纳税属于什么科目
  • 员工备用金会计分录
  • 专用发票不抵扣联可以当普票用吗?
  • 坏账准备贷方余额期末如何处理
  • 年末资产减值损失可以税前扣除吗
  • 内地汇丰银行账户管理费
  • 折扣的种类有哪几种
  • 公司的房租发票怎么记账
  • 工程造价咨询公司招聘
  • sql语句编译执行过程
  • sql server 导出
  • macmysql忘记密码如何配置
  • 容器内存限制
  • wpr是什么软件
  • WIN7系统如何设置自动关机
  • cmd是什么意思 视频
  • win10系统如何更改盘符
  • win7系统电脑无声音
  • 景深图片的3d显示器
  • node.js项目结构
  • 安卓游戏引擎
  • bat 批处理文件
  • 巨幕prime
  • 转换目录的命令
  • 衬线字体和无衬线字体各自的用途
  • 实现 java
  • python内置函数format
  • js选中div
  • javascript面向对象编程指南 pdf
  • 出口退税是哪个环节交的
  • 烟台税务局举报电话号码
  • 中行网银查询
  • 进货没有发票怎么报税
  • 车没交车船税上路什么后果
  • 广西区国家税务局
  • 建筑工程招标代理服务费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设