开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用laravel的ckeditor不支持图像拖放

是因为ckeditor默认不包含图像拖放的功能。不过，可以通过自定义配置来实现图像拖放的功能。

首先，需要确保已经安装了laravel-ckeditor扩展包。然后，在配置文件config/ckeditor.php中，可以找到'extraPlugins'选项。在该选项中，可以添加'uploadimage'插件来支持图像上传功能。

接下来，需要在前端页面中引入相关的JavaScript和CSS文件。可以通过以下方式来实现：

在页面的<head>标签中引入ckeditor的CSS文件：

<link rel="stylesheet" href="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.css') }}">

在页面的<body>标签中引入ckeditor的JavaScript文件：

<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>

在页面中使用<textarea>标签创建一个编辑器实例，并指定相关的配置选项：

<textarea name="content" id="editor">{!! old('content', $content) !!}</textarea>
<script>
    CKEDITOR.replace('editor', {
        extraPlugins: 'uploadimage',
        uploadUrl: '/upload/image', // 图像上传的URL地址
        filebrowserUploadUrl: '/upload/image', // 图像上传的URL地址
    });
</script>

在上述代码中，'uploadUrl'和'filebrowserUploadUrl'需要根据实际情况进行配置，用于指定图像上传的URL地址。

最后，需要在后端实现图像上传的逻辑。可以通过创建一个路由和对应的控制器方法来处理图像上传请求，并返回上传成功后的图像URL。

综上所述，通过以上步骤，就可以在laravel中使用ckeditor并支持图像拖放功能了。

推荐的腾讯云相关产品：腾讯云对象存储（COS）

概念：腾讯云对象存储（COS）是一种海量、安全、低成本、高可靠的云存储服务，适用于存储大量非结构化数据，如图片、音视频、文档等。
优势：高可靠性、高可用性、低成本、安全性好、易于使用、可扩展性强。
应用场景：网站图片、音视频存储、大数据分析、备份与归档等。
产品介绍链接地址：https://cloud.tencent.com/product/cos

相关搜索:如何使用CKeditor上传拖放和粘贴的图像 CKEditor:无法通过拖放上载图像如何使用Ckeditor 5 Classic和laravel上传图像？CKEditor Laravel图像上传未定义 Laravel + CKEditor + Laravel文件管理器-不显示图像 CkEditor图像上传在laravel中不起作用多个图像的拖放重置 CKeditor，图像预览框的大小 Ckeditor -用户友好的图像上传使用Jquery在网页中拖放图像解析Google图像搜索中的拖放图像如何在Laravel 6中使用CKEditor 5？如何使用jQuery在div中多次拖放图像，以及如何在放置的div中拖放图像？我的CKEditor和输入字段不支持Unicode 使用Laravel保存图像 Ckeditor图像上传工作，但说它不(使用ckfinder)无法拖放画布图像中的文本将图像上传到laravel中的ckeditor服务器响应不正确如何使用Python Qt创建拖放图像重排序？使用Laravel存储图像路径

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

14款web前端常用的富文本编辑器插件

作为一个技术人员，手上备上两款富文本编辑器还是很有用的，指不定那个项目就要集成一个进去。

04

常见问题 - 构建文档 - ckeditor5中文文档

不像CKEditor 4, CKEditor 5实现了自定义数据模型。这意味着加载到编辑器中的每个内容都需要转换为该模型，然后再渲染回视图。

04

WYSIWYG富文本编辑器选择——综合考虑功能与版权协议

如果奔着盗版好使的情况，TinyMCE yyds，如果只要基础的文本编辑功能，quill 小而精，如果是react项目，推荐lexical，个人最终选择wangeditor

02

Laravel5.6框架使用CKEditor5相关配置详解

本文实例讲述了Laravel5.6框架使用CKEditor5相关配置。分享给大家供大家参考，具体如下：

04

Django 的 admin后台使用富文本编辑器，保存数据之后，还要在html页面展示

CHEDITOR_UPLOAD_PATH的作用是设定你通过ckeditor所上传的文件的存放目录。需要注意的是，如果使用django自带的存储，那么路径是一个相对路径，它相对与你设置的的MEDIA_ROOT。

02

Python ckeditor富文本编辑器代码实例解析

path(r'^ckeditor/', include('ckeditor_uploader.urls')),

02

如何在不影响asp.net默认安全性的前提下使用ckeditor/fckeditor?

asp.net默认情况下，不允许提交包含html源代码的表单，这在很大程度上防止了跨站(提交)攻击，但是ckeditor/fckeditor之类的富文本编辑器肯定是要生成html源代码的，如何解决这个矛盾？通常的办法是修改web.config asp.net2.0/3/3.5时可以这样做: <pages validateRequest="false"></pages> asp.net4.0下，这样还不够，必须写成这样: <pages validateRequest="false"></pages> <h

09

H5新增的特性及语义化标签

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等

03

使用百度UMeditor富文本编辑器，修改自定义图片上传，修改源码

富文本编辑器，不多说了，这个大家应该都用到过，至于用到的什么版本，那就分很多种 CKEditor：很早以前叫FCK，那个时候也用过，现在改名了，比较流行的一个插件，国外很多公司在用 UEDITOR：百度开发的插件，lite版是UM EasyUI编辑器：用easyUI的都懂，基本上肯定用到其他的富文本编辑器就不说了，前两个小编我用的比较多本来我是比较倾向于CKEditor，但是这个插件不支持图片上传，图片功能只能链接过去，而不能在控件本身中上传，所以就选择了UMeditor 为啥选择UM，不选择UE，其实

04

前端-面试总结——http、html和浏览器篇

http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

02

基于 Laravel Prequel 扩展包通过 Web 界面管理 MySQL 数据库

Laravel Prequel 是一个数据库管理工具，可以在某个 Laravel 项目中安装该扩展包，从而实现对数据库的在线管理，这样一来就可以通过它替代掉那些与项目本身分离的、需要独立安装的其它数据库管理工具了，比如 phpMyAdmin、Sequel Pro、Navicat 以及 MySQL Workbench 等。

01

理论 | HTML5 进阶系列：拖放 API 实现拖放排序

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。想要拖放某个元素，必须设置该元素的 draggable 属性为 true，当该属性为 false 时，将不允许拖放。而 img 元素和 a 元素都默认设置了 draggable 属性为 true，可直接拖放，如果不想拖放这两个元素，把属性设为 false 即可。拖放事件拖放事件由不同的元素产生。一个元素被拖放，他可能会经过很多个元素上，最终到达想要放置的元素内

03

Parallels Desktop 18 for Mac(兼容Intel和M系列)v18.0.1永久激活版

Parallels Desktop 18 for Mac可在 Mac 上同时运行 Windows 和 macOS，无论您需要运行没有 Mac 版本的 Windows 程序，还是从 PC 切换到 Mac 并需要传输数据，Parallels Desktop 18都能满足您的需求。

00

停用TinyMCE，改用xhEditor在线可视化HTML编辑器

我的网页开发生涯中，一直离不开跟各种各样的在线Html编辑器（所见即所得）打交道，从最初的简易UBB编辑器，到购买正版的[URL=http://www.ewebeditor.net/]eWebEditor[/URL]，再到免费版的[URL=http://www.tinymce.com/]TinyMCE[/URL]，在综合比较了一些类似的编辑器之后，终于走到今天，准备启用[URL=http://www.xheditor.com]xhEditor[/URL]

03

盘点7款顶级 PHP Web 框架

2019年，PHP 代表超文本预处理器（Hypertext Pre-processor）是非常流行的 Web 服务端编程语言，小编今天就来和大家一起盘点7款顶级的 PHP 框架。

00

HTML5新特性

本章的主要内容有： ---- [1] 用于媒体回放的 video 和audio 元素 [2] HTML5拖放 [3] canvas简单应用 [4] Web存储: localStorage 和 SessionStorage [5] Input输入类型 [6] 表单类型 [7] 表单属性 [8] 地理定位 (geolocation) [9] Web Workers: Worker [10] 服务器发送事件 EventSource ---- [1] 用于媒体回放的 video 和audio 元素 video 支持

05

HTML5 进阶系列：拖放 API 实现拖放排序

本文介绍了如何使用 HTML5 的拖放 API 实现一个简单的拖放排序功能。首先介绍了如何为元素设置拖放 API，然后通过一个示例展示了如何实现拖放排序。在示例中，使用了 dataTransfer 对象来存储数据，并通过 setDragImage() 方法来设置拖放图标。最后，指出了在 IE 和 iOS 上需要使用特定的插件来支持拖放排序。

07

HTML5画布-小球碰撞

html5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。

00

新内容 - 构建文档 - ckeditor5中文文档

插入图片到内容中是非常直观的，在用户体验上隐藏了所有的技术方面（上传，重置大小）。没有了复杂的对话框！

04

关于 Laravel 应用性能优化的几点建议

很多人吐槽 Laravel 框架性能不行，在我看来，除了每次新请求应用启动阶段由于 Laravel 框架本身的设计，导致服务容器加载服务确实增加了一些耗时外（不过这是由于 PHP 作为动态语言不能常驻内存，进而导致每次新请求需要重新初始化服务容器导致的，换做是常驻内存的静态语言，这反而可以是优点），我们是可以通过一些常规的手段将 Laravel 应用的性能优化到一个合理的水平的。况且服务容器并不是什么致命的缺点，相反，它所带来的系统扩展性和可维护性完全可以抵消它所产生的负面作用。

02

HTML5 拖放

拖放（Drag 和 drop）在WEB软件应用中是一种常见的操作，就是用户可以用鼠标点击对象以后拖到另一个位置。

02

HTML5 进阶系列：拖放 API 实现拖放排序

HTML5 中提供了直接拖放的 API，极大的方便我们实现拖放效果，不需要去写一大堆的 js，只需要通过监听元素的拖放事件就能实现各种拖放功能。

01

Laravel Valet - macOS 极简主义者的开发环境

Laravel Valet 是 macOS 极简主义者的开发环境。Laravel Valet 将您的 mac 配置为在您的机器启动时始终在后台运行 Nginx，然后使用 Dnsmasq，Valet 代理 *.test 域上的所有请求指向安装在本地计算机上的站点

03

Laravel项目部署后，出现 file_put_contents ()

问题：部署博客，服务器经常500 排查：查看laravel日志： file_put_contents () ，failed to open stream: No such file or directory；

02

对laravel in 查询的使用方法详解

今天遇到多条件搜索，其中需要用到in查询，但是laravel不支持 [ ‘type’, ‘in’, ‘1,2,3’] 这样的写法

06

6 款 Retool 最佳替代方案

低代码平台正在不断发展，新平台不断涌入市场，旧平台不断调整产品和策略，所以本篇文章的目的通过低代码平台使用者的视角引出细节，了解他们为什么使用低代码平台以及会选择哪个低代码平台来加速内部系统的开发。读者也可以点击链接向码匠分享自己的意见或建议。

05

超酷炫！5 款图像工具瞬间提高代码逼格！

平时我们使用着漂亮的 IDE，编译器里的代码颜色丰富、支持高亮，但其实对外分享的时候，比如公众号、微博、Twitter 等社交平台，大部分都不支持代码排版，看代码简直让人头疼。

01

13个顶级免费所见即所得文本编辑器工具

CKEditor拥有10多年的开发经验，你可以完全放心此文本编辑器的质量。它支持70多种语言，我认为这是你网站的不错选择。它还可以运行在许多不同的浏览器上，并能很好地与大多数前端框架，如reat，vue，angular......你可以使用CDN直接嵌入到你的HTML页面中......。目前它有两个版本并行运行的CKEditor4和CKEditor5，根据不同的使用目的，你会选择适合自己的编辑器。

00

Django CKEdirtor配置(图

需要安装下 Node.js 和 ESLint(网上有资料) 并在setting 配置下

01

组件分享之前端组件——文件上传小部件jQuery-File-Upload

近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。

02

IconJar Mac(图标管理工具)

Iconjar for mac版是一款可以在苹果电脑MAC OS平台上使用的支持 SVG/PNG/GIF 三种图标格式的图标设计应用，设计风格质朴，功能实用，拖入式导入管理，Iconjar for mac可以设置多个“Set”组合来分类管理图标，使用起来非常的简单方便。

02

WSL + Docker 使用 Laravel Sail 未果

昨天看到 Laravel 新出来一个工具 Laravel Sail ,简而言之就是 Laravel 自己出的基于 Docker 的本地开发环境。

01

当我们讨论swoole的时候，我们在讨论什么？

首先，我们需要肯定的是，它的出现是为了弥补php更准确的是laravel的短板：性能和资源利用率。其次，就我们现有的场景来说，更多的是开发http的相关功能。

04

Go 语言 Web 编程系列（五）—— 基于 gorilla/mux 包实现路由匹配：进阶使用篇

上篇教程我们介绍了 gorilla/mux 路由的基本使用，这篇教程继续介绍它的更多匹配规则，实际上，它可能是一个比 Laravel 路由更加强大的存在。

02

图片也能再压缩——PackJPG

自数码时代来临以后，大家的硬盘里数码相片开始多了起来。随着DC的像素越来越高，生成的文件也越来越大。单张照片动辄3~5M，一次旅行回来就足以用掉一大块空间。虽说老些的照片可以刻盘存放，但是光盘相对而言终究没有那么方便。而放在硬盘里又没有办法压缩，虽说硬盘越来越便宜，但是能不能想办法压缩一下呢？PackJPG就是一个很好的选择。

03

Laravel 5.0 发布, 海量新特性!!

译注: 期待 Laravel 5.0 已经很久很久了, 之前跳票说要到今年一月份发布. 从一月份就一直在刷新官网和博客, 始终没有更新的消息, 前几天终于看到官网文档切换到了 5.0 版. 新版本带来了众多令人激动的新特性, 尤其是定时任务队列和表单请求两个特性, 光看一下更新说明中的简单介绍都忍不住要上手尝试了. 今天总算抽出一点时间把官方的新特性说明文档简单地翻译了一下, 希望所有喜欢 Laravel 框架的朋友都能感受到这个版本带来的激动人心的改变. 当然, 如果你需要的是 Phalcon 那样的性能

06

实践搭建Sentry异常中心结合Laravel使用

Sentry 是一个开源的实时错误追踪系统，可以帮助开发者实时监控并修复异常问题。它主要专注于持续集成、提高效率并且提升用户体验。Sentry 分为服务端和客户端 SDK，前者可以直接使用它家提供的在线服务，也可以本地自行搭建；后者提供了对多种主流语言和框架的支持，包括 React、Angular、Node、Django、RoR、PHP、Laravel、Android、.NET、JAVA 等。同时它可提供了和其他流行服务集成的方案，例如 GitHub、GitLab、bitbuck、heroku、slack、Trello 等。目前公司的项目也都在逐步应用上 Sentry 进行错误日志管理。

02

开源UI界面布局框架MyLayout1.9发布

MyLayout是一套功能全面的iOS开源UI界面布局框架。它囊括了前端所有流行的界面布局技术和解决方案，同时具有如下七大特点：

01

Laravel 中如何更方便的修改 Passport Personal Access Token 过期时间

认真看过 Laravel Passport 文档的人应该知道，它的 Personal Access Token 是不支持自定义过期时间的，tokensExpireIn 对此类 token 无效，原文如下：

01

获取和保存数据 - 集成 - 构建文档 - ckeditor5中文文档

CKEditor 5允许您以各种方式从中检索数据并将其保存到服务器（或通常用于您的系统）。在本指南中，您可以了解可用选项及其优缺点。

02

iMazing2023专业于iOS设备管理应用软件

iTunes最早是一款音视频管理软件，后来在苹果推出了iPhone和iPad后，便又在管理音视频的基础上增加了iPhone和iPad的管理。由于iTunes使用起来非常麻烦，很多苹果用户直接把设备的数据转存到云端。虽然这样看起来使用很方便，但是随着设备的存储容量越来越大，使用的APP和存放的数据越来越多，包括隐私等问题，在本地进行备份和管理都是很有必要的。

00

创作者必备几款实用工具

五一没事在家，对之前写过的所有的技术文档重新整理了一遍。七七八八的文章，都汇集到一个平台，GitHub

03

CentOS Supervisord守护进程实现Laravel异步队列任务

Supervisor是用Python开发的一个client/server服务，是Linux/Unix系统下的一个进程管理工具，不支持Windows系统。它可以很方便的监听、启动、停止、重启一个或多个进程。用Supervisor管理的进程，当一个进程意外被杀死，supervisort监听到进程死后，会自动重启。

02

CentOS Supervisord守护进程实现Laravel异步队列任务

Supervisor是用Python开发的一个client/server服务，是Linux/Unix系统下的一个进程管理工具，不支持Windows系统。它可以很方便的监听、启动、停止、重启一个或多个进程。用Supervisor管理的进程，当一个进程意外被杀死，supervisort监听到进程死后，会自动重启。

02

HTML5 FileReader接口学习笔记

1、FileReader概述 FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中File对象可以是来自用户在一个<input>元素上选择文件后返回的FileList对象,也可以来自拖放操作生成的DataTransfer对象,还可以是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。 2、FileReader接口方法方法名参数描述 r

06

深入比较Laravel Herd与ServBay的性能特点

Laravel Herd是一款原生 Laravel 和 PHP 开发环境，它包含本地开发环境（例如 PHP、Nginx 和 Dnsmasq）所需的一切。它支持 Mac和Windows系统。开发者可以利用 Laravel Herd 提供的高效、全面的开发工具和服务来加速 Laravel 项目的开发过程。

01

HTML5学习笔记

参考资料：http://www.runoob.com/html/html-tutorial.html

03

ckeditor 上传图片后，怎么让链接选项卡自动添加图片地址（已解决）

在 Django CKEditor（django-ckeditor 5.3.1）中，图片上传成功后，期望自动在链接选项卡的 URL 里添加图片的地址，就像图像信息选项卡里会自动添加图片的地址一样

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭