uEditor独立图片上传

2024-04-04 01:08
文章标签 图片 独立 上传 ueditor

本文主要是介绍uEditor独立图片上传,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

项目中。上传图片,非常希望有一款比较兼容的查件。

网上找了一些,图片上传立刻显示的js代码,还有uploadify。都会碰到这样那样的不兼容和其它头疼的问题。

后来想,干脆就用php的上传类最干脆。但是却不美观。

觉得ueditor的图片上传不错。

于是到网上搜索了一番。发现,确实有。不过,看不太懂,就照搬了。

不过,ueditor的图片上传其实不是完全的独立。还是需要实例化ueditor这个家伙的,只不过是隐藏了而已。仅仅显示了图片功能。

网上一搜“ueditor独立图片”,很多的,我就不多说了。我只记录我自己理解的,方便以后自己使用。

因为我的是thinkphp框架开发的。所以代码如下:

<include file="Common:header" />
<js file="__ROOT__/Data/ueditor/ueditor.config.js"/>
<js file="__ROOT__/Data/ueditor/ueditor.all.min.js"/><script type="text/javascript">
//这个是图片上传的,网上还有附件上传的(function($) {var image = {editor: null,init: function(editorid, keyid) {var _editor = this.getEditor(editorid);_editor.ready(function() {_editor.setDisabled();_editor.hide();_editor.addListener('beforeInsertImage', function(t, args) {$("#" + keyid).val(args[0].src);});});},getEditor: function(editorid) {this.editor = UE.getEditor(editorid);return this.editor;},show: function(id) {var _editor = this.editor;//注意这里只需要获取编辑器,无需渲染,如果强行渲染,在IE下可能会不兼容(切记)//和网上一些朋友的代码不同之处就在这里$("#" + id).click(function() {var image = _editor.getDialog("insertimage");image.render();image.open();});},render: function(editorid) {var _editor = this.getEditor(editorid);_editor.render();}};$(function() {image.init("myeditor", "upload");image.show("image");});})(jQuery);
</script>
<script type="text/javascript">
//    必须有这个东西,不然,图片上传没法用。如果你独立上传图片,并且需要修改图片路径的话,你就模仿下面的代码var editor = UE.getEditor('myeditor', {imageUrl: "{:U(GROUP_NAME.'/Cases/upload/')}",imagePath: "__ROOT__/Uploads/",imageManagerUrl: "{:U(GROUP_NAME.'/cases/imagesManager/')}",imageManagerPath: "__ROOT__/",});
</script>
<form method='post' action='{:U(GROUP_NAME."/Cases/save")}' enctype="multipart/form-data"><table class="table"><tbody><tr><td class="title_td">标题:</td><td class="input_td"><input type='text' name='title' style='width: 300px'/></td></tr><tr><td class="title_td">图片:</td><td class="input_td"><input id="upload" name='upload' type="text" style='width: 300px' value=""/><script id="myeditor"></script><input type="button" id='image' value='上传图片'/></td></tr><tr><td colspan="2"><input type='submit' value="提交保存"/></td></tr></tbody></table></form>
<include file="Common:footer" />


这篇关于uEditor独立图片上传的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/874444

相关文章

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面:本文主要介绍uni-app小程序项目中实... 目录方式一:使用<canvas>实现图片压缩(推荐,兼容性好)示例代码(小程序平台):方式二:使用uni

Android实现图片浏览功能的示例详解(附带源码)

《Android实现图片浏览功能的示例详解(附带源码)》在许多应用中,都需要展示图片并支持用户进行浏览,本文主要为大家介绍了如何通过Android实现图片浏览功能,感兴趣的小伙伴可以跟随小编一起学习一... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

Python一次性将指定版本所有包上传PyPI镜像解决方案

《Python一次性将指定版本所有包上传PyPI镜像解决方案》本文主要介绍了一个安全、完整、可离线部署的解决方案,用于一次性准备指定Python版本的所有包,然后导出到内网环境,感兴趣的小伙伴可以跟随... 目录为什么需要这个方案完整解决方案1. 项目目录结构2. 创建智能下载脚本3. 创建包清单生成脚本4

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》:本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

基于C#实现PDF转图片的详细教程

《基于C#实现PDF转图片的详细教程》在数字化办公场景中,PDF文件的可视化处理需求日益增长,本文将围绕Spire.PDFfor.NET这一工具,详解如何通过C#将PDF转换为JPG、PNG等主流图片... 目录引言一、组件部署二、快速入门:PDF 转图片的核心 C# 代码三、分辨率设置 - 清晰度的决定因

Python从Word文档中提取图片并生成PPT的操作代码

《Python从Word文档中提取图片并生成PPT的操作代码》在日常办公场景中,我们经常需要从Word文档中提取图片,并将这些图片整理到PowerPoint幻灯片中,手动完成这一任务既耗时又容易出错,... 目录引言背景与需求解决方案概述代码解析代码核心逻辑说明总结引言在日常办公场景中,我们经常需要从 W