umeditor踩坑

元夕 元夕     2022-11-09     595

关键词:

umeditor 是百度富文本编辑器ueditor的mini版本,它属于轻量级,功能也还好,优点是加载快,貌似只有183k。但是这个维护做的确实不怎么样,

或者压根没人维护,github提了许多issures基本没人解决。

下面说说用的过程主要遇到的坑

1.用requireJs加载的时候加载顺序问题

首先umeditor.js要通过define的方式去写

define("umeditor", ["umeditor.config", "jquery"], function() 
    /*!
     * UEditor Mini版本
     * version: 1.2.2
     * build: Wed Mar 19 2014 17:14:25 GMT+0800 (中国标准时间)
     */

    (function($)

        UMEDITOR_CONFIG = window.UMEDITOR_CONFIG || ;
        window.UM = 
            plugins : ,

            commands : ,

            I18N : ,

            version : "1.2.2"
        ;

....................................

)

umeditor.config.js配置根路径

 /**
     * 编辑器资源文件根路径。它所表示的含义是:以编辑器实例化页面为当前路径,指向编辑器资源文件(即dialog等文件夹)的路径。
     * 鉴于很多同学在使用编辑器的时候出现的种种路径问题,此处强烈建议大家使用"相对于网站根目录的相对路径"进行配置。
     * "相对于网站根目录的相对路径"也就是以斜杠开头的形如"/myProject/umeditor/"这样的路径。
     * 如果站点中有多个不在同一层级的页面需要实例化编辑器,且引用了同一UEditor的时候,此处的URL可能不适用于每个页面的编辑器。
     * 因此,UEditor提供了针对不同页面的编辑器可单独配置的根路径,具体来说,在需要实例化编辑器的页面最顶部写上如下代码即可。当然,需要令此处的URL等于对应的配置。
     * window.UMEDITOR_HOME_URL = "/xxxx/xxxx/";
     */
    var curWwwPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    var localhostPath = curWwwPath.substring(0, pos);
    //文件所在的绝对路径 访问静态资源文件的时候使用此路径
    window.UMEDITOR_HOME_URL=localhostPath+"/core/util/umeditor/";

 但是打包过后会报错,这里可以把i18n和其他东西加到umeditor.js里面,如果一些东西用不到例如link,video ,img,map可以注释掉

然后添加依赖

 paths: 
        //必须要的
        "umeditor": "../../../../../core/util/umeditor/umeditor",
        "dialog": "../../../../../core/service/dialog",
        "umeditor.config": "../../../../../core/util/umeditor/umeditor.config"
    ,
 shim: 
        //这一部分是公共插件 是必须要加载的或者使用频率非常高的插件
        "umeditor":
            deps: ["umeditor.config", "jquery"],
        
    

 2. 初始化,第二次进来没有了

 UM.delEditor(‘editor‘);
  $scope.um = UM.getEditor(‘editor‘);

  这种是因为在调用UE.getEditor(‘_editor’)初始化UEditor时,先从放置编辑器的容器instances中获取,没有实例才实例化一个Editor。

3.弹窗的时候编辑器没有渲染

解决办法:当弹窗弹出时,加一个定时器延迟加载编辑器

 

 

 

 

 

  

在angular项目下使用umeditor

  Umeditor是百度旗下的开源富文本编辑器项目,目前用于百度贴吧,是ueditor的迷你版本。  公司的Angular后台管理项目需要上传一些新闻,用Umeditor十分适合。但是目前官方只提供Jsp,Asp,Php和.net版本,也就是说只支持一般... 查看详情

umeditor上传图片配置

  UMeditor是UEditor的简洁版,保留了UEditor中常用的功能,在代码量和加载速度上均有很大的提升。本文上传图片的执行后台基于jfinal框架。1、html加载调用的样式和脚本,为保证图片能上传到服务器,此处需要做几点配置:... 查看详情

在tp下umeditor上传图片成功,预览失败

...图片时候处理的图片的类用的是UM自带的imagUp.class.php,将UMeditor1.2.2放到 shop/Public/statics/下面在上传图片的时候图片显示用bug工具查看显示图片路径少了shop(项目根路径)需要修改UM的配置文件umeditor.config.php修改 ,imagePath:... 查看详情

umeditor百度富文本编辑器的使用

批量上传的图片在线管理没法查看图片是因为jar包本身的Bug,这里暂时做了个替换展示。就是找到Img.js 然后搜索img.set替换下就好了                    &nbs 查看详情

关于umeditor粘贴图片自动上传

Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能。但是无法处理多张图片。而且转换成BASE64后是... 查看详情

umeditor实现ctrl+v粘贴word图片并上传

​这种方法是servlet,编写好在web.xml里配置servlet-class和servlet-mapping即可使用后台(服务端)java服务代码:(上传至ROOT/lqxcPics文件夹下)<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%@& 查看详情

umeditor上传图片相对路径的设置和保存(代码片段)

此篇文章仅献给已实现百度富文本编辑器,想要设置相对路径并保存到数据库,方便以后项目迁移。使用的版本为1.2.3,适用图片上传中点击以及拖拽功能。//保存图片相对地址的设置       //1.请修改Uplo... 查看详情

从word中复制图片到umeditor编辑器中

由于工作需要必须将word文档内容粘贴到编辑器中使用但发现word中的图片粘贴后变成了file:///xxxx.jpg这种内容,如果上传到服务器后其他人也访问不了,网上找了很多编辑器发现没有一个能直接解决这个问题考虑到自己除了工作其... 查看详情

使用百度umeditor富文本编辑器,修改自定义图片上传,修改源码

富文本编辑器,不多说了,这个大家应该都用到过,至于用到的什么版本,那就分很多种CKEditor:很早以前叫FCK,那个时候也用过,现在改名了,比较流行的一个插件,国外很多公司在用UEDITOR:百度开发的插件,lite版是UMEasyUI编... 查看详情

我想在umeditor中加入一个百度音乐的按钮应该怎么从ueditor

参考技术A方法如下:1、在Ueditor的Ueditor.config.js添加“工具栏”代码是“Music”2、然后再部署上传音乐的文件就可以了。详细的Ueditor部署,请参考Ueditor官网。 参考技术B在Ueditor的Ueditor.config.js添加工具栏代码是“Music”,然后再... 查看详情

gitee开源程序kkfileview踩坑及解决方案

...前言一、依赖选择二、环境部署安装2.1解压2.2启动程序2.3踩坑--------office.home配置有误2.4踩坑问题解决三、踩坑-------OFFICE组件不可用3.1确认是否是office组件的问题3.2验证office组件是否不可用3.3验证office组件是否可用四、踩坑-------... 查看详情

踩坑记录

1. EntityUtils.toString(entity),EntityUtils流只存在一次,多次访问会报错  解决办法:  查看详情

spring踩坑

 org.springframework.web.util.NestedServletException:Requestprocessingfailed;nestedexceptionisjava.lang.IllegalArgumentException:Noconverterfoundforreturnvalueoftype错误原因及解决步骤  1.原因:这是因为springmvc默 查看详情

angularjs编辑器

问题:在使用过程中遇到的问题就是:angularJS绑定不上值。后来找到一种可以用的方式。html页1<divclass="all">2<scripttype="text/html"style="margin:auto;height:300px;width:100%;"ng-model="LogContent"meta-umeditor3meta-umeditor-config= 查看详情

gitee开源程序kkfileview踩坑及解决方案(代码片段)

...前言一、依赖选择二、环境部署安装2.1解压2.2启动程序2.3踩坑--------office.home配置有误2.4踩坑问题解决三、踩坑-------OFFICE组件不可用3.1确认是否是office组件的问题3.2验证office组件是否不可用3.3验证office组件是否可用四、踩坑-------... 查看详情

fastdfs踩坑记(代码片段)

FastDFS踩坑记本篇文章转载于FastDFS作者余庆大佬的FastDFS分享与交流公众号。分享几个收集到的FastDFS踩坑案例,供大家参考,以防掉进同一个坑里(欢迎在评论区补充踩坑案例)。案例一我在之前的公司碰到的案例... 查看详情

空格踩坑,微信沟通参数的坑点

神奇不神奇?意外不意外?——记踩坑之“避免微信提供参数” 查看详情

filebeat踩坑

使用filebeat5.0.1版本,用filebeat作为日志收集工具时:java日志格式需要多行匹配,在filebeat配置文件中添加: ###Multilineoptions #Mutilinecanbeusedforlogmessagesspanningmultiplelines.Thisiscommon #forJavaStackTracesorC-LineC 查看详情