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

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

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

一、下载安装Ckeditor,并将其整合到项目中

1、什么是CKeditor?为什么要使用它?

我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。而一般的TextBox无法满足我们的需求,此时就需要使用一种叫做富文本编辑器的东西,这类编辑器有很多,ckeditor就是其中一种,下面介绍其使用方法

2、如何下载

√ 进入官方网站https://www.360docs.net/doc/2e16789018.html,/,点击Download进入下载页面

√ CKEDITOR支持多种编程语言及框架(如:java、https://www.360docs.net/doc/2e16789018.html,、sharepoint等),我们选择https://www.360docs.net/doc/2e16789018.html,

√ 下载后解压,简单解释里面内容

3、下面讲如何将CKEditor整合到我们的应用中

√ 新建一个网站

√ 为了代码清晰,新建一个目录,起名JS,方便将ckeditor放到该目录下

√ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下

√ 新建网页,起名test_ckeditor

√ 增加对ckeditor的引用

√ 调用,主要是通过对TextBox的格式化实现富文本的显示效果

√ 为了简便,我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合),从https://www.360docs.net/doc/2e16789018.html,/下载

√ 将下载后的文件放到JS文件夹下

√ 引用jquery(通过将jquery类库拖放到title标签下)

√ 页面上添加TextBox文本框(ID:TextBox1)

√ 用ckeditor插件格式化TextBox1。在中添加如下代码

(注:以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBo x1这个文本框进行改造,让其看起来更炫)

√ 按F5键预览,即可看到TextBox1被ckeditor格式化后的效果

4、CKEDITOR个性化定制

√ 这么多功能摆在这里就一个字”乱“,如何去掉我们不常用的功能呢?这就需要定义

√ 双击ckeditor目录中的config.js文件,通过对其进行配置可实现您的个性化需求

√ 下面给出常用的配置,供您选择

/*

Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. For licensing, see LICENSE.html or https://www.360docs.net/doc/2e16789018.html,/license

*/

CKEDITOR.editorConfig = function (config) {

// Define changes to default configuration here. For example:

//定义语言,此处改为中文

https://www.360docs.net/doc/2e16789018.html,nguage = 'zh-cn'; //中文

//颜色

//config.uiColor = '#AADC6E';

//字体

config.font_names = '宋体;楷体;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana';

//默认使用的toolbar(工具栏),此设定名字为“Basic”的toolbar为系统默认的工具栏

config.toolbar = 'Basic';

//名字为“Basic”的toolbar(工具栏)的具体设定。只保留以下功能:

config.toolbar_Basic =

[

{ name: 'styles', items: ['Font', 'FontSize'] }, //样式栏:字体、大小

{name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRig ht', 'JustifyBlock'] }, //对齐栏:左对齐、中心对齐、右对齐、两端对齐

{name: 'colors', items: ['TextColor', 'BGColor'] }, //颜色栏:文本颜色、背景颜色

{name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'] }, //基本样式栏:加粗、倾斜、下划线、删除线、下标、上标、移除样式

{name: 'insert', items: ['Image', 'Flash', 'Table', 'HorizontalRule'] }, //插入栏:图像、flash、表格、水平线

{name: 'links', items: ['Link', 'Unlink'] }, //超链接栏:增加超链接、取消超链接

{name: 'document', items: ['Source']}//源代码栏:查看源代码

];

//工具栏是否可以被收缩(即:右上角的三角符号是否显示)

config.toolbarCanCollapse = true;

//工具栏默认是否展开

config.toolbarStartupExpanded = true;

// 是否允许“拖拽改变尺寸”功能(即:右下角的三角符号是否显示)

config.resize_enabled = false;

//当输入:shift+Enter时插入的标签

config.shiftEnterMode = CKEDITOR.ENTER_P; //可选:CKEDITOR.ENTER_BR或CKEDIT OR.ENTER_DIV

//回车(Enter)时产生的标签

config.enterMode = CKEDITOR.ENTER_BR; //可選:CKEDITOR.ENTER_BR或CKEDITOR.E NTER_DIV

//宽度

//config.width = "600px";

//高度

//config.height = "500px";

//默认样式

//config.skin :'kama'(默认)、'office2003'、'v2'

//config.skin = "kama";

//工具栏的位置

//config.toolbarLocation = 'top'; //可选:bottom

//改变大小的最大高度

//config.resize_maxHeight = 3000;

//改变大小的最大宽度

//config.resize_maxWidth = 3000;

//改变大小的最小高度

//config.resize_minHeight = 250;

//改变大小的最小宽度

//config.resize_minWidth = 750;

//当提交包含有此编辑器的表单时,是否自动更新元素內的资料

//config.autoUpdateElement = true;

//绝对目录还是相对目录,为空为相对目录

//config.baseHref = ''

//编辑器的z-index值

//config.baseFloatZIndex = 10000;

//以下为上传附件的相关配置,需配合ckfinder控件使用

// var ckfinderPath = "/Scripts";

// config.filebrowserUrl = ckfinderPath + '/ckfinder/ckfinder.html';//上传文件时浏览服务文件夹

// config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinde r.html?Type=Images';//上传图片时浏览服务文件夹

// config.filebrowserFlashBrowserUrl = ckfinderPath + '/ckfinder/ckfind er.html?Type=Flash'; //上传Flash时浏览服务文件夹

// config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connect or/aspx/connector.aspx?command=QuickUpload&type=Files'; //上传文件按钮(标签) // config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/co nnector/aspx/connector.aspx?command=QuickUpload&type=Images';//上传图片按钮(标签)

// config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/co nnector/aspx/connector.aspx?command=QuickUpload&type=Flash';//上传Flash按钮(标签)

};

①以上我们设定了控件默认语言为中文(https://www.360docs.net/doc/2e16789018.html,nguage = 'zh-cn';)

②默认的工具栏为Basic,并且在config.toolbar_Basic =[];中定义了工具栏中需要的功能

③添加了对中文字体的支持config.font_names = '宋体;楷体;新宋体;黑体;隶书;幼圆;微软雅黑;'

√ 做完以上配置,经过我们精简和优化的ckeditor呈现形式如下:

二、下载安装Ckfinder,并将其整合到项目中

1、解释:什么是Ckfinder?为什么要使用它?下图会给您说明

2、如何下载

√ 打开https://www.360docs.net/doc/2e16789018.html,/,点击Download进入下载页面

√ 在下载页面可以看到,ckfinder针对许多语言做了单独设计,此处我们选择https://www.360docs.net/doc/2e16789018.html,

√ 将下载后的文件放在JS文件夹下,然后删除_samples、_source两个文件夹

(注:_sample为示例文件夹,我们不需要;_source为源代码文件夹,可以通过修改它对ckfinder默认行为进行定义:比如修改上传文件的名称,下面会讲到)

3、下面讲如何将CKFinder整合到我们的应用中

√ 将ckfinder目录下的ckfinder.js拖拽至title标签下方,以示引用

√ 在$(function(){})中添加如下语句,将ckfinder整合至ckeditor

CKFinder.setupCKEditor(ckeditor, "/JS/ckfinder/");//用CKFinder.setupCKEditor 命令将ckeditor与ckfinder进行整合

说明如下:

√ 添加CKFinder.dll引用,路径在JS\ckfinder\bin\Relase 下

√ 按F5运行,此时再次点击”图像“按钮,会发现多出”上传“选项

√ 添加上传权限

默认情况下,为了安全,ckfinder不允许上传附件,如果需要上传,则需要更改JS\ ckfinder下的config.ascx文件,将CheckAuthentication()方法返回true

√ 关闭https://www.360docs.net/doc/2e16789018.html,验证功能。处于安全性考虑,https://www.360docs.net/doc/2e16789018.html,会对请求的数据及事件进行安全性验证,而我们上传的文件都是安全的,不需要这些验证,所以去掉这些功能。

√ 如果用的是.net4.0,那么请在web.config中加入如下代码,将验证模式改为2.0

4、CKFinder个性化定制

√ 规定文件上传的路径。

默认情况下,ckfinder会把文件上传到ckfinder\userfiles目录,以此类推。下面我们要改变它自有的规则,自定义文件存放位置。

同样找到config.ascx文件,定位到SetConfig方法,其中的BaseUrl就是上传文件的默认路径,根据实际需要修改即可

√ 以上我们放开了上传权限,更改了上传目录,按F5键,上传一个图片查看效果

定位到UPLOAD目录(我们自定义的文件上传目录),查看我们上传的文件

√ 如果我们想更改上传到服务器的文件名称,例如:以日期时间命名,如何做呢?

√ 这就需要更改源文件,打开刚才下载并解压好的ckfinder文件夹,将_source目录中的https://www.360docs.net/doc/2e16789018.html,.sln拖到vs2010中进行编辑

√ 按F5预览,再次上传一个文件,此时可以看到文件名改成了以日期和时间命名的形式

三、添加模拟数据

1、新建数据库文件

√ 此时会弹出一个对话框,提示程序会自动建立App_Data文件夹,并把数据库放到该文件夹下,点击”是“即可

√ 双击db_test.mdf数据库,左侧会出现并选中刚才创建的数据库db_test,右键点击,我们需要创建一个”表“

√ 数据库字段定义如下:

√ 设置id(主键)列的默认值

√ 设置post_time(提交时间)列的默认值

√ 右键点击第一行,设置id列为主键

√ 在右侧属性栏处,为该表命名

√ 关闭该表

四、数据的展示

1、用ListView控件呈现数据库内容

√ 让ListView根据数据库(tb_test)的格式自动生成数据

富文本编辑器的技术演进

富?文本编辑器?的技术演进

?目录一、富文本编辑器介绍 二、语雀文档编辑器面临的问题与解决思路 三、多人实时协同的解决思路

富?文本编辑器? - 常?见交互 富文本输入框 - 输入内容 - 选中 & 操作 操作栏 - 顶部工具栏 - 侧边栏 - 内嵌工具栏

富?文本编辑器? - 浏览器?特性 富文本输入框

这里可以编辑
对内容进行操作 document.execCommand(‘bold’);

富?文本编辑器? - 技术类型 类型描述典型产品 L01、基于 contenteditable 2、使?用 document.execCommand 3、?几千~?几万?行行代码 早期的轻量量级编辑器? L11、基于 contenteditable 2、不不?用 document.execCommand,?自主实现 3、?几万?行行~?几?十万?行行代码 CKEditor、TinyMCE Draft.js、Slate ?石墨??文档、腾讯?文档 L21、不不?用 contenteditable,?自主实现 2、不不?用 document.execCommand,?自主实现 3、?几?十万?行行~?几百万?行行代码 Google Docs O?ce Word Online iCloud Pages WPS ?文字在线版

富?文本编辑器? - 不不同类型的优劣 类型优势劣势 L0技术?门槛低,短时间内快速研发可定制的空间?非常有限 L1站在浏览器?肩膀上,能够满?足 99% 业务场景?无法突破浏览器?本身的排版效果 L2技术都掌控在?自?己?手中,?支持个性化排版技术难度相当于?自研浏览器?、数据库

百度Ueditor配置步骤

百度Ueditor配置步骤 一、官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示: _examples:编辑器完整版的示例页面 dialogs:弹出对话框对应的资源和JS文件 themes:样式图片和样式文件 php/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里应该是jsp,php,.net third-party:第三方插件(包括代码高亮,源码编辑等组件) editor_all.js:_src目录下所有文件的打包文件 editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用 editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录 二、部署UEditor到实际项目(UETest)中的步骤: 第一步:在项目的任一文件夹中建立一个用于存放UEditor相关资源和文件的目录,此处在项目根目录下建立,起名为ueditor。

第二步:拷贝源码包中的dialogs 、themes 、third-party 、editor_all.js 和editor_config.js 到ueditor 文夹中。其中,除了ueditor 目录之外的其余文件均为具体项目文件,此处所列仅供示例。 第三步:为简单起见,此处将以根目录下的index.aspx 页面作为编辑器的实例化页面,用来展示UEditor 的完整版效果。在index.aspx 文件中,首先导入编辑器需要的三个入口文件,示例代码如下: 1 2 3 编辑器完整版实例 第四步:然后在index.aspx 文件中创建编辑器实例及其DOM 容器。具体代码示例如下: 1 2 3 4 5 6 7 //下面是实例化 最后一步: 在/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

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

文本编辑器应用总结 一.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/2e16789018.html,/,点击Download进入下载页面 √ CKEDITOR支持多种编程语言及框架(如:java、https://www.360docs.net/doc/2e16789018.html,、sharepoint等),我们选择https://www.360docs.net/doc/2e16789018.html, √ 下载后解压,简单解释里面内容 3、下面讲如何将CKEditor整合到我们的应用中 √ 新建一个网站

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

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

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

Ueditor在线编辑器配置示例 1.简介 UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。 2.下载 首页地址:https://www.360docs.net/doc/2e16789018.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/2e16789018.html,/krysml/article/details/9006533

汇编语言实现文本编辑器

汇编语言课程设计 题目文本方式下字处理程序的设计与实现 学院计算机科学与技术学院 专业计算机科学与技术 班级计算机科学与技术0705 课程设计任务书 题目: 文本方式下字处理程序的设计与实现 初始条件: 理论:完成了《汇编语言程序设计》课程,对微机系统结构和80系列指令系统有了较深入的理解,已掌握了汇编语言程序设计的基本方法和技巧。 实践:完成了《汇编语言程序设计》的4个实验,熟悉了汇编语言程序的设计环境并掌握了汇编语言程序的调试方法。 要求完成的主要任务:(包括课程设计工作量及其技术要求,以及说明书撰写等 具体要求) 理解键盘和显示器接口的工作原理,掌握BIOS键盘和显示器中断调用的使用方法,掌握复杂内存数据结构的定义和管理方法。具体的设计任务及要求: 1)清晰且易于操作的用户界面;动态显示光标的当前位置; 2)在文本编辑区接受并保存输入信息; 3)光标上移,下移,左移,右移; 4)允许删除当前光标前的字符; 5)将编辑文本存盘,读出并显示硬盘中的指定文件。(任选) 在完成设计任务后,按要求撰写课程设计说明书;对课程设计说明书的具体要求请见课程设计指导书。 阅读资料:

1)《IBM—PC汇编语言程序设计实验教程》3.3节 2)《IBM—PC汇编语言程序设计(第2版)》9.1节 时间安排: 设计安排一周:周1、周2:完成系统分析及设计。 周3、周4:完成程序调试,和验收。 周5:撰写课程设计报告。 指导教师签名:年月日 系主任(或责任教师)签名:年月日 一、系统描述 1、目的 (1)掌握计算机汇编语言的使用。学完汇编课程,理解和掌握键盘和显示器接口的工作原理,掌握BIOS键盘和显示器中断调用的使用方法,掌握复杂内存数据结构 的定义和管理方法。 (2)通过设计、编制、调试一个文本方式下字处理程序。实现一个简单的文本编辑器的基本功能 2、设计内容 1)清晰且易于操作的用户界面; 2)动态显示光标的当前位置; 3)在文本编辑区可以输入字符信息; 4)光标上移,下移,左移,右移,还可以回车,使用home键、end键退格键; 5)允许删除当前光标前的字符; 6)将编辑文本存盘,读出并显示硬盘中的指定文件。 3、开发平台 所使用的系统:Windows XP 程序开发工具:Masn for Windows 6.0 集成实验开发环境 序设计语言:IBM-PC 汇编语言 二、文本编辑译系统的概要设计 文本编辑程序要实现简单的文本编辑器基本功能。 1.设计一个友好,易于操作的界面,界面可仿照windows记事本,但windows记事本 的菜单项不好制作,所以将主要功能说明制作到边框,方便使用即可。并且实现在

相关文档
最新文档