ueditor集成135编辑器并将外部图片地址自动转成自己的业务域名地址

发布于: 2023-11-07 更新于: 2024-11-06 分类于: 阅读次数:

一：介绍

ueditor已经停止维护，可以使用ueditor plus

1
2
3

常用的富文本编辑器有百度符文本ueditor，kingeditor等，只能实现简单的功能，
针对要排版的东西很难操作，所以这里介绍使用ueditor集成135编辑器的插件，代替
原本的富文本编辑器

二：最终目的

ueditor原关于图片，视频等的功能实现自定义上传到文件服务
集成135编辑器插件
实现135编辑器的外部地址自动上传到自己的文件服务器

三：前端调整

前端改造后的源码

3.1 后台自定义server

1	需要实现原本ueditor demo中的jsp的接口，下面是入口的地址，详情代码联系作者。

3.2 修改ueditor.config.js

1 2	1.修改SERVER_URL为自己新写的server后台地址 2.设置catchRemoteImageEnable=true

3.3 修改编辑器index.html

下载插件

将插件的文件下载到项目ueditor对应的目录里，并将135editor.js加载到自己的网页里(放在ueditor.all.min.js之后)
下载地址： 
	- http://www.135editor.com/js/ueditor/plugins/135editor.js
	- https://static.tohours.com/jren/2024/1106/135editor.js

修改配置文件

在ueditor.config.js中toolbars项里增加一个135editor菜单项
{
    "toolbars":[
        [
            "bold",
            "italic",
            "underline",
            "fontborder",
            "strikethrough",
            "135editor",
            "rowspacingtop",
            "rowspacingbottom",
            "lineheight",
            "removeformat",
            "formatmatch",
            "autotypeset",
            "blockquote",
            "pasteplain",
            "|",
            "forecolor",
            "backcolor",
            "insertorderedlist",
            "insertunorderedlist",
            "selectall",
            "cleardoc",
            "|",
            "superscript",
            "subscript"
        ]
    ]
}

增加CSS代码

在自己的项目调用编辑器的网页里中增加一段CSS
<style>
.edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{
    background-image: url("https://static.135editor.com/img/icons/editor-135-icon.png") !important;
    background-size: 85%;
    background-position: center;
    background-repeat: no-repeat;
}
</style>
图片地址也可以换成：https://static.tohours.com/jren/2024/1106/editor-135-icon.png

四：后端调整

1.实现自定义server
2.把原本百度ueditor的源码包提供的后台demo中自己做更新
3.注意后端返回值跨域问题，要不然前端会有问题
4.目前由于百度的停止更新，好多东西无法下载，有需要请联系作者

五：演示效果

*************感谢您的阅读*************