最近因工作需要使用了ueditor,根据自己的需求将开发使用时遇到的问题小结分享下。

1.可到官网根据自身情况下载最新版本,https://ueditor.baidu.com/website/

2.html页面调用并引入js插件

<div>
                            <!-- 富文本 -->
                            <textarea name="content" id="myEditor" style="height:300px;"></textarea>
                        </div>

<!--script引入富文本-->
<!-- 配置文件,须首先引入 -->
<script src="__PUBLIC__/Home/ueditor/1.4.3/ueditor.config.js" type="text/javascript"></script>

<!-- 编辑器源码文件 -->
<script src="__PUBLIC__/Home/ueditor/1.4.3/ueditor.all.js" type="text/javascript"></script>

<!-- 实例化编辑器,并设置要显示的标签等,这里我需要的toolbar标签就这些,自己可参考文档自定义设置 -->
<script type="text/javascript">
    UE.getEditor('myEditor',{
        toolbars: [
            ['undo', 'redo', 'insertimage']
        ],
        autoHeightEnabled: true,    //是否自动长高,默认true
        autoFloatEnabled: true,     //是否保持toolbar的位置不动,默认true
        elementPathEnabled: false   //是否启用元素路径,默认是显示
    });
</script>

ok,如下图:

PS-小结::::::

1.修改不显示‘本地已保存’的提示(1.4.3版本中)

2.去掉元素路径、字数统计等

3.因为我将上传的信息进行处理,规避了一些特殊字符,所以存到数据库时,出现了被转义问题,并且页面显示出错

4.上传的图片太大没有自动缩放问题:可在富文本插件的根目录下找到themes->iframe.css文件,并在其中敲入以下代码,注意缓存

img {
    max-width: 65%; /*图片自适应宽度*/

max-height: 65%; /*图片自适应高度*/
}
body {
    overflow-y: scroll !important;
}
.view {
    word-break: break-all;
}
.vote_area {
    display: block;
}
.vote_iframe {
   
    border: 0 none;
    height: 100%;
}
#edui1_imagescale{display:none !important;} /*去除点击图片后出现的拉伸边框*/

前:::

后:::

5.上传图片提交后太后在页面显示的同样太大,可在html页面通过定位到对应的img,敲入style,如:img{max-width:100%;}

6.开发环境上传图片等可正常使用,但在运行环境却不行,报错如:后台配置项返回格式出错,上传功能将不能正常使用!

原因/解决:php目录下的controller文件中的date_default_timezone_set函数大小写问题/改为date_default_timezone_set("Asia/Chongqing");即可

7.注意、注意、注意:引入富文本插件时,文件顺序一定不能错,否则无法引入!!!!!config文件在最前

以上就是目前遇到的问题,不足之处,多多指教,共同进步

百度富文本ueditor使用小结的更多相关文章

  1. 百度富文本Ueditor将图片存在项目外路径并回显

    我的毕设中需要一个类似新闻发布的功能,使用到百度富文本编辑器,不过百度富文本编辑器有点坑(只是我太菜了),粘贴图片和回显这个坑坑了我两天时间.效果是这样的: 就是可以在文本中粘贴图片并显示出来,直接说 ...

  2. 百度富文本Ueditor编辑器的使用

    往在web开发的时候,尤其是在网站开发后台管理系统的时候经常会使用到富文本编辑器,这里我们来使用百度提供的富文本编辑器UEditor,以提高我们的开发效率 UEditor官网下载地址:https:// ...

  3. springboot使用百度富文本UEditor遇到的问题一览(springboot controller中request.getInputStream无法读取)

    先吐槽一下UEditor作为一个前端的js类库,非要把4种后端的代码给出来,而实际生产中用的框架不同,其代码并不具有适应性.(通常类似其它项目仅仅是给出数据交互的规范.格式,后端实现就可以自由定制) ...

  4. springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  5. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  6. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  7. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  8. 百度富文本编辑器ueditor在jsp中的使用(ssm框架中的应用)

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  9. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

随机推荐

  1. ExportHandler.ashx

    using KYZWeb.Common;using Liger.Data;//using Microsoft.Office.Interop.Excel;using System;using Syste ...

  2. How to hosts

    sudo cp /etc/hosts /etc/hosts.bak sudo cp ~/Desktop/hosts /etc/hosts sudo systemctl restart NetworkM ...

  3. Error:Failed to resolve: com.android.support:appcompat-v7

    repositories { maven { url "https://maven.google.com" } } implementation 'com.android.supp ...

  4. Java线程的创建方式三:Callable(四)

    一.Java实现多线程的三种方式 方式一:继承Thread类: public class Test extends Thread { public static void main(String[] ...

  5. Thread的其他属性方法

    from threading import Thread,currentThread,active_count import time def task(): print('%s is running ...

  6. 【C/C++】龙格库塔+亚当姆斯求解数值微分初值问题

    /* 解数值微分初值问题: 龙格-库塔法求前k个初值 + 亚当姆斯法 */ #include<bits/stdc++.h> using namespace std; double f(do ...

  7. Gedit浏览器常用快捷键备注

    此处只记录常用的,而通常意义上的应知应会不做汇总 搜索 : Ctrl +F : 查找字符串 Ctrl + G : 查找字符串的下一实例 Ctrl + Shift + G : 查找字符串的前一实例 Ct ...

  8. 云服务器ECS

    云服务器Elastic Compute Service(ECS)是阿里云提供的一种基础云计算服务.使用云服务器ECS就像使用水.电.煤气等资源一样便捷.高效.您无需提前采购硬件设备,而是根据业务需要, ...

  9. Codeforces Round #514 (Div. 2) C. Sequence Transformation 思维构造

    题意 给出一个1-n的集合   gcd 集合里面的所有数  得到的 一个 数   然后自己选择删去一个数   要使得到的数 构成的数列 的字典序最大 思路: gcd所有数 那gcd得到的数肯定要小于数 ...

  10. hz2016的noip模拟赛(d1 + d2)

    QAQ怕不是真的凉凉 d1 205 + d2 170 = 375 感觉难度和noip差不多 那么这可是有够凉的 官方题解 D1 D2 D1 T1 某地的ENLIGHTENED总部总部有N个Agent, ...