Ueditor试炼之修改上传图片功能

最新推荐文章于 2024-06-26 13:30:13 发布

杨小事er

最新推荐文章于 2024-06-26 13:30:13 发布

阅读量1.5k

点赞数

文章标签：业务向日常积累

本文链接：https://blog.csdn.net/qq_25936689/article/details/79475865

版权

本文介绍了如何针对Ueditor的默认图片上传功能进行改造，以适应前后端分离的项目需求。通过修改ueditor源码，调整onClick方法，并结合Angular框架调用上传图片的service，实现了自定义的图片插入功能。同时，取消了原有的上传图片禁用逻辑。

摘要由CSDN通过智能技术生成

富文本编辑器真是一个老生常谈的话题，对于我们这种小公司，没有办法自己去重新写一个，也没必要去造这种轮子，所以就挑了一个ueditor来放进项目里。

ueditor自带的上传图片功能是和后端耦合在一起的，对于各家公司的项目有前后分离的情况，并不适用，所以就只能把ueditor的源码改掉。

下面就介绍下修改上传图片的步骤。

首先，我们要找到

editorui["simpleupload"]

这个方法，方法里定义了ui变量，也就是toolbar里面上传图片的按钮，是一个editorui.Button实例。

var name = 'simpleupload',
    ui = new editorui.Button({
         className:'edui-for-' + name,
         title:editor.options.labelMap[name] || editor.getLang("labelMap." + name) || '',
         onclick: function () {
            console.log(123)
            var ImageUploadService = angular.element(document.body).injector().get('ImageUploadService')
            // 一些操作
            var embed = '<img src="***">';
            editor.execC