百度富文本编辑器的多图上传单独放在项目

这里写图片描述
在线搜索的功能不是很好用,有待改进!需要改ueditor/php/config.json文件的路径

"imagePathFormat": "/upload/{filename}",/* 上传保存路径,可以自定义保存路径和文件名格式 */
                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
                                /* {time} 会替换成时间戳 */
                                /* {yyyy} 会替换成四位年份 */
                                /* {yy} 会替换成两位年份 */
                                /* {mm} 会替换成两位月份 */
                                /* {dd} 会替换成两位日期 */
                                /* {hh} 会替换成两位小时 */
                                /* {ii} 会替换成两位分钟 */
                                /* {ss} 会替换成两位秒 */
                                /* 非法字符 \ : * ? " < > | */
                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */
"imageManagerActionName": "listimage", /* 执行图片管理的action名称 */
引入富文本编辑器的js
<script type="text/javascript" src="/dist/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/dist/ueditor/ueditor.all.min.js"></script>

<script type="text/javascript" src="/dist/ueditor/lang/zh-cn/zh-cn.js"></script>
<img src="" id="preview" style='width:100px;height:100px;'>

                                        href="javascript:void(0);" onclick="upImage();">点击上传</a>
                            <input class='hidpic' name='hidpic' type="hidden" value=''>

                            <script type="text/javascript">

var _editor;
$(function() {
    if($('#preview').attr('src','')){
        $('#preview').css('display','none');
    }

//重新实例化一个编辑器,防止在上面的editor编辑器中显示上传的图片或者文件
_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').css('display','inline-block');
$("#preview").attr("src", arg[0].src);
$('.hidpic').attr("value", arg[0].src);
// alert($('.hidpic').attr("value"))
})
//侦听文件上传,取上传文件列表中第一个上传的文件的路径
_editor.addListener('afterUpfile', function (t, arg) {
$("#file").attr("value", _editor.options.filePath + arg[0].url);
})
});
}); 
//弹出图片上传的对话框
function upImage() {
var myImage = _editor.getDialog("insertimage");
myImage.open();
}
//弹出文件上传的对话框
function upFiles() {
var myFiles = _editor.getDialog("attachment");
myFiles.open();
}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值