`
liulanghan110
  • 浏览: 1075571 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

editor上传图片

阅读更多
<script type="text/plain" id="upload_ue"></script>
<script type="text/javascript">
//重新实例化一个编辑器,防止在上面的editor编辑器中显示上传的图片或者文件
var _editor = UE.getEditor('upload_ue');     
	_editor.ready(function () {
   //设置编辑器不可用
  //  _editor.setDisabled();
   //隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏
   _editor.hide();
   //侦听图片上传
  _editor.addListener('beforeInsertImage', function (t, arg) {
        //将地址赋值给相应的input,只去第一张图片的路径
       $("#picture").attr("value", arg[0].src);
       //图片预览
       $("#preview").attr("src", arg[0].src);
   })

});
//弹出图片上传的对话框
function upImage() {
   var myImage = _editor.getDialog("insertimage");
    myImage.open();
}
</script>
<div class="controls">
			<input type="hidden" id="picture" name="picture">
			<img src="/img/blank.jpg" style="width:100px;height:100px;" id="preview" /><a href="javascript:void(0);" onclick="upImage();">上传图片</a>
			<span class="help-inline"></span>
</div>

 

分享到:
评论

相关推荐

    vue-quill-editor 自定义图片上传至OSS -> 相关文件

    - 图片大小限制:根据项目需求,可能需要限制上传图片的大小,防止过大文件导致性能问题。 - 错误处理:确保前端和后端都有良好的错误处理机制,以应对网络异常、权限问题等可能出现的问题。 通过以上步骤,我们...

    vue-quill-editor视频上传,图片上传到服务器模块,用video标签替换iframe

    quill视频上传,图片上传到服务器模块,用video标签替换iframe 安装教程 cnpm i vue-quill-editor cnpm i quill cnpm i quill-video-image-module 使用说明 import 'quill/dist/quill.core.css' // import styles...

    editor.md编辑器demo(含本地图片上传)

    **图片上传** 是editor.md的一个重要特性,尤其对于本地图片处理。在传统的Markdown编辑器中,用户通常需要先将图片上传到某个服务器或云存储,再获取图片URL并手动插入到Markdown文本中。而editor.md支持直接在编辑...

    vue-quill-editor实现图片上传功能

    Vue-Quill-Editor 实现图片上传功能详解 本文主要为大家详细介绍了 Vue-Quill-Editor 实现图片上传功能的方法和步骤,包括如何将图片上传到服务器、如何将图片 URL 插入到文本中、如何注册自定义的图片处理函数等。...

    VueQuillEditor富文本上传图片(非base64)

    本篇文章将介绍vue-quill-editor上传图片的那些事,通常来说,我们数据库内都是保存图片路径的,所以上传完图片之后,要回传一个路径给前端,这才是完整的上传步骤。 第一步:上传图片,第二步:保存到服务器,并且...

    百度控件ueditor图片上传到远程服务器解决方案

    百度控件ueditor图片上传到远程服务器解决方案 一、搭建ueditor环境 二、修改源码 三、重新编译源码 四、使用说明

    JS开源编辑器 Kissy Editor

    开发者可以利用其提供的API和文档,轻松开发出满足特定需求的插件,如图片上传、表格编辑、代码高亮等。 3. **兼容性**:Kissy Editor对多种浏览器的广泛支持是其一大亮点。无论是现代浏览器还是较老的IE版本,都能...

    解决IE11使用kind editor不能弹出上传图片框

    然而,在使用过程中可能会遇到在IE11环境下无法正常弹出上传图片、设置字体大小或颜色等对话框的情况。本文将详细分析该问题的原因,并提供具体的解决方案。 #### 二、问题分析 **1. 导致问题的原因:** - **用户...

    解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题

    vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中,如果图片较多,篇幅太长,就会比较烦恼,接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,...

    wangEditor上传图片 demo

    【wangEditor上传图片 demo】是一个基于wangEditor富文本编辑器的图片上传功能示例,它展示了如何在前端使用wangEditor并结合后端Java代码实现图片的上传与展示。这个demo适用于那些想要在Web应用中集成图片上传功能...

    Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

    主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...

    vuequilleditor的增强模块提供图片上传复制插入拖拽插入

    1. **图片上传**:在默认情况下,Vue Quill Editor并不直接支持图片上传。但通过增强模块,我们可以集成图片上传功能。通常,这需要编写一个处理图片上传的后端接口,接收前端上传的图片数据,并返回上传成功后的...

    vue-quill-editor 自定义工具栏和自定义图片上传路径操作

    总结来说,通过自定义Vue-quill-editor的工具栏和图片上传策略,我们可以更好地满足项目的特定需求,提高用户体验,同时也更高效地管理服务器资源。在实际操作中,开发者需要根据自身项目的需求调整工具栏配置和上传...

    TinyMCE自定义上传图片

    在描述中提到的"自定义上传图片插件",可能是对TinyMCE原有图片上传功能的增强或替换。这个插件可能包含了以下关键部分: 1. **上传接口**:自定义插件需要实现一个图片上传接口,通常是通过发送HTTP请求到服务器端...

    ueditor基本配置、图片上传配置、文件上传配置

    3. **配置`editor_config.js`**:设置`imageUrl`指向图片上传处理页面(如`imageUp.jsp`),并配置`imagePath`,指定图片保存的相对路径。 4. **处理上传**:在`imageUp.jsp`中,处理请求并使用`Uploader`类处理...

    Ueditor上传图片+图片回显+图片在线管理配置说明

    ### 一、上传图片配置 在 Ueditor 中,图片上传功能首先需要在 `ueditor.config.js` 配置文件中进行设置。`POI` 应替换为你的项目名称,`ueditor` 是 Ueditor 插件所在的文件夹。配置大致如下: ```javascript var...

    kindeditor图片上传携带token字段

    本文将详细讲解如何在KindEditor中实现图片上传时携带token字段,以确保数据的安全性和完整性。 首先,理解“token”在Web开发中的作用至关重要。Token通常用于验证客户端请求的合法性,防止跨站请求伪造(Cross-...

    文件上传图片码 editor 解释器

    "文件上传图片码 editor 解释器"这个主题主要涉及到的是在IT行业中,特别是软件开发和文本编辑领域的一些关键概念和技术。这里的"editor"通常指的是文本编辑器,它是一种用于创建、查看和修改文本文件的软件工具,...

Global site tag (gtag.js) - Google Analytics