首页 » SEO优化 » ckeditorphp上传技巧_CKEDITOR富文本编辑器的运用和图片上传复制粘贴图片上传

ckeditorphp上传技巧_CKEDITOR富文本编辑器的运用和图片上传复制粘贴图片上传

访客 2024-12-04 0

扫一扫用手机浏览

文章目录 [+]

之前在网上也找过干系的资料,论坛里面也有网友互换过,还加过不少QQ群微信群,但是都不太令人满意。
文章里面提到的方案大部分是HTML5的,也不是说不能用,紧张便是限定太大。
也不太灵巧,兼容性比较差,不能兼容IE,基本上只能用他现有的API,他的API里面供应了哪些功能你就只能用这些功能。

公司这边是有几点需求的,一个是须要供应产品的完全源代码,公司项目比较多也有自主掩护的需求,其余一个便是须要供应技能支持。

ckeditorphp上传技巧_CKEDITOR富文本编辑器的运用和图片上传复制粘贴图片上传

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

ckeditorphp上传技巧_CKEDITOR富文本编辑器的运用和图片上传复制粘贴图片上传
(图片来自网络侵删)

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

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

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

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

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

视频教程:https://www.ixigua.com/7234042815380980258

示例项目:https://gitee.com/xproer/wordpaster-vue-ckeditor51.为ckeditor增加插件按钮

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

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git

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:”http://localhost:8891/upload.aspx”,

ImageUrl:”http://localhost:8891{url}”

}).Load();

整合效果:

订阅版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAw70JsA8m政企版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwuqJtN30#/

年费版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwFouDIB4#/

OEM版报价单:https://drive.weixin.qq.com/s?k=ACoAYgezAAwV00mQSY

产品源代码:https://drive.weixin.qq.com/s?k=ACoAYgezAAwz13B5Tr授权码天生器:https://drive.weixin.qq.com/s?k=ACoAYgezAAwzYuEEY1

相关文章

介绍百度网盘,云端存储时代的创新先锋

随着互联网技术的飞速发展,云计算已经成为现代生活不可或缺的一部分。而在这其中,百度网盘作为国内领先的云存储服务提供商,以其卓越的性...

SEO优化 2025-01-03 阅读3 评论0

介绍监控屏蔽技术,守护个人隐私的利器

随着科技的发展,监控设备已经深入到我们生活的方方面面。在享受便利的隐私安全问题也日益凸显。如何有效屏蔽监控,保护个人隐私,成为人们...

SEO优化 2025-01-03 阅读3 评论0

介绍番号观看方法,轻松驾驭影视世界

随着互联网的普及,网络影视资源日益丰富,番号作为影视作品的标识码,已经成为广大观众了解、搜索和观看影视作品的重要途径。如何正确地使...

SEO优化 2025-01-03 阅读1 评论0

介绍盗微信号黑幕,网络安全的严峻挑战

在数字化时代,微信已成为人们生活中不可或缺的通讯工具。随着微信用户数量的激增,盗微信号的事件也日益增多。本文将深入剖析盗微信号的方...

SEO优化 2025-01-03 阅读1 评论0