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>
时间: 2024-09-22 00:58:20

editor上传图片的相关文章

UEditor上传图片到七牛C#(后端实现)

由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七牛云 在我看来无非两种方式 1 前端表单或ajax异步提交请求到七牛服务器 ,当然此时也需要经过后端获取相应的  token (图片->七牛服务器) 2 直接后端代码请求 七牛服务器 ,官方有各版本语言的sdk 提供 ,可提高开发效率 ,降低开发难度  (图片->自己服务器->七牛服务器)

django中使用KindEditor上传图片

1.创建app01, 并在settings.py里面设置 2.创建一个视图app01/views/test,用于响应KindEditor界面显示的Get请求 from django.shortcuts import render, HttpResponse from django.http import JsonResponse import os from kindeditor_pro import settings # Create your views here. def test(req

Python Flask构建微信小程序订餐系统

call--->q-2304636824-q 第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆https://food.54php.cn(使用微信扫码二维码体验下哦横须)一起来演示一下项目.本次课程是严格按照商业系统进行架构开发的,从PC管理员端到小程序会员端,从项目搭建到部署上线,通俗易懂.... 1-1 导学--Python Flask 构建微信小程

wangEditor 文本编辑器

参考:https://www.cnblogs.com/Scholars/p/8968838.html 下载:http://www.wangeditor.com/ 前端代码: <script type="text/javascript"> //下面这两行脚本就是弹出文本框 var E = window.wangEditor var editor = new E('#editor') // 上传图片(举例) editor.customConfig.uploadImgServer

在vue cli 3脚手架里引入tinymce 5富文本编辑器

本文主要讲的是在Vue cli 3脚手架搭建的项目里如何引用Tinymce 5富文本编辑器. 请注意识别"版本号",不同版本的配置细节有所不同. 1. tinymce的安装 1. 安装tinymce-vue npm install @tinymce/tinymce-vue -S 2. 安装tinymce npm install tinymce -S 3. 下载中文语言包 tinymce提供的语言包很多,选择下载中文语言包 2. 使用方法 1. 文件操作 在项目根目录的public目录下

PHPCMS调用form类编辑器editor函数动态上传图片附件

http://w3note.com/web/49.html phpcms v9的系统类库有一个表单类,它封装了表单的一些组件,如编辑器.图片上传.时间选择器.模板选 择器等,更详细请参考form.class.php.有了这些组件,在对phpcms v9进行二次开发时,更加省时省心.我们要做的就是如何把这些工具调出来使用.调用方法总共有两种. 一.视图调用法这种方法最简单,但有局限性.在后台的模型定义字段时,选择表单的类型就会生成相应的表单类型. 二.代码调用法这种方法比较灵活,走出了内容模块的限

MVC ueditor的使用(实现上传图片功能)

之前使用ckeditor不能实现上传图片功能,只要是我不知道怎么使用啦o( ̄ε ̄*),然后就换了ueditor~~,可以实现上传图片功能啦~\(≧▽≦)/~~ 下面是我的步骤:去官网下载最新版ueditor,解压缩后放到文件目录下,如下: <script src="~/Content/ueditor/ueditor.all.js"></script> <script src="~/Content/ueditor/ueditor.all.min.j

MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦

原文:MVC使用百度开源文本编辑器UEditor实现图文并茂,字数限制,上传图片或涂鸦 文本编辑器有很多,比如ticymce和CKEditor就比较好用,但涉及到图片.文件上传,需要结合CKFinder实现,而且有些功能是收费的,即使有意付费使用, 支付也不方便.好在百度的开源文本编辑器UEditor现在也发展得不错,本篇就来体验其在MVC中的使用.需要实现如下效果: 1.上传图片2.上传涂鸦3.字数限制 4.另一视图页图文显示 首先到这里下载UEditor的.NET版本,我下载的是[1.4.3

ueditor上传图片

0.前言:我用过ckeditor,kingeditor还是感觉ueditor最好用,功能强大,经常更新.之前因为升级了struts2到2.5的了,原本的kingeditor已经不能共存,于是找到了uditor.开始比较迷茫的使用,各种百度,没有我满意的答案,明明可以很简单的使用,非要搞得别人看不懂!!!接下来看我的操作,尽量满足简单明了. 1.首先进入ueditor官网下载,这个很简单吧!这里可以下载:    http://ueditor.baidu.com/website/download.h