vue使用ckeditor4富文本编辑器配置

使用场景：

本来最开始使用的是quill富文本编辑器，但是由于功能和项目得实际需求并不是怎么适合，因为我需要在Word文档里面把一些内容进行粘贴复制进去（复制的是图文），当出现这种场景的话quill就不可以实现了，quill它只能一张一张进行图片的复制粘贴不能进行多张图片和图文一起复制粘贴的能力（这里的不能复制粘贴图文问题是图片不会正常显示出来）

上图是quill富文本编辑器复制粘贴图文过来的情况

上图是单独复制粘贴一张图片是没有问题的能够正常显示

上图是一次性复制多张图片的情况

希望大家看到这编文章有知道怎么解决这个问题的评论区说一下。感谢！！！

下面进入正题使用ckeditor4来解决这个复制粘贴的问题

CKEditor 4 | Visual Text Editor for HTML 这是ckeditor4的官网

上操作按照图片操作即可

去需要的项目里面下载

翻译废了o(╥﹏╥)o o(╥﹏╥)o o(╥﹏╥)o

直接上代码了，有翻译的可以看到在本地使用组件，这里的本地使用组件是不对的，我演示一下其他的按照官网做即可。

<template><div id="app"><ckeditor v-model="editorData" :config="editorConfig"></ckeditor></div>
</template><script>
import CKEditor from 'ckeditor4-vue'export default {name: 'app',components: {// Use the <ckeditor> component in this view.ckeditor: CKEditor.component},data() {return {
// 富文本编辑器的内容editorData: '<p>Content of the editor.</p>',
// 富文本编辑器的配置editorConfig: {// The configuration of the editor.}};}}
</script>

搞完这些之后就可以运行看一下有没有这个富文本编辑器了（需要拓展富文本功能按钮接着看下面操作）

点击上面这里后看到下面这些下载

下载第三个全套并且勾选简易图像

下载完成后解压放到pubic里面

通过使用editor-url指令更改指向所需的ckeditor4脚本位置

这个网址根据加上ckeditor/ckeditor.js"就可以了

工具栏操作Ckeditor4超详细使用加配置教程（包含控件的增删）_你被强化了快跑的博客-CSDN博客_ckeditor4使用

视频操作

vue项目中使用CKEditor4_哔哩哔哩_bilibili

vue使用ckeditor4富文本编辑器配置相关推荐

vue使用百度富文本编辑器（ueditor）
文章目录 vue使用百度富文本编辑器(ueditor) 1.进入官网或者github下载源码 2.使用grunt编译 4.安装`vue-ueditor-wrap` 5.组件中引入,自定义组件 6.后端 ...
vue 是否有word编辑控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本编辑器,增加导入 word 模板...
editor-ui vue 集成 tinymce 富文本编辑器自定义 tinymce 富文本编辑器, 在原来的编辑器中增加上传 word 模板最终展示效果: 主要代码: 整体思路: 1,在编辑器原 ...
wangeditor html编辑,Vue整合wangEditor富文本编辑器
最近在做项目时,客户有个发布新闻动态的功能,具体页面内容让客户自己编写,所以要选择富文本编辑器,这样用户体验好一点.网上有很多的富文本编辑器, 因为项目的功能并不是很复杂,所以选择了wangEdito ...
VUE+tinymce（富文本编辑器）
效果图: VUE项目引入tinymce 1.tinymce安装以及下载 npm install @tinymce/tinymce-vue -save npm install tinymce -save ...
vue移动端富文本编辑器vue-html5-editor
简介 Intro Vue-html5-editor是一个Vue的富文本编辑器插件,简洁灵活可扩展,适用于vue2.0以上版本,支持IE11. Vue-html5-editor is an html5 ...
vue使用WangEditor富文本编辑器(批量上传图片到服务器)
最近要写一个官网,但是这个官网要写成活的可配置的项目,于是要先写一后台管理系统,用来配置官网的菜单和页面,配置菜单自然是vue+ElementUI表格表单的增删改查,但是配置页面就要有排版.样式等等, ...
Vue中引入富文本编辑器
这里使用的是 vue-quill-editor 富文本组件先安装一下: npm i vue-quill-editor -s 下载之后去components文件夹中新建一个文件夹 KEditor,然 ...
vue集成vue-ueditor-wrap富文本编辑器
vue前言最近项目需要使用到富文本编辑器,因为项目关系需要使用到vue-ueditor-wrap富文本编辑器.经过了几小时的研究终于成功集成了. 1.install vue2 # vue-uedit ...
Vue封装WangEditor富文本编辑器
Vue中很多用vue-quill-editor编辑器的,但是感觉并不是很好用,于是决定使用以前感觉不错的WangEditor编辑器. 1.安装WangEditor npm install wanged ...

vue使用ckeditor4富文本编辑器配置

下面进入正题使用ckeditor4来解决这个复制粘贴的问题

vue使用ckeditor4富文本编辑器配置相关推荐

最新文章

热门文章