NodeJs的ueditor配置注意事项

最新推荐文章于 2021-11-22 00:13:08 发布

LongChris

最新推荐文章于 2021-11-22 00:13:08 发布

阅读量599

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/ruijieshuanglong/article/details/66478997

前端开发专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决UEditor中图片超出编辑器宽度的问题的方法，通过CSS样式限制图片最大宽度，并详细展示了如何配置服务端接口来支持UEditor的各种功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图片：
在iframe.css加img{max-width:100%}，解决上传图片超出编辑器宽度问题
在展示页面中需要在，包裹ueditor生成的html的元素中也加上：img{max-width:100%}，解决图片过大又未设置宽度超出容器宽度问题

地址：
ueditor.config.js
1：UEDITOR_HOME_URL为当前ueditor的路径地址,eg: '/assets/plugins/ueditor/'
2：serverUrl为服务端设置的ueditor接口地址,eg: '/ueditor/ue'

服务端：
1：安装ueditor包
2：静态文件夹，如：public，下添加ueditor.config.json服务端配置文件
3：添加路由处理
app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function (req, res, next) {
var ActionType = req.query.action;
if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') {
var file_url = '/img/ueditor/';
if (ActionType === 'uploadfile') {
file_url = '/file/ueditor/';
}
if (ActionType === 'uploadvideo') {
file_url = '/video/ueditor/';
}
res.ue_up(file_url);
res.setHeader('Content-Type', 'text/html');
}
else if (ActionType === 'listimage') {
var dir_url = '/images/ueditor/';
res.ue_list(dir_url);
}
else {
res.setHeader('Content-Type', 'application/json');
res.redirect('/ueditor/ueditor.config.json')
}

}));

若字数统计有误，修改源码：ueditor.all.js

getContentLength: function (ingoneHtml, tagNames) {
    var count = this.getContent(false,false,true).length;
    if (ingoneHtml) {
        tagNames = (tagNames || []).concat([ 'hr', 'img', 'iframe']);
        count = this.getContentTxt().replace(/[\t\r\n]+/g, '').length;
        for (var i = 0, ci; ci = tagNames[i++];) {
            count += this.document.getElementsByTagName(ci).length;
        }
    }

    //return count;
    return count + 260;//修改为这},