0
点赞
收藏
分享

微信扫一扫

百度富文本编辑器手机端预览插件开发

骨灰级搬砖工 2022-02-24 阅读 129
编辑器

在百度富文本编辑器编辑的时候担心在手机端打开格式乱掉,编辑提交再去手机端刷新查看比较麻烦,希望在编辑器可以直接查看,效果如下:

 代码修改如下:

文件一、路径:ueditor\themes\default\css\ueditor.css

找到文件,在最下面加上如下代码:

/*手机预览样式*/

.edui-default .edui-for-previewmobile.edui-icon{

    background-image: url("../images/previewMobile.png");

}

文件二、路径:public\plugins\Ueditor\ueditor.config.js

 

1、在中toolbars里加一个按钮 previewmobile

toolbars: [

            [

                'source', //源代码

                'anchor', //锚点

                'undo', //撤销

                'redo', //重做

                'bold', //加粗

                'indent', //首行缩进

                'snapscreen', //截图

                'italic', //斜体

                'underline', //下划线

                'strikethrough', //删除线

                'subscript', //下标

                'fontborder', //字符边框

                'superscript', //上标

                'formatmatch', //格式刷

                'blockquote', //引用

                'pasteplain', //纯文本粘贴模式

                'selectall', //全选

                'print', //打印

                'preview', //预览

                'horizontal', //分隔线

                'removeformat', //清除格式

                'time', //时间

                'date', //日期

                'unlink', //取消链接

                'insertrow', //前插入行

                'insertcol', //前插入列

                'mergeright', //右合并单元格

                'mergedown', //下合并单元格

                'deleterow', //删除行

                'deletecol', //删除列

                'splittorows', //拆分成行

                'splittocols', //拆分成列

                'splittocells', //完全拆分单元格

                'deletecaption', //删除表格标题

                'inserttitle', //插入标题

                'mergecells', //合并多个单元格

                'deletetable', //删除表格

                'cleardoc', //清空文档

                'insertparagraphbeforetable', //"表格前插入行"

                'insertcode', //代码语言

                'fontfamily', //字体

                'fontsize', //字号

                'paragraph', //段落格式

                'simpleupload', //单图上传

                'insertimage', //多图上传

                'edittable', //表格属性

                'edittd', //单元格属性

                'link', //超链接

                'emotion', //表情

                'spechars', //特殊字符

                'searchreplace', //查询替换

//                'map', //Baidu地图

//                'gmap', //Google地图

                'insertvideo', //视频

                'help', //帮助

                'justifyleft', //居左对齐

                'justifyright', //居右对齐

                'justifycenter', //居中对齐

                'justifyjustify', //两端对齐

                'forecolor', //字体颜色

                'backcolor', //背景色

                'insertorderedlist', //有序列表

                'insertunorderedlist', //无序列表

                'fullscreen', //全屏

                'directionalityltr', //从左向右输入

                'directionalityrtl', //从右向左输入

                'rowspacingtop', //段前距

                'rowspacingbottom', //段后距

//                'pagebreak', //分页

                'insertframe', //插入Iframe

                'imagenone', //默认

                'imageleft', //左浮动

                'imageright', //右浮动

                'attachment', //附件

                'imagecenter', //居中

//                'wordimage', //图片转存

                'lineheight', //行间距

                'edittip ', //编辑提示

                'customstyle', //自定义标题

                'autotypeset', //自动排版

//                'webapp', //百度应用

                'touppercase', //字母大写

                'tolowercase', //字母小写

                'background', //背景

                'template', //模板

                'scrawl', //涂鸦

                'music', //音乐

                'inserttable', //插入表格

                'drafts', // 从草稿箱加载

                'charts', // 图表

                'previewmobile' // 预览

            ]]

2、添加中文说明(鼠标放上去中文显示)

labelMap:{

      'previewmobile':'手机预览'

}

文件三、路径:public\plugins\Ueditor\ueditor.all.js

1、中 btnCmds 加入 previewmobile

var btnCmds = ['undo', 'redo', 'formatmatch',
    'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',
    'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',
    'blockquote', 'pasteplain', 'pagebreak',
    'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',
    'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',
    'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts','previewmobile'];

 2、在 getEditor和 ui.Editor 中添加创建遮罩层代码

 

// 自定义代码begin --- 在这里添加预览弹窗
var proUrl =  __root_dir__ ;// 获得项目路径 ,注:proUrl 替换为自己的项目路径(http://ip:prot//项目名);
var preDocu = document.getElementById("previewmobile-div");
if (preDocu == null || typeof(preDocu) == "undefined" || preDocu == 0 ) {
    var previewmobile = document.createElement('div');
    previewmobile.id = "previewmobile-div";
    previewmobile.style.cssText = 'display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;';
    previewmobile.innerHTML = '<div style="box-sizing:border-box;position:absolute;top:50%;left: 50%;transform: translate(-50%, -50%);padding: 75px 22px 93px 19px;width: 450px;height: 700px;background: url('+proUrl+'/public/plugins/Ueditor/themes/default/images/iphone-bg.png) no-repeat;background-size: 76%">' +
        '<iframe id="previewmobile" style="width:74.3%;height:100%;" src="'+proUrl+'/public/plugins/Ueditor/dialogs/previewmobile/previewmobile.html"></iframe>' +
        '</div>';
    document.body.appendChild(previewmobile);
    document.getElementById("previewmobile-div").addEventListener("click", function(e) {
        document.getElementById("previewmobile-div").style.display = "none";
    });
}
// 自定义代码end

var proUrl =  __root_dir__ ;// 获得项目路径 ,注:proUrl 替换为自己的项目路径(http://ip:prot//项目名);
var preDocu = document.getElementById("previewmobile-div");
if (preDocu == null || typeof(preDocu) == "undefined" || preDocu == 0 ) {
    var previewmobile = document.createElement('div'); // 报错提示
    previewmobile.id = "previewmobile-div";
    previewmobile.style.cssText = 'display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color: rgba(33,33,33,0.6); z-index: 999;';
    previewmobile.innerHTML = '<div style="box-sizing:border-box;position:absolute;top:50%;left: 100%;transform: translate(-50%, -50%);padding: 75px 22px 93px 19px;width: 450px;height: 700px;background: url('+proUrl+'/public/plugins/Ueditor/themes/default/images/iphone-bg.png) no-repeat;background-size: 76%"><iframe id="previewmobile" style="width:74.3%;height:72%;" src="'+proUrl+'/public/plugins/Ueditor/dialogs/previewmobile/previewmobile.html"></iframe></div>';
    document.body.appendChild(previewmobile);
    document.getElementById("previewmobile-div").addEventListener("click", function(e) {
        document.getElementById("previewmobile-div").style.display = "none";
    });
}

 3、注册预览按钮(previewmobile)的点击事件

UE.commands['previewmobile'] = {
    execCommand : function(){
        var editor = this;
        document.getElementById("previewmobile-div").style.display = 'block';
        var ifr_document = document.getElementById("previewmobile").contentWindow; // 获取内联框架
        if(ifr_document){
            var ifr_content = ifr_document.document.getElementById("phone_preview_div");
            ifr_content.innerHTML = editor.getContent() == null ? "" : editor.getContent(); // 富文本编辑器内容填充
        }
        return true;
    }
};

 

举报

相关推荐

0 条评论