龙空技术网

CKEDITOR富文本编辑器的使用和图片上传,复制粘贴图片上传

荆门泽优软件有限公司 6

前言:

眼前我们对“富文本编辑器数据怎么存储”大体比较关怀,各位老铁们都想要了解一些“富文本编辑器数据怎么存储”的相关文章。那么小编在网上收集了一些关于“富文本编辑器数据怎么存储””的相关内容,希望我们能喜欢,你们快快来学习一下吧!

CKEDITOR富文本编辑器的使用和图片上传,复制粘贴图片上传,CKEDITOR4粘贴WORD文档携带格式配置,CKEDITOR粘贴图片自动上传到服务器(ASP.NET版),支持复制粘贴WORD图片的CKEDITOR编辑器,CKEDITOR粘贴图片自动上传到服务器(PHP版),CKEDITOR复制粘贴word图片,CKEDITOR复制word图片,CKEDITOR粘贴上传Word图片,CKEDITOR粘贴上传图片,JAVA中将WORD转换为HTML导入到CKEDITOR编辑器中(解决图片问题,样式,非常完美),ckeditor粘贴word,ckeditor3粘贴word,ckeditor4粘贴word,ckeditor5粘贴word内容,ckeditor复制word图片,ckeditor复制粘贴word图片,ckeditor复制word内容,ckeditor粘贴word图片,复制word图片粘贴到ckeditor,

之前在网上也找过相关的资料,论坛里面也有网友交流过,还加过不少QQ群微信群,但是都不太令人满意。文章里面提到的方案大部分是HTML5的,也不是说不能用,主要就是限制太大。也不太灵活,兼容性比较差,不能兼容IE,基本上只能用他现有的API,他的API里面提供了哪些功能你就只能用这些功能。

公司这边是有几点需求的,一个是需要提供产品的完整源代码,公司项目比较多也有自主维护的需求,另外一个就是需要提供技术支持。

前端用了VUE2,VUE3,React,HTML5,也是一个新项目,为了方便用的这些框架,实际上这个是无所谓,功能的实现和前端这些框架没什么关系。

后端用了PHP,JSP,ASP,ASP.NET,SpringBoot,功能实现和后端用的什么开发语言无关,后端只提供一个文件上传的接口,HTTP form协议,图片上传时会调这个接口。

编辑器是ckeditor5,为ckeditor编辑器增加粘贴Word图片的功能,支持快捷键操作(Ctrl+V),支持多种系统:Windows,macOS,Linux,信创国产化环境,中标麒麟,银河麒麟,统信,龙芯。

支持word粘贴,word内容粘贴,word图文粘贴,word图片粘贴,粘贴后图片能够自动上传到服务器中,然后将图片和内容HTML添加到编辑器中,上传接口地址能够自定义

用户使用操作起来更方便一些,一般发新闻,或者发文章用的比较多,基本上每天发新闻,发文章都会用到,

这个功能确实为用户带来了方便。公司主要也是做政府和企业项目,以WEB项目为主,有自己的产品,之前也做过很多项目。

视频教程:

示例项目:

1.为ckeditor增加插件按钮

1.下载ckeditor5源码,注意:不是在npm中直接安装ckeditor5,在npm中直接安装的ckeditor5是已经打包好的编辑器,我们无法为其添加插件,必须下载源码添加好后再手动打包。

git clone -b stable

cd ckeditor5-build-classic

2.添加插件文件

将plugin下的插件复制到ckeditor5的目录中

导入插件

在ckeditor.js中导入插件

3.添加插件

添加到工具栏

# 构建,生成ckeditor.js,生成的ckeditor.js在build目录下

yarn build

执行命令后生成ckeditor.js

将打包好的ckeditor.js复制到项目中

2.复制layer,wordpaster目录,安装jquery

#通过命令安装jquery

npm install jquery

3.在组件中导入样式

代码:

import {WordPaster,WordPasterManager} from ‘../../static/WordPaster/js/w’

import ‘../../static/WordPaster/js/w.css’

import ‘../../static/layer-v3.1.1/layer/layer’

import ‘../../static/layer-v3.1.1/layer/theme/default/layer.css’

4.初始化wordpaster组件

配置posturl,

代码:

//初始化

WordPaster.getInstance({

PostUrl:””,

ImageUrl:”{url}”

}).Load();

整合效果:

订阅版报价单:

政企版报价单:

年费版报价单:

OEM版报价单:

产品源代码:

授权码生成器:

标签: #富文本编辑器数据怎么存储