文档章节

UEditor学习笔记(一)

Black_Cat_
 Black_Cat_
发布于 2016/07/24 21:26
字数 975
阅读 209
收藏 2
  • 什么是富文本编辑器?

      富文本编辑器是一种可内嵌于浏览器,所见即所得的文本编辑器

  • UEditor入门

  1. 入门部署和体验

   第一步、下载编辑器:下载地址: http://fex.baidu.com/ueditor/

            1.1.创建demo.html文件

      解压我们下载好的压缩包,在解压文件的根目录下,创建demo.html文件

 

然后,将我们创建好的demo.html文件打开写入如下代码

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>ueditor demo</title>

</head>

<body>

    <!-- 加载编辑器的容器 -->

    <script id="container" name="content" type="text/plain">

        这里是容器要显示的内容

    </script>

    <!-- 配置文件 -->

    <script type="text/javascript" src="ueditor.config.js"></script>

    <!-- 编辑器源码文件 -->

    <script type="text/javascript" src="ueditor.all.js"></script>

    <!-- 实例化编辑器 -->

    <script type="text/javascript">

       var ue = UE.getEditor('container', {});

    </script>

</body>

</html>

写完后,用火狐浏览器打开demo.html,如下

            1.2.Jar包及各配置文件

       下载完整源码包,解压后如下

  • dialogs: 弹出对话框对应的资源和JS文件
  • lang: 编辑器国际化显示的文件
  • phpjspaspnet: 涉及到服务器端操作的后台文件
  • themes: 样式图片和样式文件
  • third-party: 第三方插件(包括代码高亮,源码编辑等组件)
  • ueditor.all.js: 开发版代码合并的结果,目录下所有文件的打包文件
  • ueditor.all.min.js: ueditor.all.js文件的压缩版,建议在正式部署时采用
  • ueditor.config.js: 编辑器的配置文件,建议和编辑器实例化页面置于同一目录
  • ueditor.parse.js: 编辑的内容显示页面引用,会自动加载表格、列表、代码高亮等样式;
  • ueditor.parse.min.js: ueditor.parse.js文件的压缩版,建议在内容展示页正式部署时采用

注(后台相关处理的jar包)位于:jsp/lib下

(后端配置文件,所有前后端相关配置项,都放在这里)

(接收所有请求的接口文件)

  • 如何在jsp部署UEditor

第一步:

新建项目UeditorTest

第二步:导入相应的jar

第三步:导入配置文件

注:如果放入的配置文件不在项目的根目录下,必须打开ueditor.config修改其编辑器资源路径,如下图:(因为我将配置文件放入js文件夹里)

第四步:新建demo.jsp文件

编写如下代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>demo01</title>

    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ueditor.config.js"></script>

    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/ueditor.all.min.js"> </script>

    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/js/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">

    div{

         width: 100%;

    }

    </style>

</head>

<body>

<div>             <!-— 这里就是UEditor的容器 -->

    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

</div>

<script type="text/javascript">

    //实例化编辑器

    var ue = UE.getEditor('editor');    //实例化容器的ID

</script>

</body>

</html>

注: ueditor.config.js配置文件必须放置在第一行,否则会报错

第五:完成,效果如下:

定制工具栏图标:定制工具栏图标有俩种方法

1. 修改ueditor.config.js里面的toolbars

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

            2.1 修改demo01.jsp文件

                2.2 单行列表效果

               2.3    双行列表代码:

                   2.4 完成效果

:配置项里用竖线 '|' 代表分割线

小结:

     jsp的编辑器时,配置从1.2.4版本后,变化非常快,配置项就变得多了起来,需要我们注意的是ueditor.config.js里的配置项要熟悉并且明白他是干什么用的,优点是是:减少了页面代码量,实现修改配置文件达到想要实现的效果

 

© 著作权归作者所有

Black_Cat_
粉丝 3
博文 10
码字总数 5698
作品 0
海淀
程序员
私信 提问
UEditor插入视频,Object Iframe等标签被过滤问题处理

UEditor插入视频由于兼容性问题,需要再处理一个视频代码,但是新版ueditor不支持Objec IFrame标签,所以要加入// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/...

郑州-在路上
2018/10/30
0
0
小程序 rich-text 富文本的解析显示

☪ 背景 最近在开发学习 的过程中遇到了富文本的显示,对比了 中生成的代码,才发现原来微信官方早就开发了 标签,可以很方便的拿来使用 所以,在此对 小程序 rich-text 的使用方法进行一点整...

moTzxx
01/08
0
0
ZBLOG-ASP2.2如何给图片增加ALT标签说明文字?

一直以来,我们在建设网站的时候,都容易犯下一个大错误,那就是没有重视图片的文字说明,而大多数时候,技术方面并不能很好的识别图片的内容,这也是受限于技术的进步,目前还做不到识别图片...

原创小博客
2018/04/24
21
0
Laravel 不权威导航

Laravel不权威导航 Hi 这里是Roy整理的Laravel相关索引,希望能帮到大家 ,目前只是一小部分,正在努力整理中... Laravel 文档 Laravel 官方文档 —— 英文 Laravel 中文文档 —— laravel-...

weixingo
2016/02/05
335
0
我的网站搭建 (第22天) 改写评论框样式

一、前言 在上一篇内容网站搭建 (第21天) 评论功能设计,已经将评论的模型使用,ajax的加载以及ckeditor评论样式大致都介绍了一遍。其实不管是ckeditor还是ueditor都非常的好用,在学会了如何...

代码打碟手
01/04
35
0

没有更多内容

加载失败,请刷新页面

加载更多

XXL-JOB使用命令行的方式启动python时,日志过多导致阻塞的解决方式

一、Runtime.getRuntime().exec()的阻塞问题 这个问题也不能算是XXL-JOB的问题,而是Java的Runtime.getRuntime().exec()造成的,BufferedReader的缓冲区大小有限,当不能及时从缓冲区中把输出...

codeobj
3分钟前
1
0
java后端获取字符串标签里面的具体值

1、如下:怎么获取value值,使用Jsoup解决 <select id='department' name='department' class='select' tabindex='6' onchange='changeDept()'><option value=''>院系</optio......

木九天
11分钟前
2
0
Xamarin图表开发基础教程(10)OxyPlot框架支持的图表类型

Xamarin图表开发基础教程(10)OxyPlot框架支持的图表类型 OxyPlot组件支持26种图表,这些图表按照功能和样式可以分为4大类,分别为线型图表、条型图表、金融图表和其它图表。 线型图表 OxyP...

大学霸
14分钟前
2
0
移动端input“输入框”常见问题及解决方法

移动端input“输入框”常见问题及解决方法 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在于吸顶或者吸底元素中时,用户点击输入框,输入法弹出后,fie...

tyou
16分钟前
2
0
初探Android线程池

前言 最近在看OkHttp的源码,看的时候发现有关线程池的运用,自己就仔细想了一下,这个块知识好像不是很牢固。没办法,再研究一下有关线程池的相关知识吧。学习就是一个查漏补缺的过程,最终...

二营长的意大利炮手
23分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部