您的位置：360文档中心› 跟我学百度UEditor在线文本编辑器及应用实例

跟我学百度UEditor在线文本编辑器及应用实例

跟我学百度UEditor在线文本编辑器及应用实例
跟我学百度UEditor在线文本编辑器及应用实例

1.1跟我学百度UEditor在线文本编辑器及应用实例1.1.1UEditor在线文本编辑器

1、官方网站https://www.360docs.net/doc/e5896796.html,/website/index.html

2、功能特性

3、在线Demo示例

4、参考文档

5、下载UEditor

下载JSP版本

另外，还提供其它的资源文件。

1.1.2应用UEditor在线文本编辑器

1、解压下载的包

（1）相关的文件目录

（2）各个目录的相关说明

dialogs：弹出对话框对应的资源和JS文件

jsp：涉及到服务器端操作的后台文件。

lang：编辑器国际化显示的文件

themes：样式图片和样式文件php/jsp/.net：涉及到服务器端操作的后台文件，根据你选择的不同后台版本，这里也会不同，这里我们选择jsp。

third-party：第三方插件（包括代码高亮，源码编辑等组件）

editor_all.js：_用于发布版本的UEditor系统库文件

editor_all_min.js：editor_all.js文件的压缩版，建议在正式部署时才采用

editor_config.js：编辑器的配置文件，建议和编辑器实例化页面置于同一目录

editor_parse.js：编辑的内容显示页面引用，会自动加载表格、列表、代码高亮等样式。

2、创建示例HTML页面

（1）首先就是引入两个js文件

分别为editor_config.js和editor_all.js，但editor_config.js需要放在editor_all.js的前面。然后就是js创建一个可编辑区域，用来创建编辑器，需要注明id，类型为text/plain，最后实例化编辑器即可。

UEditor示例页面

content="target-densitydpi=device-dpi,

width=device-width,initial-scale=1,maximum-scale=1.0,minimum-scale=1.0,user-scalable=n o">

注意在创建编辑器实例及其DOM容器时是使用

（2）相关的资源文件

（3）js初始化的时候也可以传入自定义的配置，如下：

var ue = UE.getEditor('ueditorTextAreaID', options);

3、执行示例页面

4、编辑器的前后端交互

当用户在编辑器中输入相关的数据后，系统将要在后台进行接收。

（1）输入数据

在系统后台的Action或者Servlet程序中以变量形式接收，与普通的表单中的 //下面是实例化 最后一步： 在/UETest/ueditor/ editor_config.js 中查找URL 变量配置编辑器在你项目中的路径。 1 2 //强烈推荐以这种方式进行绝对路径配置 URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/"; 新增编辑器容器拖动缩放功能,配置项为:scaleEnabled 、minFrameWidth 、minFrameHeight 控制大小 congig.js 文件中 //,initialFrameWidth:1000 //初始化编辑器宽度,默认1000 //,initialFrameHeight:320 //初始化编辑器高度,默认320

java文本编辑器实验报告

Java考核 课程名称Java程序设计 题目名称文本编辑器的设计与实现学生学院计算机学院 专业班级计算机17(2)班 学号3117004479 学生姓名李泽豪 指导教师赵锐 2018 年12 月11 日

一、课程题目 编程实现一个文本编辑器 使其具有新建、打开、保存，编辑（查找、替换、大小写转换等）、统计（字数、行数、字符数等）、格式（字体设置、字体大小、字体颜色、背景颜色等）等功能。 要求：基于JFrame窗体设计、使用菜单进行功能选择。 提示：字体颜色，背景颜色的设置，可使用javax.swing包中的JColorChooser类的静态方法showDialog()调用标准颜色对话框来完成；文件操作可通过javax.swing包中JColorChooser类中的showSaveDialog()、showOpenDialog()方法调用标准的的文件对话框来完成。 二、题目分析与设计 2.1开发环境 使用Eclipse开发软件 2.2需求分析 简单的文本编辑器提供给用户基本纯文本的文字编辑功能，能够读取计算机本地磁盘中的文本内容，将用户文本导入到磁盘中之中，以及实现基本的字体设置（字体，字号，字体颜色）简单的编辑字体的功能，以及统计（字数，行数，字符数），增强视觉体验的背景颜色功能等，简单而实用。而网络上的各种编辑器，有的功能不足（如自带的记事本），而有些编辑器功能太繁杂，仅以日常应用方面来说，一个文本编辑器只需要简单的功能就够了。 2.3功能构架 本程序要构建的文本编辑器按照题目要求，分为四个方面： （1）“文件”菜单：包括“新建”并提示是否保存已编辑内容，“打开”计算机本地磁盘的文本文件，主动“保存”自己已经编辑好的内容到电脑的磁盘或“另存为”新的文件之中，以及“退出”并提示是否保存已编辑的内容。 （2）“编辑”菜单：包括对已编辑文本的一个“查找与替换”功能，对已编辑英文文本的一个“大小写转换”功能。 （3）“格式”菜单：实现对文本的“字体”设置，“字体大小”以及“字体颜色”，还有

几种常用网页文本编辑器总结

文本编辑器应用总结 一．lhgeditor文本编辑器 lhgeditor组件文件结构： 1. lhgeditor.js：组件的核心JS文件 2. lhgeditor.css：组件的样式表文件 3. images：组件所需的图片都在此文件夹中 以上三个文件为组件所必须的三个文件，组件包中其它以“_”开头的文件为示例的演示文件，实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件，记得加载组件前先要加载此文件。 lhgeditor组件使用说明： 1. 在调用组件的页面加载lhgcore.j s和lhgeditor.js两个文件。 2. 在window.onload函数里加入J.editor.add(编辑器的id).init(); 例：

二．nicEdit文本编辑器 再引入三个js文件ueditor.all.js、ueditor.config.js、lang/zh-cn/zh-cn.js，一定是在以上代码之后引入。 在需要使用编辑器的位置，添加代码如下： 标签。 3）引入相关文件 4）创建编辑器 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

项目一：文本编辑器的设计与实现

课程： C# Windows程序设计学年第_ _学期第周月日教学内容备注 项目一：文本编辑器的设计与实现 【项目背景】 文本编辑器有两类：单文档和多文档文本编辑器。单文档文本编辑器一次只能打开一个文件，如果要打开另一个文件，必须关闭当前打开的文件，微软的写字板程序就是单文档字处理程序。多文档文本编辑器允许同时打开多个文件，每个文件占用一个子窗口，微软的Word程序就是多文档字处理程序。本项目主要介绍建立单文档文本编辑器的方法，通过分析现有文本编辑器的功能与操作过程，利用C#开发一个新的文本编辑器。 【主要内容与技能要求】 （1）会进行复杂窗口设计 （2）会对常见的文本编辑功能进行分析与编码实现 （3）会设计多文档窗口 一、预备知识 本项目主要利用RichTextBox控件来构成文本编辑区域。 1、RichT extBox控件的主要属性 属性SelectedText、SelectionLength、SelectionStart： 属性SelectionFont： 属性SelectionColor： 属性Lines： 属性Modified： 事件SelectionChange： 事件TextChanged： 2、RichT extBox控件的主要方法 方法Clear()： 方法Copy()、Cut()、Paste()： 方法SelectAll()： 方法Find()： 方法SaveFile()和LoadFile()：

课程： C# Windows程序设计学年第_ _学期第周月日教学内容备注方法Undo()： 方法Redo()： 二、功能设计与实现 1、剪贴板功能 放RichTextBox控件到窗体。属性Name=richTextBox1，Dock=Fill，Text=""。 private void menuItemEditCut_Click(object sender,EventArgs e) { richTextBox1.Cut(); } //剪切 private void menuItemEditCopy_Click(object sender,EventArgs e) { richTextBox1.Copy(); } //拷贝 private void menuItemEditPaste_Click(object sender,EventArgs e) { richTextBox1.Paste(); } //粘贴 private void menuItemEditUndo_Click(object sender,EventArgs e) { richTextBox1.Undo(); } //撤销 private void menuItemEditRedo_Click(object sender,EventArgs e) { richTextBox1.Redo(); } //恢复 2、存取文件功能 文本编辑器都应具有文件存取功能，菜单顶级菜单项“文件”的弹出菜单中一般包括如下菜单项：新建、打开、关闭、保存和另存为等。需要用到打开文件对话框（OpenFileDialog控件）和保存文件对话框（SaveFileDialog控件）。和 两个对话框的常用属性和方法： 属性Filter：例如Filter=“纯文本文件(*.txt)|*.txt|所有文件(*.*)|*.*” 属性FilterIndex： 属性FileName： 属性InitialDirectory： 属性DefaultExt： 方法ShowDialog()： 存取文件功能实现如下：

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用 一、下载安装Ckeditor，并将其整合到项目中 1、什么是CKeditor？为什么要使用它？ 我们在做门户网站或者公文系统时，客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。而一般的TextBox无法满足我们的需求，此时就需要使用一种叫做富文本编辑器的东西，这类编辑器有很多，ckeditor就是其中一种，下面介绍其使用方法 2、如何下载 √ 进入官方网站https://www.360docs.net/doc/e5896796.html,/，点击Download进入下载页面 √ CKEDITOR支持多种编程语言及框架（如：java、https://www.360docs.net/doc/e5896796.html,、sharepoint等），我们选择https://www.360docs.net/doc/e5896796.html, √ 下载后解压，简单解释里面内容 3、下面讲如何将CKEditor整合到我们的应用中 √ 新建一个网站

√ 为了代码清晰，新建一个目录，起名JS，方便将ckeditor放到该目录下 √ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下

√ 新建网页，起名test_ckeditor √ 增加对ckeditor的引用 √ 调用，主要是通过对TextBox的格式化实现富文本的显示效果 √ 为了简便，我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合)，从https://www.360docs.net/doc/e5896796.html,/下载

√ 将下载后的文件放到JS文件夹下 √ 引用jquery（通过将jquery类库拖放到title标签下） √ 页面上添加TextBox文本框（ID：TextBox1） √ 用ckeditor插件格式化TextBox1。在中添加如下代码 （注：以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBo x1这个文本框进行改造，让其看起来更炫） √ 按F5键预览，即可看到TextBox1被ckeditor格式化后的效果

细数几款免费好用的在线HTML编辑器

细数几款免费好用的在线HTML编辑器 先普及一下基本知识：什么叫在线HTML编辑器？说得简单点，在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框，可以进行图文排版等操作。当年本菜鸟做网站的时候，曾经自己用javascript编写过一个比较简单的在线HTML编辑器，用于文本内容的排版。但是因为水平有限，很多功能都无法实现。后来有了eWebEditor，功能确实强大，但这个编辑器是个收费的软件，并且正因为功能强大，也就显得过重，一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢？答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发，让我们得以享受他们的成果。一、百度出品的UEditorUEditor是由百度web 前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。特别要说的是，头条号后台发布文章的编辑器就是用的UEditor!百度UEditorUEditor还有一个轻量版的，叫做UMeditor，简称UM。UM是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线HTML编辑器。主要特点是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了

div的加载方式，以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧，以经受贴吧每天几亿的pv 的考验，功能设计应当是最优化的了。当然随着代码的减少，UM的功能对于UE来说还是有所减少，但也有增加，比如拖拽图片上传，chrome的图片拖动改变大小等。百度UEditor界面二、xhEditor开源HTML编辑器xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。xhEditor完全基于Javascript 开发，可以应用在任何的服务端语言环境下，例如：PHP、ASP、https://www.360docs.net/doc/e5896796.html,、JA V A等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。 主要特点：精简迷你：初始加载4个文件，包括：1个js(50k)+2个css(10k)+1个图片(5k)，总共65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。使用简单：简单的调用方式，加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。无障碍访问：提供WAI-ARIA全面支持，全键盘精细操作，全程语音向导，提供完美无障碍访问体验，充分满足残疾人的上网需求。内置Ajax上传：内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓

文本编辑器源代码

/* A Screen Editer Subsystem */ #define TURBOC #include #include #include #include #include #define BUF_SIZE 32000 #define LINE_LEN 79-2 #define MAX_LINES 24-1 #define KILL_BUF_SIZE 4*LINE_LEN /***********************************************************/ char buf[BUF_SIZE]; char *curloc,*endloc; int scrnx,scrny; char killbuf[KILL_BUF_SIZE]; char *helpline="F1:save F2:load F3:find F4:replace ^K:kill line ^Y:Yank ^Z:qiut"; /*************************************************************/ void edit(char *fname),help(void); void gotoxy(int x,int y),clrline(int y); void edit_clr_col(int x,int y),clrscr(void); void printline(char *p),delete_char(void); void search(void),kill_line(void); void scrolldn(int x,int y); void scrollup(int topx,int topy,int endx,int endy); void upline(void); void downline(void),left(void),right(void); void display_scrn(int x,int y,char *p); void pagedown(void),pageup(void),replace(void); void home(void),gotoend(void),yank(void); int load(char *fname),save(char *fname); void edit_gets(char *str); void draw_border(int,int,int,int,int); /***************************************************/ main(int argc,char *argv[]) { union REGS r; char fname[80]; if(argc<2) {

基于java的文本编辑器开发

基于java的文本编辑器开发 当今，计算机以及网络技术的飞速发展，社会正快速向信息化社会前进，我们需要更智能，更专业的软件帮助我们完成工作，从而提高了工作效率。 目前文本编辑器种类很多，所提供的功能也很多，但是能满足用户实现多种功能和进行Java的编译与运行很少，不能更好的适应当前用户的要求。本设计所完成的文本编辑器功能是针对学习Java程序语言，因此我们利用Java程序设计虚拟机和软件对用户及使用者的应用过程形成一整套完整的编写代码，编译，运行。 本文本编辑器的开发主要包括界面窗口的菜单栏和工具栏以及树结构，还有链接Java虚拟机实现编译与运行。使用SUN公司的Java中的GUI作为开发技术，利用其提供的各种类与接口，首先建立系统应用原型。 本文本编辑器的开发采用JDK6.0和 UltraEdit为开发工具，操作系统为Windows98/Windows 2000/Windows XP等。

目录 1 前言 (3) 2 问题的提出及可行性研究 (4) 2.1问题的提出及定义 (4) 2.2可行性研究 (5) 2.2.1 对现行文本编辑器的分析 (5) 2.2.2 新文本编辑器的可行性研究分析 (5) 3 用户需求分析 (7) 3.1用户调查 (7) 3.2确定目标系统的功能 (7) 4 系统设计与开发环境 (8) 4.1系统相关类的设计 (8) 4.2开发语言及其开发环境 (12) 4.2.1开发语言概述 (12) 4.2.2 Java开发环境——JDK的介绍 (14) 4.3环境变量的设置 (15) 4.3.1.环境变量的作用 (15) 4.3.2 如何设置环境变量 (16) 5 关键技术和源代码的实现 (18) 5.1关键技术剖析 (18) 5.2源码分析 (19) 6 系统测试 (46) 6.1测试方案 (46) 6.2测试项目 (46) 6.3编辑器截图演示 (47)

ueditor1.4.3jsp utf-8版配置使用教程

Ueditor在线编辑器配置示例 1.简介 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。 2.下载 首页地址：https://www.360docs.net/doc/e5896796.html,/website/index.html，点击下载，可以根据需要下载php、aps、jsp、.net版本。由于1.4版本和1.3版本内容变更较大，本例中使用了最新版本1.4.3.1 jsp utf-8 版本进行测试。 3.配置 下载ueditor后，放入系统的js库中，由于本例的相同功能的ewebeitor 放在webroot下，本例中也直接放入的webroot下，结构图如下：

首先配置通用配置的控制器路径，文件名为：ueditor.config.js。此文件配置需要对应下载的版本，即jsp版对应修改： serverUrl: URL + "jsp/controller.jsp" 修改了通用配置后，还需要修改对应的上传文件、图片等路径，我们需要根据我们配置的版本去设置对应目录的内容，jsp版本如下：

实际配置如下图： 下面还有对应图片、视频的配置，与图片配置类似。 4.问题 4.1jar问题

需要的jar都已在ueditor中包含，直接拷贝至项目的lib中并加入classpath中即可。 1.4.3版本需要commons-io- 2.4.jar支持。所以在buildpath中需要将该包放置靠前。 4.2拦截器问题 对于使用了Struts2或配置了其他拦截器的，需要将该请求放行如Struts2一般配置为： 对于此类会拦截jsp的请求的配置，可以根据项目需要， 1.改为*.action,*.do之类的请求匹配 2.加入自己的拦截器，如本例所配置的 com.linewell.core.filter.ExtendStrutsPrepareFilter中， 不解的可以参照： https://www.360docs.net/doc/e5896796.html,/krysml/article/details/9006533

相关主题
相关文档
最新文档