百度富文本框ueditor(代码片段)

关键词：

官网

http://ueditor.baidu.com/website/index.html

下载

官网下载JSP版本，1.4.3.3的UTF-8版本

使用

解压后重命名为ueditor，放入WEB-INF/plugin文件夹下面。把jsp中的两个lib包放入项目lib中。

因为在WEB-INF不可以直接访问，所以要在springmvc.xml中配置资源映射

<!-- 静态资源映射,可以配置多个 -->    
<mvc:resources mapping="/plugin/**" location="/WEB-INF/plugin/" />
<mvc:default-servlet-handler />

页面中使用

<%--引入百度ueditor--%>
<link href="./plugin/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="./plugin/ueditor/umeditor.config.js" charset="utf-8" ></script>
<script type="text/javascript" src="./plugin/ueditor/umeditor.min.js" charset="utf-8" ></script>
<script type="text/javascript" src="./plugin/ueditor/lang/zh-cn/zh-cn.js"></script>

<%--百度ueditor文本标签--%>
<script type="text/plain" id="uEditor_up" name="content" style="width:100%;height:400px;">
</script>

<%--js初始化--%>
<script type="text/javascript">//编辑操作
        function edit(rowdata) 
            var d = rowdata;
            $(‘#id_up‘).val(d.id);
            $(‘#title_up‘).val(d.title);
                        
            //初始化编辑器
            var um = UM.getEditor(‘uEditor_up‘);
            //获取编辑器中的初始化内容
            $.ax(‘./notice/selectByPrimaryKey‘, 
                id: d.id
            , ‘POST‘, function (data) 
                    //设置编辑器中的内容
                um.setContent(unescape(data.content), false);
            , function (e) 
                layer.alert("公告内容获取失败!", 
                    title: ‘提示‘,
                    icon: 2
                );
            , false);
            
                        //修改弹框
            noticeLayer = layer.open(
                type: 1,
                title: [‘编辑公告‘, ‘font-size:18px;‘],
                content: $(‘#editDIV‘)
            );
            layer.full(noticeLayer);
        
        
        /*修改*/
        function update_notice() 

            var id = $(‘#id_up‘).val();
            var title = $(‘#title_up‘).val();
            //获取编辑器中html内容
            var content = escape(UM.getEditor(‘uEditor_up‘).getContent());

            var data = 
                id: id,
                title: title,
                content: content
            ;
            
            $.ajax(
                url: "./notice/updateByPrimaryKeySelective",
                data: data,
                type: "post",
                dataType: "json",
                success: function (data) 
                    if (data.code == "success") 
                        layer.alert(data.msg, 
                            title: ‘提示‘,
                            icon: 1
                        , function (index) 
                            layer.close(noticeLayer);
                            layer.close(index);
                            layui.form.render();
                            table.reload(‘dataGridList‘, 
                                url: "./notice/getListByPage"
                                //,where:  //设定异步数据接口的额外参数
                            );
                        );
                        $("#editForm")[0].reset();
                     else 
                        layer.alert(data.msg, 
                            title: ‘提示‘,
                            icon: 2
                        );
                    
                
            );
        
</script>

效果图如下

图片上传回显问题

上传

在WEB-INF下面不能直接访问，所以要在web.xml中配置imageUp.jsp的访问路径。

    <!-- 百度富文本 图片上传jsp -->
    <servlet>
        <servlet-name>imageUp.jsp</servlet-name>
        <jsp-file>/WEB-INF/plugin/ueditor/jsp/imageUp.jsp</jsp-file>
    </servlet>
    <servlet-mapping>
        <servlet-name>imageUp.jsp</servlet-name>
        <url-pattern>/plugin/ueditor/jsp/imageUp.jsp</url-pattern>
    </servlet-mapping>

回显

因为上面配置了

<mvc:resources mapping="/plugin/**" location="/WEB-INF/plugin/" />

所以，上传的时候图片会上传到跟目录下的plugin，而不是/WEB-INF/plugin/，回显的时候依然会遵从这个配置原则，去/WEB-INF/plugin/下面找图片，而实际上图片是在跟目录的plugin下面。

解决这个问题只需要在设置一个资源映射就可以了

     <!-- 百度富文本插件-上传图片回显,上传图片会生成在根目录的plugin下面,这行映射一定要配置在/plugin/**上面 -->  
     <mvc:resources mapping="/plugin/ueditor/jsp/upload/**" location="/plugin/ueditor/jsp/upload/" />
     <!-- 百度富文本插件-资源映射 -->  
     <mvc:resources mapping="/plugin/**" location="/WEB-INF/plugin/" />
     <mvc:default-servlet-handler />

视频插入

网上查询一下资料，基本都一样，并没有解决我的问题，可能版本不一样，我的是1.4.3。

视频预览"输入的视频地址有误，请检查后再试！"

dialogs/video/video.js中，搜索createPreviewVideo，根据url生成视频预览

不用me.convert_url转换url，embed标签删掉type="application/x-shockwave-flash"属性。

插入后不播放

只显示一张图片，不播放内容。如下图

在dialogs/video/video.js中搜索insertvideo，同上，不用me.convert_url转换url。

在umeditor.js中搜索me.commands["insertvideo"]，把creatInsertStr方法最后一个参数改为true。

在搜索creatInsertStr，删除embed的属性删除type="application/x-shockwave-flash"

表情本地化

在中把emotionLocalization设为true，然后再去官网下载本地表情文件，然后把imgages中的东西全部拷贝到dialogs/emotion/images中去。

django之百度ueditor富文本编辑器后台集成(代码片段)

Python3+Django2.0百度Ueditor富文本编辑器的集成百度富文本编辑器官网地址：http://fex.baidu.com/ueditor/ 疑问：为什么要二次集成？答案：因为百度富文本编辑器Ueditor没有对python的支持 步骤1：　　在官网下载Ueditor的任意版本代... 查看详情

百度ueditor富文本上传图片(代码片段)

项目中使用UEditor发现设置图片自定义保存路径会出现《请求后台配置项http错误，上传功能将不能正常使用！错误》/*上传图片配置项*/"imageActionName":"uploadimage",/*执行上传图片的action名称*/"imageFieldName":"inputForm",/*提交的图片表单... 查看详情

百度富文本ueditor编辑器的使用(代码片段)

...富文本编辑器，这里我们来使用百度提供的富文本编辑器UEditor，以提高我们的开发效率UEditor官网下载地址：https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UTF-8版，然后将压缩包解压之后是这个样子解压内容... 查看详情

百度富文本编辑器ueditor添加到pom(代码片段)

...lt;dependency><groupId>com.baidu</groupId><artifactId>ueditor</artifactId><version>1.1.2</version><scope>system</scope><systemPath>$project.basedir/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath></dependency>由于富文... 查看详情

django——xadmin中集成富文本编辑器ueditor(代码片段)

一、安装pip命令安装，由于ueditor为百度开发的一款富文本编辑框，现已停止维护，如果解释器为python2，则直接pipinstalldjangoueditor解压包安装，python3以上的版本需要下载压缩包解压安装下载地址步骤到下载地址下载并解压cmd进入... 查看详情

百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊，或者谁知道该如何操作

事实证明百度ueditor并没有新增将word内容导入到富文本编辑框的功能，需要借助百度DOC通过复制粘贴来解决该问题。其中的具体步骤如下：1、直接打开百度DOC的相关窗口，会看到图示的界面。2、下一步，需要找到导入文档并根... 查看详情

ueditor富文本编辑器跨域上传图片解决办法(代码片段)

...器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的跨域,网上查了一下各种花里胡哨,一顿操作猛如虎,比如加document.domain,配置全域名的等等都是然并卵,我仔细研究了一下ueditor的demo文件,... 查看详情

富文本编辑器-ueditor(代码片段)

官方网址：http://ueditor.baidu.com/website/index.html下载地址：http://ueditor.baidu.com/website/download.html二、使用简单步骤1.在使用页面正确导入UEditor的js文件<scripttype="text/javascript"src="<%=request.getContextPath()%&g 查看详情

百度富文本（ueditor）选择图片慢

ueditor.all.js/ueditor.all.min.js中修改如下信息将：accept="image/*"修改为：accept="image/jpg,image/jpeg,image/png,image/bmp,image/gif"  查看详情

在线文本的编辑框——kindeditor富文本编辑的使用(代码片段)

...文本编辑器：　　KindEditor　　 http://kindeditor.net/　　UEditor　　　http://ueditor.baidu.com/website/　　CKEdirot　　http://ckeditor.com/这里介绍使用KindEditor的使用。2.下载　　进入官网：http://kindeditor.net/down.php 下载（其官网也有演示... 查看详情

新手如何在vue项目中优雅的使用ueditor（百度富文本编辑器）(代码片段)

1、去官网，下载ueditor，解压，重命名，放在vue项目中的static文件夹下。　　ps：新手会觉得在官网上有几种不同版本的文件，俺到底要下载哪一个，如果你仅仅是一个前端，那么好，只要是最新版本的UEditor，随便下，如果你比... 查看详情

djangoxadmin集成djangoueditor富文本编辑器(代码片段)

本文档记录自己的学习历程！介绍UeditorHTML编辑器是百度开源的在线HTML编辑器,功能非常强大额外功能解决图片视频等无法上传显示问题Ueditor下载地址https://github.com/wsqy/DjangoUeditor.git解压后将DjangoUeditor文件夹复制到django项目目录... 查看详情

vue使用ueditor富文本的配置(代码片段)

UEditor是百度的一个javascript富文本编辑器，功能强大，以下是vue项目中的引入过程1.下载vue-ueditor-wrap:  说明：下载这个插件对vue使用方便，有双向数据绑定的优势，操作相对方便点第一步，先下载依赖npmivue-ueditor-wrap-S第... 查看详情

富文本编辑器(代码片段)

...ction()//关闭Dialog前移除编辑器KindEditor.remove(‘#content‘););UEditor解决方法：$(‘#adminModalLg‘).on(‘hidden.bs.modal‘,function()//关闭Dialog前移除编辑器UM.getEditor(‘container‘).destroy();); 查看详情

富文本编辑器(代码片段)

...ction()//关闭Dialog前移除编辑器KindEditor.remove(‘#content‘););UEditor解决方法：$(‘#adminModalLg‘).on(‘hidden.bs.modal‘,function()//关闭Dialog前移除编辑器UM.getEditor(‘container‘).destroy();); 查看详情

springboot整合百度ueditor富文本

　　百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢springboot如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来springboot整合百度富文本需要做哪些 　1.先将百度提供的demo和js导入项目中　2.编... 查看详情

百度富文本编辑器ueditor自定义上传图片接口

如下图： 然后修改ueditor.all.js   查看详情

jfinal整合百度富文本编辑器ueditor

ueditor配置文件ueditor.config.js修改参数serverUrl：（改为要调用的controller）后台添加该路由指定的controllerpackagecom.sandu.mega.admin.ueditor;importcom.jfinal.aop.Clear;importcom.jfinal.core.Controller;importcom.jfinal.kit.Ret 查看详情