如何在同一个页面加载两个或多个百度的 UEditor HTML 编辑器

如何在同一个页面加载两个或多个百度的 UEditor HTML 编辑器,第1张

这个富文本编辑器实例化时候你传递的id不一样就可以了。

如题,一个页面上使用两个百度编辑器ueditor

能够保证 提交时两个数据不冲突,各管各的,初始化时后一个不会对前一个产生影响。

<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.config.js?v={:SITE_VERSION}"></script>

<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/ueditor.all.js?v={:SITE_VERSION}"></script>

<script type="text/javascript" charset="utf-8" src="__STATIC__/ueditor/lang/zh-cn/zh-cn.js?v={:SITE_VERSION}"></script>

<script type="text/javascript">

$('textarea[name="{$addons_data.name}"]').attr('id', 'editor_id_{$addons_data.name}') window.UEDITOR_HOME_URL = "__STATIC__/ueditor/" window.UEDITOR_CONFIG.initialFrameHeight = parseInt('{$addons_config.editor_height}') window.UEDITOR_CONFIG.scaleEnabled = <eq name="addons_config.editor_resize_type" value="1">true<else />false</eq> window.UEDITOR_CONFIG.imageUrl = '{:addons_url("EditorForAdmin://Upload/ue_upimg")}' window.UEDITOR_CONFIG.imagePath = '' window.UEDITOR_CONFIG.imageFieldName = 'imgFile' //在这里扫描图片

window.UEDITOR_CONFIG.imageManagerUrl='{:addons_url("EditorForAdmin://Upload/ue_mgimg")}'//图片在线管理的处理地址

window.UEDITOR_CONFIG.imageManagerPath=''

var imageEditor{$addons_data.id} = UE.getEditor('editor_id_{$addons_data.name}') //添加一下判断是否是单个按钮管理图片 需要执行一下代码

<if condition="isset($addons_data['btnClassName'])" >

imageEditor{$addons_data.id}.ready(function () { //设置编辑器不可用

imageEditor{$addons_data.id}.setDisabled() //隐藏编辑器,因为不会用到这个编辑器实例,所以要隐藏

imageEditor{$addons_data.id}.hide() //侦听图片上传

imageEditor{$addons_data.id}.addListener('beforeInsertImage', function (t, arg) { //将地址赋值给相应的input,只去第一张图片的路径

//console.log(t)

//console.log(arg)

<if condition="empty($addons_data['is_mult'])" >//单张情况

$(".{$addons_data.name}_preview").html("")var imghtml = $("<img src="+arg[0].src+" width='100' height='100'/>")

$(".{$addons_data.name}_preview").append(imghtml)//储存路劲

//单张图片存储图片id

$("#editor_id_{$addons_data.name}").text(arg[0].id)//图片预览

$(".{$addons_data.name}_preview").show()//微信预览

$('.weixin-cover-pic').attr('src',arg[0].src)//console.log(arg)

<else /> //多张情况

var srcs = "" var srcIds = ""//$(".{$addons_data.name}_preview").html("")

for(var i=0i<arg.lengthi++){ if(i==arg.length-1){

srcs = srcs + arg[i].src

srcIds = arg[i].id

}else{

srcs = srcs + arg[i].src+"|"

srcIds = srcIds + arg[i].id+","

}var imghtml = $("<img src="+arg[i].src+" width='100' height='100'/>")

$(".{$addons_data.name}_preview").append(imghtml) //console.log(arg[i].src)

}

$(".{$addons_data.name}_preview").append(imghtml)

$(".{$addons_data.name}_preview").show() var oldIds = $("#editor_id_{$addons_data.name}").text() //多张图片存储一逗号分隔的id串

$("#editor_id_{$addons_data.name}").text(oldIds+","+srcIds)</if>

}) //增加按钮className

$('.{$addons_data.btnClassName}').bind('click',function(){var uploadImage = imageEditor{$addons_data.id}.getDialog("insertimage")

uploadImage.open()

})

})

这是源代码了,请问各位,应该如何该

1、w3schools:w3schools是一个免费的在线编程学习网站,它提供了很多关于HTML、CSS、JavaScript、SQL、PHP、Python、jQuery等的入门教程和参考手册,非常适合初学者学习。

2、Codecademy:Codecademy是一个在线编程学习网站,提供了很多关于HTML、CSS、JavaScript、jQuery、PHP、Python等的入门教程和实践练习,非常适合初学者学习。

3、Treehouse:Treehouse是一个在线编程学习网站,提供了很多关于HTML、CSS、JavaScript、jQuery、PHP、Python等的入门教程和实践练习,非常适合初学者学习。

4、Code Avengers:Code Avengers是一个在线编程学习网站,提供了很多关于HTML、CSS、JavaScript、jQuery、PHP、Python等的入门教程和实践练习,非常适合初学者学习。

5、CodePen:CodePen是一个在线编程编辑器,支持HTML、CSS、JavaScript、jQuery等语言,非常适合初学者练习和实践。

这个文档里有详细的说明

http://ueditor.baidu.com/doc/#UE.Editor

//editor 是编辑器实例

 editor.execCommand( 'inserthtml', yourhtml)


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6272622.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存