百度编辑器图片上传功能解疑

简介:  最头疼的上传图片问题 版本选择和自定义配置  项目中使用了百度编辑器ueditor,这里是官网链接,效果还算不错,使用中的一些经验,分享在这里。 我使用的环境是.NET MVC3 最头疼的上传图片问题 ueditor自带了图片上传功能,原理也是使用flash上传。

 项目中使用了百度编辑器ueditor,这里是官网链接,效果还算不错,使用中的一些经验,分享在这里。

我使用的环境是.NET MVC3

最头疼的上传图片问题

ueditor自带了图片上传功能,原理也是使用flash上传。但是我按照官方的配置修改相应的参数后,发现上传出现问题,具体体现在:

本地上传图片,触发上传按钮后,上传失败,代码中提示 Flash插件初始化失败,请更新您的FlashPlayer版本之后重试!,主流浏览器都是这个错误

 

起初我把问题集中在可以看到的错误”提示flash插件初始化错误“,但是这是一个迷惑性的提示,错误的根本原因不在这里。

先看看项目的配置

上传功能是通过Image.html内部的js调用.NET文件夹中的”后台方法“实现的,ueditor内置了一些.net处理逻辑

在排错的过程中,我发现一个问题,上传过程不能调试进入内置的后台方法中,实际上根本原因是,组件中的Uploader类不在整个.NET解决方案的编译范围内

前台上传页面Image.html获取不到后台图片的json信息,导致上传失败。

建议

ueditor内置了一些.net处理逻辑只是为了实现基本的功能,具体项目中这些代码需要集中优化。Uploader文件必须单独提出来编译,才能完成图片上传功能

版本选择和自定义配置

ueditor提供按需下载的功能,但是这个页面有时候会屏蔽,所以还是下载完整版本,开放具体使用的功能,比较科学和安全

由于ueditor是开源编辑器,下载使用时最好记录使用的具体版本和支持语言框架。我们通常最常见的自定义配置是工具栏,而这些配置都是可以按需增减的。

这里的按需增减不仅体现在在全局配置文件中配置,还可以在使用的外围通过js操作配置文件来实现。

1 修改配置项的json数组  window.UEDITOR_CONFIG.toolbars 

2 通过     console.log(window.UEDITOR_CONFIG.toolbars[0]);工具栏配置项

3 增加具体的配置 window.UEDITOR_CONFIG.UserId=100;

通过构造函数,修改其它的配置项

var editor = new baidu.editor.ui.Editor({

pasteplain: true,

imageUrl:""

});

     记得推荐下

暂时写在这里,欢迎大家讨论,如果觉得有帮助,推荐下吧

 

目录
相关文章
|
3月前
|
JavaScript 开发工具 C++
探索 Visual Studio Code:开发者的多功能编辑器
Visual Studio Code(VS Code)是由微软开发的一款免费、开源的轻量级代码编辑器,支持 Windows、Linux 和 macOS。它内置了对多种编程语言的支持,并提供了代码高亮、智能补全、调试和 Git 集成等功能。VS Code 的强大之处还在于其丰富的插件生态系统,通过安装插件可以进一步扩展功能。此外,用户还可以通过定制设置来自定义编辑器的行为和外观,从而提升开发效率。本文将详细介绍 VS Code 的核心特性、推荐插件及定制化设置方法。
|
5月前
|
移动开发 前端开发 JavaScript
基于 HTML5 和 Canvas 开发的在线图片编辑器
基于 HTML5 和 Canvas 开发的在线图片编辑器
113 0
|
2月前
|
前端开发 开发者
大模型代码能力体验报告之贪吃蛇小游戏《二》:OpenAI-Canvas-4o篇 - 功能简洁的文本编辑器加一点提示词语法糖功能
ChatGPT 的Canvas是一款简洁的代码辅助工具,提供快速复制、版本管理、选取提问、实时编辑、代码审查、代码转写、修复错误、添加日志和注释等功能。相较于 Claude,Canvas 更加简单易用,但缺少预览功能,适合一般开发者使用。
|
4月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
4月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(4) : 使用语言生成功能[LG: Language Generation] (The Bot Framework Composer tutorials)
|
4月前
|
自然语言处理 机器人 API
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
【Azure 机器人】微软Azure Bot 编辑器系列(3) : 机器人对话流中加入帮助和取消按钮功能 (The Bot Framework Composer tutorials)
|
6月前
|
UED
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
ONLYOFFICE 桌面编辑器 8.1重磅来袭:全新功能提升您的办公效率
|
6月前
|
JavaScript 数据安全/隐私保护 开发者
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
推荐开源图片编辑器,基于fabric.js和Vue开发,适合海报、Logo等设计场景。拥有4.4K GitHub Stars,特性包括自定义字体、素材、模板,支持插件扩展、右键菜单及快捷键。提供图片滤镜、裁剪、拖拽、PSD导入、水印设置和分类素材管理。适用于非专业设计者,易于二次开发。
开源图片编辑器推荐-可用于海报编辑、商品设计、封面设计、标签设计等场景
|
5月前
|
JavaScript
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
【vue】 Tinymce 富文本编辑器 不想让上传的图片转换成base64,而是链接
362 0
|
6月前
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
93 0

热门文章

最新文章