Ueditor单独调用上传功能

<script type="text/plain" id="myEditor">
</script>

<script type="text/plain" id="upload_ue">
</script>
<script type="text/javascript">
     var editor = UE.getEditor(‘myEditor‘, {
         initialFrameHeight: 500,
     });

</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").val(arg[0].src);
             //图片预览
             $("#preview").val(arg[0].src);
         })
         //侦听文件上传,取上传文件列表中第一个上传的文件的路径
         _editor.addListener(‘afterUpfile‘, function (t, arg) {
             console.log(arg);
             $("#file").val(arg.url);
         })
     });
     //弹出图片上传的对话框
     function upImage() {
         var myImage = _editor.getDialog("insertimage");
         myImage.open();
     }
     //弹出文件上传的对话框
     function upFiles() {
         var myFiles = _editor.getDialog("attachment");
         myFiles.open();
     }
</script>
<div class="form-group">
    <input type="text" id="picture" name="cover" /><a href="javascript:void(0);" onclick="upImage();">上传图片</a>

</div>
<div class="form-group">

    <input type="text" id="file" /><a href="javascript:void(0);" onclick="upFiles();">上传文件</a>
</div>

然后找到ueditor.all.js文件

找到如下定义
// plugins/insertfile.js
/**
 * 插入附件
 */
UE.plugin.register(‘insertfile‘, function (){

再找到添加红色代码行
me.fireEvent(‘afterUpfile‘, item);
me.execCommand(‘insertHtml‘, html);

ueditor版本1.4.3

时间: 2024-10-20 11:13:47

Ueditor单独调用上传功能的相关文章

ueditor单独调用上传附件和图片的功能

javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以像编辑word文档一样,方便地编辑网站中文章,常用于内容管理系统和博客系统等. 百度Ueditor富文本就是其中之一,个人觉得虽然体积大点,不兼容移动端外,其他功能都非常强大,特别是里面的多图上传! 当有些个性化页面需求时,难免会对她一些优化,已让她适合自己的内容,比如单独调用上传图片实现类似于以下

在SAE上使用Ueditor的图片上传功能

SAE上是没有目录读写权限的,所以要在SAE使用Ueditor的图片上传功能需要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个domain. 二.修改Ueditor代码 Ueditor处理上传文件的方法在DjangoUeditor/jviews.py中,上传图片的请求是由下面函数处理的 #上传附件 @csrf_exempt def UploadFile(request,uploadtype,uploadpath):     '''

单独调用Ueditor的图片上传功能

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <script src="/scripts/jquery-1.8.3.min.js"></script> 6 <script src="/ueditor/ueditor.config.js" type="text/javascript">&l

ueditor 单独图片上传 转载

<body> <script type="text/javascript"> //这个是图片上传的,网上还有附件上传的 (function($) { var image = { editor: null, init: function(editorid, keyid) { var _editor = this.getEditor(editorid); _editor.ready(function() { //设置编辑器不可用 _editor.setDisable

在jsp页面中添加富文本编译器(ueditor)+ 图片上传功能

一次老大让我把文本的编辑区域加一个富文本编译器,于是马上下载了一个kindEditor来试试,但后来老大推荐说百度的ueditor编译器不错,于是我便怀着扩展知识,又学到一个新东西的心理下载了百度的ueidtor编译器,整合到项目中感觉确实不错,今天就和大家分享下这个富文本编译器的使用-- 第一步:首先下载ueditor编译器,地址:http://ueditor.baidu.com/website/ 下载完解压之后就这个: 第二步:我会把文件名utf-8-jsp这个文件名改为ueditor,然后

ueditor单独图片和附件上传功能

首要要载入ueditor的2个js <script src="../ueditor/ueditor.config.js" type="text/javascript"></script> <script src="../ueditor/ueditor.all.js" type="text/javascript"></script> <table> <tr>

ueditor(1.4.3.2)提取单图上传功能

参照网络上流行的提取单图上传功能的方法并加以修改,主要通过创建提取的通用上传图片的js文件(custom.js)和简单修改UEditor的ueditor.all.js文件. 1)在自定义js custom.js中添加方法 var _editor = UE.getEditor('editor_img', {toolbars: [['simpleupload']]}); _editor.ready(function () { //设置编辑器不可用 //_editor.setDisabled(); 这

ASP.net core 使用UEditor.Core 实现 ueditor 上传功能

效果图: UEditor下载地址 https://ueditor.baidu.com/website/download.html ASP.net core 使用UEditor.Core 实现 ueditor 上传功能 https://www.cnblogs.com/WNpursue/archive/2019/02/20/ASPNetCore-use-UEditor-Core-share.html 原文地址:https://www.cnblogs.com/yechangzhong-82621779

百度Ueditor多图片上传控件

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue