qq1696518615
୧((〃•̀ꇴ•〃))૭⁺✧
2021-01-18 21:11

Layui+TinyMCE编辑回显第一次能回显,关闭弹出层后再次编辑就什么都没有了

  • javascript
  • jquery
       //打开修改的弹出层
        function openUpdateLayer(data){
            mainIndex=layer.open({
                type:1,
                content:$("#addOrUpdateDiv"),
                area:['800px','600px'],
                title:'修改',
                success:function(){
                    $("#dataFrm")[0].reset();
                    //装载新的数据
                    form.val("dataFrm",data);
                    $('[name=audit]').each(function (i,item) {
                        if ($(item).val()==data.audit){
                            //更改选中值
                            $(item).prop('checked', true);
                        }
                    });
                    // $('#mytextarea').html(data.content);
                    url="/news/updateNewsById";
                    $.get("/newsType/loadAllTypeNameForSelect",function(res){
                        var redata=res.data;
                        var dom=$("#type");
                        var html='<option value="0">所有类别</option>'
                        $.each(redata,function(index,item){
                            if(data.type===item.id){
                                html+='<option value="'+item.id+'" selected>'+item.typeName+'</option>'
                            }else{
                                html+='<option value="'+item.id+'">'+item.typeName+'</option>'
                            }
                        });
                        dom.html(html);
                        form.render("select");
                    });

                    //初始化编辑器
                    init();
                    $(".thumbImg").attr("src",'/file/showImageByPath?path='+data.image);
                }
            });
            layer.full(mainIndex);            //实现全屏弹出。
        }

init()

        function init(){
            tinymce.init({
                selector: '#mytextarea',//绑定渲染区
                height: 600,//编辑器的高度
                plugins: 'paste importcss code table advlist fullscreen imagetools  textcolor colorpicker hr  autolink link image lists preview media wordcount emoticons',//使用的插件
                toolbar: 'styleselect |  formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | image  media | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | preview removeformat  hr | link | undo redo | emoticons | fullscreen',
                statusbar: false,//隐藏编辑器最下方版权链接
                language: 'zh_CN',//汉化
                convert_urls: false,//不自动处理url,插入什么就是什么.不会自动转换相对或绝对路径
                // relative_urls : true,
                images_upload_url: '/file/uploadImg',//指定上传图片的后端处理程序的URL
                images_upload_credentials: true,
                image_dimensions: false,
                image_class_list: [
                    {title: '无', value: ''},
                    {title: '预览', value: 'preview'},
                ],
                // images_upload_base_path: '/',
                forced_root_block: 'p',
                force_p_newlines: true,
                importcss_append: true,
                content_style: `
    *                         { padding:0; margin:0; }
    html, body                { height:100%; }
    img                       { max-width:100%; display:block;height:auto; }
    a                         { text-decoration: none; }
    iframe                    { width: 100%; }
    p                         { line-height:1.6; margin: 0px; }
    table                     { word-wrap:break-word; word-break:break-all; max-width:100%; border:none; border-color:#999; }
    .mce-object-iframe        { width:100%; box-sizing:border-box; margin:0; padding:0; }
    ul,ol                     { list-style-position:inside; }
  `,
                insert_button_items: 'image link | inserttable',
                // CONFIG: Paste
                paste_retain_style_properties: 'all',
                paste_word_valid_elements: '*[*]',        // word需要它
                paste_data_images: true,                  // 粘贴的同时能把内容里的图片自动上传
                paste_convert_word_fake_lists: false,     // 插入word文档需要该属性
                paste_webkit_styles: 'all',
                paste_merge_formats: true,
                nonbreaking_force_tab: false,
                paste_auto_cleanup_on_paste: false,

                // CONFIG: Font
                fontsize_formats: '10px 11px 12px 14px 16px 18px 20px 24px',

                // CONFIG: StyleSelect
                style_formats: [
                    {
                        title: '首行缩进',
                        block: 'p',
                        styles: {'text-indent': '2em'}
                    },
                    {
                        title: '行高',
                        items: [
                            {title: '1', styles: {'line-height': '1'}, inline: 'span'},
                            {title: '1.5', styles: {'line-height': '1.5'}, inline: 'span'},
                            {title: '2', styles: {'line-height': '2'}, inline: 'span'},
                            {title: '2.5', styles: {'line-height': '2.5'}, inline: 'span'},
                            {title: '3', styles: {'line-height': '3'}, inline: 'span'}
                        ]
                    }
                ],
                // Tab
                tabfocus_elements: ':prev,:next',
                object_resizing: true,

                // Image
                imagetools_toolbar: 'rotateleft rotateright | flipv fliph | editimage imageoptions',
                file_picker_types: 'media',
                media_live_embeds: true,
                //be used to add custom file picker to those dialogs that have it.
                file_picker_callback: function (cb, value, meta) {
                    if (meta.filetype == 'media') {
                        //创建一个隐藏的type=file的文件选择input
                        let input = document.createElement('input');
                        input.setAttribute('type', 'file');
                        input.onchange = function(){
                            let file = this.files[0];//只选取第一个文件。如果要选取全部,后面注意做修改
                            let xhr, formData;
                            xhr = new XMLHttpRequest();
                            xhr.open('POST', '/file/uploadImg');//自定义文件上传
                            xhr.withCredentials = true;
                            xhr.upload.onprogress = function (e) {
                                // 进度(e.loaded / e.total * 100)
                            };
                            xhr.onerror = function () {
                                console.log(xhr.status);
                                return;
                            };
                            xhr.onload = function () {
                                let json;
                                if (xhr.status < 200 || xhr.status >= 300) {
                                    console.log('HTTP 错误: ' + xhr.status);
                                    return;
                                }
                                json = JSON.parse(xhr.responseText);
                                console.log(json)
                                //接口返回的文件保存地址
                                let mediaLocation=json.location;
                                //cb()回调函数,将mediaLocation显示在弹框输入框中
                                cb(mediaLocation, { title: file.name });

                            };
                            formData = new FormData();
                            //假设接口接收参数为file,值为选中的文件
                            formData.append('file', file);
                            //正式使用将下面被注释的内容恢复
                            xhr.send(formData);
                        };
                        //触发点击
                        input.click();
                    }
                }
            });
        }

请问各位老哥是什么原因?

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

0条回答

为你推荐

换一换