UEditor是由百度开发的富文本web编辑器,它是开源的,允许自由使用和修改。界面相似于word,可方便大家的使用

使用步骤:

1.下载与查看文档:

ueditor完全开源,可在其官方网站下载:http://ueditor.baidu.com/website/index.html

在官网上可以查看ueditor的文档了解它如何使用,阅读API文档来查看命令。

2. 源代码的导入:

根据自己所需的版本下载后解压,将得到的文件导入到项目根目录(webapp)下

3. 页面配置:

3.1在head中添加文件的引用

<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.config.js" />" ></script>
<script type="text/javascript" src="<c:url value="/resources/ueditor/ueditor.all.min.js" />" ></script>

注意:这两个的顺序不能交换,否则编辑器不能初始化

3.2 在script中编写js

初始化编辑器:

var ue = UE.getEditor('editor');

设置编辑器的初始化内容:

ue.ready(function() {
                //设置编辑器的内容"
                ue.setContent(date);  date为动态传入的数据
               //获取编辑器带格式的内容
               var plain = ue.getPlainTxt();

               //获取编辑器html文本

               var html = ue.getContent();

               //获取编辑器纯文本内容

               var text = ue.getContentText();

            });

3.3配置body

<div>
        <script id="editor" type="text/plain" name="content"  style="width:845px;height:400px;">
                这里也可以直接写固定的文本内容
        </script>
    </div>

4 编辑器的工具

这个工具列表有好多我们都用不到,需要去除一些不必要的工具。

4.1 方法一

在ueditor.config.js文件中对 toolbars[] 中不需要的工具删掉或注释掉就可以,建议注释掉,万一以后要用到呢。

4.2 方法二

在编辑器实例化的时候传入toolbars参数

toolbars: [['fullscreen', 'source', 'undo', 'redo', 'bold'][' ',' ']  一个单引号里面一个工具,几个中括号表示工具栏分为几行,括号内的表示这行的工具]

ueditor的初始化使用相关推荐

  1. ueditor编辑器初始化

    <!-- 加载编辑器的容器 --> <script id="container" name="content" type="text ...

  2. 百度UEditor开发案例(JSP)

    本案例的开发环境:MyEclipse+tomcat+jdk 本案例的开发内容: 用百度编辑器发布新闻(UEditor的初始化开发部署) 编辑已发过的新闻(UEditor的应用--编辑旧文章) 上传附件 ...

  3. ueditor的配置和使用

    ueditor下载好之后直接复制到项目的WebContent目录下,并将ueditor\jsp\lib下的jar包复制或者剪切到项目的lib目录下.先看一下效果,如下: 1.文件的上传 首先在uedi ...

  4. edui 富文本编辑_React中使用UEditor百度富文本的方法

    前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入uedito ...

  5. UEditor富文本编辑器不显示问题

    项目场景: vue中if判断后使用文本编辑器(误区) 问题描述: 在div中使用v-if判断是否显示UEditor富文本编辑器,在判断为true的情况下富文本编辑器并未加载出. <!-- 判断富 ...

  6. 【转】百度编辑器UEditor

    Ueditor 1.4.3 单独调用上传图片,或文件功能 原文:https://www.cnblogs.com/sadkilo/p/5951336.html 第一步 引入ueditor的js包 第二步 ...

  7. ue html编辑器获取纯文本,百度文本编辑器(Ueditor)怎么获取内容?

    百度文本编辑器(Ueditor)是由百度开发的所见即所得文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和使用代码.那么,Ueditor怎么获取内容呢?不少刚接 ...

  8. java集成富文本编辑器UEditor

    JAVA集成富文本编辑器UEditor 集成前说明 集成UEditor 一.UEditor下载 二.UEditor迁入项目 三.引入ueditor中的js 四.初始化UEditor 五.实现图片上传 ...

  9. 我的第一个python web开发框架(15)——公司介绍编辑功能

    完成登录以后,就会进入后台管理系统的主界面,因为这个是小项目,所以导航菜单全部固化在HTML中,不能修改.一般后台还会有一个欢迎页或关键数据展示的主页面,小项目也没有多大的必要,所以登录后直接进入公司 ...

最新文章

  1. CSS3模拟IOS滑动开关
  2. python3 中 布尔 bool 类型转换
  3. eclipse写java实现端口_使用eclipse(windows)在java中使用IPv6地址和端口号创建套接字...
  4. java 菜单快捷键_Java 菜单快捷键
  5. 计算机组成原理--主存储器
  6. 【java】错误 找不到或无法加载主类
  7. 三种场景不建议放在关系型数据库中
  8. 2、使用Spring框架能带来哪些好处
  9. 股票分析之主力资金排序分析
  10. 【动态规划】区间dp: P3205 合唱队
  11. UART协议快速扫盲(图文并茂+超详细)
  12. exls表格搜索快捷键_excel表格快速查找快捷键
  13. WPS、EXCEL中输入公式F4插入绝对引用无反应的解决方法
  14. 关于 opengl3.3 - 4.1 ABO 的感触. 传统 VBO往 ABO+VBO的 代码移植
  15. C++二分查找相关函数用法总结
  16. AI-人工智能 easyAi开发技术
  17. rem与px之间的转换
  18. java 依赖的项目报错_关于eclipse的maven项目Java Build Path中maven依赖报错问题
  19. echarts实现双y轴
  20. 短线王的盯盘宝怎么样_自用多年的很牛的多空指标、无敌短线王

热门文章

  1. 自然语言处理-jieba
  2. 杭州-SQL杭州国迈软件有限公司笔试题
  3. HTML5编写格式命令详解
  4. “青春树儿童摄影网”首页制作
  5. 催眠曲用计算机怎么弹,在电脑中巧播“催眠曲”
  6. 基于模拟退火算法的TSP算法
  7. vcs_dve+sverilog
  8. 多行文本垂直居中的三种方法
  9. html制作唯品会登陆页面,login.html
  10. 北大计算机学霸,揭秘:2018北大在京录取的学霸们有何特长(组图)