Vue3中快速简单使用CKEditor 5富文本编辑器

Vue3简单使用CKEditor 5

  • 前言
  • 准备
    • 定制基础配置
      • 富文本配置目录
      • 当前文章demo目录结构
  • 快速使用
  • demo

1

前言

CKEditor 5就是内嵌在网页中的一个富文本编辑器工具
CKEditor 5开发文档(英文):https://ckeditor.com/docs/ckeditor5/latest/index.html

接下来带你快速熟悉CKEditor 5在Vue3中简单使用,看最终效果图👇res

准备

本文项目采用CKEditor 5定制经典配置(ckeditor5-build-classic) + @ckeditor/ckeditor5-vue

定制基础配置

  1. 官网定制,选择经典风格配置
    11
  2. 选择富文本支持的功能插件,默认是这些,可进行增加删除,增加点击Add,删除Remove即可
    123
  3. 可以拖动上面自己没有的工具项目到下面自己的,也可以拖动下面工具来调整属性可以删除自己有的
    6
  4. 选择默认编辑器语言,在此选择中文
    66
  5. 然后点击start开始构建配置好的富文本,并下载CKEditor 5 build
    666
  6. 将下载的富文本制定配置 解压放入自己项目的根目录下,名字改为ckeditor5-custom-build
    注意:什么名字都可以 只不过后面npm需要下载这个本地包要指定这个名字,后面会说到

富文本配置目录

33

当前文章demo目录结构

1111111

快速使用

  1. 在自己项目下package.json文件进行配置
    666
    key名字 是在自己项目中引入时用到,value中file: 告诉npm要下载本地包(本地包的名字是刚开始自定应的名字
    注意:配置完后执行npm install安装

  2. 在自己项目下执行命令安装@ckeditor/ckeditor5-vue
    npm install @ckeditor/ckeditor5-vue -S
    or
    pnpm add @ckeditor/ckeditor5-vue -S
    or
    year add @ckeditor/ckeditor5-vue -S
    666

  3. 做好以上准备后 在你需要用到富文本的组件中添加以下相关代码即可

    <script setup>
    import { reactive } from "vue";
    import CKEditor from "@ckeditor/ckeditor5-vue";
    import ClassicEditor from "ckeditor5-build-classic";const state = reactive({editor: ClassicEditor,editorData: "<p>Content of the editor.</p>",editorConfig: {// The configuration of the editor.},
    });</script><template><main><CKEditor.component:editor="state.editor"v-model="state.editorData":config="state.editorConfig"></CKEditor.component></main>
    </template><style scoped lang="scss">
    main {width: 800px;height: 600px;margin: 50px auto;
    }
    </style>
    <style lang="scss">
    .ck.ck-content {height: 400px;
    }
    </style>
    
  4. 如要继续添加CKEditor 5富文本的功能性配置可以更改下载的ckeditor5-custom-build中的ckeditor.js
    777

    • 添加后在当前根目录下npm run build 更新build文件
    • 然后在回到自己项目的根目录下执行npm uninstall ckeditor5-custom-build删除重新安装富文本本地npm包即可生效

demo

https://github.com/gitboyzcf/ckeditor-vue3-demo





到这里就结束了,后续还会更新 前端 系列相关,还请持续关注!
感谢阅读,若有错误可以在下方评论区留言哦!!!

111


推荐文章👇
vue3 + ts以及ckEditor5 富文本编辑器 工具栏 以及正文内容的编辑问题小结!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/72958.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DBMS_RESOURCE_MANAGER

参考文档&#xff1a; Database Administrator’s Guide 27 Managing Resources with Oracle Database Resource Manager 27.5.5 Creating a Resource Plan BEGINDBMS_RESOURCE_MANAGER.CREATE_PENDING_AREA();DBMS_RESOURCE_MANAGER.CREATE_PLAN(PLAN > bugdb_plan,…

SpringMVC:从入门到精通,7篇系列篇带你全面掌握--三.使用SpringMVC完成增删改查

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于SpringMVC的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 效果演示 一.导入项目的相关依赖 二.…

港联证券:大数据看北上资金胜率:整体跑赢市场,六成持股浮亏

一直以来&#xff0c;北上资金被称为“聪明资金”&#xff0c;其一举一动备受出资者重视。盛名之下&#xff0c;其战绩究竟如何&#xff1f;复盘前史数据发现&#xff0c;北上资金全体业绩跑赢沪深300指数&#xff0c;但现在持仓个股浮亏占比约六成。 8月&#xff0c;北上资金…

npm publish包报404,is not in the npm registry错误

1. 指定发布目标2. 登录npm&#xff0c;使用登录名发布包&#xff0c;包名命名原则“登录名/包名”&#xff0c;或 “包名” 3. 删除某一个版本npm unpublish pvfhv/eslint-config-prettier1.0.1 --force 删除后的版本不能重复使用&#xff0c;正式解释&#xff1a; Unfortun…

containerd的安装和使用

containerd的安装和使用 1、containerd介绍 containerd 是从 docker 项目中剥离出来的一个容器运行时、几乎囊括了容器管理的所有功能&#xff0c;并且 containerd 内置了 CRI 插件&#xff0c;k8s 的 kubelet 组件可以直接调用 containerd&#xff0c;相较于 docker 容器运…

无涯教程-JavaScript - IMLOG2函数

描述 IMLOG2函数以x yi或x yj文本格式返回复数的以2为底的对数。可以从自然对数计算复数的以2为底的对数,如下所示- $$\log_2(x yi)(log_2e)\ln(x yi)$$ 语法 IMLOG2 (inumber)争论 Argument描述Required/OptionalInumberA complex number for which you want the bas…

【web开发】4.JavaScript与jQuery

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、JavaScript与jQuery二、JavaScript常用的基本功能1.插入位置2.注释3.变量4.数组5.滚动字符 三、jQuery常用的基本功能1.引入jQuery2.寻找标签3.val、text、appe…

static关键字和final关键字

在java的关键字中&#xff0c;static关键字和final关键字是两个必须掌握的关键字。static关键字和final关键字用法多样&#xff0c;且在一定环境下使用&#xff0c;可以提高程序的运行性能&#xff0c;优化程序的结构。下面将依次介绍static关键字和final关键字。注意&#xff…

关于scipy库的入门教程

本教程将介绍如何使用Scipy库进行科学计算和数据分析。Scipy是一个基于NumPy的开源Python库&#xff0c;提供了很多高级的数学函数和科学计算工具。 安装Scipy库 在开始教程之前&#xff0c;首先需要安装Scipy库。可以使用以下命令进行安装&#xff1a; pip install scipy导入…

go的gin框架实现接受多个图片和单个视频并保存到本地服务器的接口

首先是接受多个图片的接口&#xff0c;就是接受多个文件 收到post请求后首先创建一个文件夹&#xff0c;这里利用uuid创建出唯一标识字符串作为文件夹名称&#xff0c;解析表单中的一串文件循环保存到本地服务器 package mainimport ("github.com/gin-gonic/gin"&q…

iveiw 时间验证

最近遇到在使用iview框架时&#xff0c;在商家后端管理系统中&#xff0c;在合同发布时会使用到form表单组件&#xff0c;当然日期也通常出现在搜索 框表单中&#xff0c;但是有时候会出现日期组件校验错误的情况 首先&#xff0c;iview采用的是async-validator的校验规则&…

SwiftUI简单基础知识学习

以下是一个大致的学习计划&#xff0c;将SwiftUI的知识分成12个主题&#xff1a; SwiftUI 简介和基础语法视图和布局状态和数据流按钮和用户输入列表和数据展示导航和页面传递动画和过渡效果手势和交互绘制和绘图多平台适配网络和数据请求实际项目实践和高级主题 每个主题可以…

go开发之个微机器人的二次开发

请求URL&#xff1a; http://域名/addRoomMemberFriend 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明wId是String登录实例标识chatRoom…

如何把Android Framework学彻底?一条龙学习

Framework通俗易懂 平时学习 Android 开发的第一步就是去学习各种各样的 API&#xff0c;如 Activity&#xff0c;Service&#xff0c;Notification 等。其实这些都是 Framework 提供给我们的。Framework 层为开发应用程序提供了非常多的API&#xff0c;我们通过调用这些 API …

系统数据大屏开发适配方案。

原理&#xff1a;通过css样式transform的属性scale实现展示盒子的缩放实现适配。 直接上干货&#xff1a; 监听屏幕的缩放&#xff1a; mounted() {this.$nextTick(() > {this.changeScale()})window.addEventListener(resize, this.changeScale); //监听屏幕的缩放},be…

约瑟夫环实现

约瑟夫环 约瑟夫环小游戏&#xff1a;把小朋友按照编号1&#xff0c;2&#xff0c;3&#xff0c;…&#xff0c;n围成一圈&#xff0c;指定编号为k的小朋友从1开始报数&#xff0c;数到m的小朋友出队。接着他的下一位小朋友再次从1报数&#xff0c;以此类推&#xff0c;直到所有…

计算机毕业设计 基于SSM的问卷调查管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

uniApp常见面试题-附详细答案

uniApp中如何进行页面跳转&#xff1f; 答案&#xff1a;可以使用uni.navigateTo、uni.redirectTo和uni.reLaunch等方法进行页面跳转。其中&#xff0c;uni.navigateTo可以实现页面的普通跳转&#xff0c;uni.redirectTo可以实现页面的重定向跳转&#xff0c;uni.reLaunch可以实…

qt day 5

实现局域网的网络聊天室功能 1>服务器代码 --------------------------------------------------------------- widget.h --------------------------------------------------------------- #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QMes…

golang入门笔记——nginx

文章目录 Nginx介绍Nginx的安装Nginx文件Nginx反向代理负载均衡nginx动静分离URLRewrite防盗链nginx高可用配置安全性Nginx限流Nginx缓存集成Lua脚本OpenRestry Nginx介绍 Nginx是一个高性能的HTTP和反向代理服务器&#xff0c;特点是占用内存少&#xff0c;并发能力强&#x…