Andy_OL
Andy_OL
采纳率0%
2017-05-18 06:41 阅读 5.3k

Ueditor在弹出窗口中无法显示

想在弹出窗口中显示百度的富文本编辑器插件ueditor;
弹出窗口用的是jQuery ui的dialog方法;
如果页面加载后直接弹出窗口的话,可以显示ueditor;
但是如果通过按钮点击弹出窗口的话,就无法显示ueditor;
ueditor应该是网页加载的时候就自动创建的,现在通过点击按钮弹出窗口如何加载?

表单代码(HTML部分):

<form id="question" title="提问">
    <p>
        <label for="title">问题名称:</label>
        <input type="text" class="text" name="title" id="title" style="width: 520px;" />
        <span class="star">*</span>
    </p>
    <p>
        <script id="myEditor" type="text/plain"></script>
    </p>
</form>

ueditor初始化代码:

<script>
    var um = UM.getEditor('myEditor');
</script>

点击按钮弹窗的代码:

 $('#question').dialog({
        autoOpen : false,
        resizable : false,
        modal : true,
        width : 600,
        height : 450,
        buttons : {
            '发布' : function(){
                $(this).submit();
            },
            '取消' : function(){
                $(this).dialog('close');
            }
        },
        closeText : '关闭',
    });

$('#question_button').button().click(function(){
        $('#question').dialog('open');
    });
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • weixin_40439254 木易三横一竖月 2017-11-02 01:49
    1. 先做一个适应jquery的插件,命名为:jquery-ueditor.js (function ($) { // 注册jQuery插件 $.fn.ueditor = function () { // 如果通过jQuery获取了多个元素,可以创建多个编辑器 for (var i = 0; i < this.length; i++) { // UEditor会自己管理各个编辑器实例,不会重复创建 UE.getEditor(this[i].id); } // 只返回第一个元素对应的编辑器实例。因此,如果要获取编辑器,使用的选择器应该只匹配一个元素,多余的元素将忽略 return UE.getEditor(this[0].id); }; })($);

    2.将ueditor.config.js, ueditor.all.js, jquery-ueditor.js 引用到HTML文件中

    <script type="text/javascript" charset="utf-8" src="uEditor/ueditor.all.js"> </script>
    <script type="text/javascript" charset="utf-8" src="js/jquery-ueditor.js"> </script>
    
    1. js文件中正常使用ueditor就可以了,$('###').ueditor();
    点赞 评论 复制链接分享
  • m0_37814544 芒果Mango来了 2020-02-25 16:20

    这个其实想要两种方式可以实现,但是要理解 UE.getEditor()这个函数做了什么,第一次的时候传入id的参数的时候,**会检测之前**有没有实例化过,有的话,就返回这个实例化的对象,否则就会新建

    第一种方式,固定id:

    UE.getEditor("id", 实例化完之后,放在一个隐藏的页面dom元素,使用的时候才去用将这个html放在想要用的地方,就是相当于一次实例化,到处可以copy;

    第二种方式,动态id(推荐)

    UE.getEditor(id, 这个id是动态的,可以用一个时间戳的方式去实现,想要用的时候就做一个时间戳的id到里面去,特别适合弹窗,里面显示,然后就可以多次弹窗,多次实例化,可能要注意一下一些字号的选择时候,遇到z-index的层级问题

    点赞 评论 复制链接分享

相关推荐