义乌兼职网站建设,做床上用品网站,百度收录提交入口网址,重庆金建站Vue3简单使用CKEditor 5 前言准备定制基础配置富文本配置目录当前文章demo目录结构 快速使用demo 前言
CKEditor 5就是内嵌在网页中的一个富文本编辑器工具 CKEditor 5开发文档#xff08;英文#xff09;#xff1a;https://ckeditor.com/docs/ckeditor5/latest/index.htm… Vue3简单使用CKEditor 5 前言准备定制基础配置富文本配置目录当前文章demo目录结构 快速使用demo 前言
CKEditor 5就是内嵌在网页中的一个富文本编辑器工具 CKEditor 5开发文档英文https://ckeditor.com/docs/ckeditor5/latest/index.html
接下来带你快速熟悉CKEditor 5在Vue3中简单使用看最终效果图
准备
本文项目采用CKEditor 5定制经典配置ckeditor5-build-classic ckeditor/ckeditor5-vue
定制基础配置
官网定制选择经典风格配置 选择富文本支持的功能插件默认是这些可进行增加删除增加点击Add删除Remove即可 可以拖动上面自己没有的工具项目到下面自己的也可以拖动下面工具来调整属性可以删除自己有的 选择默认编辑器语言在此选择中文 然后点击start开始构建配置好的富文本并下载CKEditor 5 build 将下载的富文本制定配置 解压放入自己项目的根目录下名字改为ckeditor5-custom-build 注意什么名字都可以 只不过后面npm需要下载这个本地包要指定这个名字后面会说到
富文本配置目录 当前文章demo目录结构 快速使用 在自己项目下package.json文件进行配置 key名字 是在自己项目中引入时用到value中file: 告诉npm要下载本地包本地包的名字是刚开始自定应的名字 注意配置完后执行npm install安装 在自己项目下执行命令安装ckeditor/ckeditor5-vue npm install ckeditor/ckeditor5-vue -S or pnpm add ckeditor/ckeditor5-vue -S or year add ckeditor/ckeditor5-vue -S 做好以上准备后 在你需要用到富文本的组件中添加以下相关代码即可 script setup
import { reactive } from vue;
import CKEditor from ckeditor/ckeditor5-vue;
import ClassicEditor from ckeditor5-build-classic;const state reactive({editor: ClassicEditor,editorData: pContent of the editor./p,editorConfig: {// The configuration of the editor.},
});/scripttemplatemainCKEditor.component:editorstate.editorv-modelstate.editorData:configstate.editorConfig/CKEditor.component/main
/templatestyle scoped langscss
main {width: 800px;height: 600px;margin: 50px auto;
}
/style
style langscss
.ck.ck-content {height: 400px;
}
/style如要继续添加CKEditor 5富文本的功能性配置可以更改下载的ckeditor5-custom-build中的ckeditor.js 添加后在当前根目录下npm run build 更新build文件然后在回到自己项目的根目录下执行npm uninstall ckeditor5-custom-build删除重新安装富文本本地npm包即可生效
demo
https://github.com/gitboyzcf/ckeditor-vue3-demo 到这里就结束了后续还会更新 前端 系列相关还请持续关注 感谢阅读若有错误可以在下方评论区留言哦 推荐文章 vue3 ts以及ckEditor5 富文本编辑器 工具栏 以及正文内容的编辑问题小结
