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

合集下载

在java项目中加入百度富文本编辑器

在java项目中加入百度富文本编辑器

在java项⽬中加⼊百度富⽂本编辑器富⽂本编辑器在项⽬中很常见,他可以将⽂本,图⽚等信息存⼊数据库,在编辑⼀些图⽂混排的信息的时候很有⽤,⽐如商城项⽬的商品详情页,包含很多带有样式的⽂字和图⽚。

此前⼀直使⽤的百度的富⽂本编辑器ueditor。

直接说怎么⽤。

1.⾸先去下载安装包,把它放在webapp下⾯,如下所⽰。

⾄于如何下载,可⾃⾏百度。

2.maven项⽬的话需要在pom.xml中加⼊如下语句,以导⼊所需要的包。

<!-- 百度富⽂本 --><dependency><groupId>com.github.qiuxiaoj</groupId><artifactId>ueditor</artifactId><version>1.1.1</version></dependency><dependency><groupId>org.json</groupId><artifactId>json</artifactId><version>20170516</version></dependency>如果不是maven项⽬则将安装包中jsp下的lib下的jar包拷⼊项⽬的lib下即可。

3.在页⾯中引⼊相关的js⽂件。

<!-- 百度编辑器 --><script type="text/javascript" charset="utf-8"src="./ueditor1_4_3/ueditor.config.js"></script><script type="text/javascript" charset="utf-8"src="./ueditor1_4_3/ueditor.all.js"></script><script type="text/javascript" charset="utf-8"src="./ueditor1_4_3/lang/zh-cn/zh-cn.js">4.配置ueditor的相关⽂件,⾸先配置ueditor.config.js这个⽂件,主要是为了能让上传图⽚等功能⽣效,才需要配置这个⽂件。

ultraedit编码 没有utf-8 -回复

ultraedit编码 没有utf-8 -回复

ultraedit编码没有utf-8 -回复UltraEdit是一款功能强大的文本编辑器,广泛用于程序编写、文本处理和文件管理等领域。

然而,有一点让使用者感到困惑和不满的是,UltraEdit 没有原生支持UTF-8编码。

本文将一步一步回答关于UltraEdit编码的问题,并提供解决方案。

第一步:了解编码在介绍UltraEdit的编码问题之前,我们需要先了解编码的概念。

编码是一种将字符映射到数字的过程,它使得计算机可以处理和存储文本。

常见的编码包括ASCII、UTF-8、GBK等。

第二步:UltraEdit中的编码设置UltraEdit默认使用ASCII编码进行文本的读写,这种编码只支持英文等基本字符,不支持中文和其他特殊字符。

因此,对于需要处理非ASCII字符的用户来说,这样的编码设置是不够满足需求的。

第三步:解决方案由于UltraEdit没有原生支持UTF-8编码,我们需要借助一些工具和技巧来实现UTF-8编码的支持。

以下是几种常用的解决方案:1. 使用外部工具:UltraEdit提供了“运行”功能,可以调用外部工具来完成一些特定的任务。

我们可以利用这个功能来调用其他编辑器或转码工具,将UTF-8编码的文件转换为UltraEdit可以处理的编码(比如ASCII 或GBK),然后再进行编辑和保存。

2. 手动转码:如果你不想依赖外部工具,也可以选择手动转码。

首先,需要用其他支持UTF-8编码的编辑器打开文件,将其保存为ASCII或GBK 编码,然后再用UltraEdit打开和编辑。

当你完成编辑后,再将文件转换回UTF-8编码即可。

3. 扩展插件:虽然UltraEdit本身不支持UTF-8编码,但是它支持插件扩展。

你可以搜索并安装一些第三方插件,来增加对UTF-8编码的支持。

请注意,这种方式可能需要一些额外的配置和学习。

第四步:选择合适的解决方案在选择合适的解决方案时,你需要考虑以下几个方面:- 文件类型:如果你只是处理纯文本文件,那么使用外部工具或手动转码可能是最简单的选择。

thinkPHP下ueditor的使用方法详解

thinkPHP下ueditor的使用方法详解

thinkPHP下ueditor的使⽤⽅法详解本⽂实例讲述了thinkPHP下ueditor的使⽤⽅法。

分享给⼤家供⼤家参考,具体如下:2、下载对应的php版的,下载后重命名为ueditor,根据需要放到对应的项⽬⽬录中。

我放的位置为Public/admin⽂件夹下,admin为后台的访问⼊⼝⽂件⽬录。

3、在项⽬中的使⽤⾸先需要引⼊核⼼的js⽂件:<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/ueditor/ueditor.all.js"></script>然后再⽂件中加⼊<textarea>标签,注意设置id属性复制代码代码如下:<textarea name="content" id="EditorId"> </textarea>接着是初始化编辑器,注意配置路径<script type="text/javascript" charset="utf-8">window.UEDITOR_HOME_URL = "__PUBLIC__/admin/ueditor/";window.onload=function(){window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的⾼度window.UEDITOR_CONFIG.initialFrameWidth=800;//编辑器的宽度var editor = new UE.ui.Editor({imageUrl : '__APP__/Editor/uploadImage',fileUrl : '__APP__/Editor/uploadFile',imagePath : '',filePath : '',imageManagerUrl:'__APP__/Editor/imageManage', //图⽚在线管理的处理地址imageManagerPath:'__ROOT__/'});editor.render("EditorId");}</script>注意:1、UEDITOR_HOME_URL的路径配置为ueditor所在的位置。

ueditor1_4_3_3编辑器的应用

ueditor1_4_3_3编辑器的应用

ueditor1_4_3_3编辑器的应⽤教程使⽤的是ueditor1_4_3_3版本。

下载好以后,解压,把解压⽂件夹命名为ueditor然后把ueditor⽬录整个复制到webapp下在⾃⼰需要编辑器的页⾯引⼊ueditor的js在body中:<head></head>中:<script type="text/javascript">//实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例,如果在某个闭包下引⽤该编辑器,直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor');</script>把ueditor/jsp/lib下的jar包全部添加到项⽬⾥。

另外还需要⼀个jar包,此处在pom.xml配置了:<dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version></dependency>然后在ueditor.config.js中找到,zIndex : 900 并去掉注释,修改值为 999999修改附件上传⽬录:部署,去掉部署项⽬名:保存以后要展⽰时,在需要代码⾼亮的页⾯配置:还要把后台取数据的ajax变为同步加载!需要展⽰的时候⾃动换⾏在相应css添加下⾯代码即可:编辑器中添加代码是背景⾊修改:编辑器中图⽚⾃适应:iframe.css中添加/*可以在这⾥添加你⾃⼰的css*/img {max-width: 100%; /* 图⽚⾃适应宽度 */}body {overflow-y: scroll !important;}.view {word-break: break-all;}.vote_area {display: block;}.vote_iframe {background-color: transparent;border: 0 none;height: 100%;}⼀些技巧:uuditor常⽤的js函数在ueditor/index.html⾥⾯能找到,⽐如获取编辑框⾥⾯的内容等等。

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

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

Ueditor在线编辑器配置示例1.简介UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

2.下载首页地址:/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中,不解的可以参照:/krysml/article/details/90065335.示例本例中上述配置好之后,可以实现图片编辑等内容页面代码示例如下:6.自定义:对于需要更多特性的定义,可以参照ueditor官网需要将图片插入数据库的,可以将ueditor-1.1.2.jar进行反编译,修改对于需要完全自定义的,可以直接抛弃ueditor-1.1.2.jar的引用,直接使用自定义的方法进行功能设定,返回对应的json数据即可。

ueditor1_4_3_3编辑器修改文章

ueditor1_4_3_3编辑器修改文章

ueditor1_4_3_3编辑器修改⽂章html的body中:<script id="editor" type="text/plain" ></script>js中://实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例,如果在某个闭包下引⽤该编辑器,直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor',{//initialFrameWidth :980,//设置编辑器宽度initialFrameHeight:500,//设置编辑器⾼度scaleEnabled:true});后台取出原本⽂章内容放⼊编辑器(ajax回调函数中):var content = data.body;//判断ueditor 编辑器是否创建成功ue.addListener("ready", function () {// editor准备好之后才可以使⽤ue.setContent(content);});例⼦:html代码:<!doctype html><html><head><meta charset="UTF-8"><title>oneUser</title><link href="/css/blog_style.css" rel="stylesheet" type="text/css"/><script type="text/javascript" src="/js/jquery.min.js"></script><script type="text/javascript" src="/js/datepattern.js"></script><script type="text/javascript" src="/ueditor/ueditor.config.js"></script><script type="text/javascript" src="/ueditor/ueditor.all.js"></script><script type="text/javascript" src="/ueditor/lang/zh-cn/zh-cn.js"></script><script type="text/javascript" src="/js/commons_head_foot.js"></script><script type="text/javascript" src="/js/modifyBlog.js"></script></head><body><div><div id="commons_head"></div><div class="navigation"><span>标题:</span><input id="essay_title" type="text" style="font-size:18px;font-weight:bold;"/><br><br>评论:<span id="evaluateCount"></span>点赞:<span id="admireCount"></span><br><span id="createTime"></span></div><div class="center_body" style="margin-top:5px;"><script id="editor" type="text/plain"></script><input type="button" id="modifyContent" value="提交修改" style="float:right;"/></div><div id="commons_foot"></div></div></body></html>js代码:$(function(){//实例化编辑器//建议使⽤⼯⼚⽅法getEditor创建和引⽤编辑器实例,如果在某个闭包下引⽤该编辑器,直接调⽤UE.getEditor('editor')就能拿到相关的实例var ue = UE.getEditor('editor',{//initialFrameWidth :980,//设置编辑器宽度initialFrameHeight:500,//设置编辑器⾼度scaleEnabled:true});var ur = window.location.search;var essayId = ur.substring(9,ur.length);$.ajax({url:"/frame/myEssayDetails/"+essayId,type:"get",contentType:"application/json;charset=utf-8",dataType:"json",success:function(data){$("#essay_title").val(data.title);var essayId = data.id;$("#createTime").html(new Date(data.createTime).pattern("yyyy-MM-dd hh:mm:ss")); $("#evaluateCount").html(data.evaluateCount);$("#admireCount").html(data.admireCount);var content = data.body;//判断ueditor 编辑器是否创建成功ue.addListener("ready", function () {// editor准备好之后才可以使⽤ue.setContent(content);});},error:function(){alert("error");}});$("#modifyContent").click(function(){var allHtml = UE.getEditor('editor').getContent();var title = $("#essay_title").val().trim();$.ajax({url:"/frame/essay",type:"post",contentType:"application/json;charset=utf-8",data:JSON.stringify({"id":essayId,"title":title,"body":allHtml}),dataType:"json",success:function(data){if (data.success==true) {var url = "/index.html";window.location.href=url;} else {alert(data.message);}},error:function(){alert("出错了");}});});});。

ECSHOP安装百度编辑UEditor教程

ECSHOP安装百度编辑UEditor教程

ECSHOP安装百度编辑UEditor教程先看效果图:教程开始:打开这两个文件,一个是商品编辑,一个是文章编辑/admin/templates/goods_info.htm/admin/templates/article_info.htm查找:1 {$FCKeditor}修改成:<script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="utf-8" src="../includes/ueditor/ueditor.all.min.js"> </script> <!--建议手动加在语言,避免在ie下有时因为加载语言失败导致编辑器加载失败--><!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型,比如你在配置项目里配置的是英文,这里加载的中文,那最后就是中文--><script type="text/javascript" charset="utf-8" src="../includes/ueditor/lang/zh-cn/zh-cn.js"></script> <style type="text/css">.clear {clear: both;}</style><textareaid="goods_desc" name="goods_desc" style="width:100%;heigh t:500px;"> {$goods.goods_desc}</textarea><script type="text/javascript">delete(Object.prototype.toJSONString);UE.getEditor('goods_desc')</script>两个文件都这样修改。

JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明

JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明

JSP版(utf8编码)的Ueditor百度⽂章编辑器配置以及使⽤说明⼆话不说,先上图:我配置好的效果⼤致是这些功能:基本的⽂字编辑功能、图⽚上传功能、附件上传功能、百度/⾕歌地图搜索截图、视/⾳频发布功能。

这个插件是现今我⽤过觉得最舒服的编辑器,功能齐全强⼤,稍微修改下配置即可投放使⽤,来,⾛起!1、最新版的官⽅插件跟先前的版本不⼀致,所以我还是⽤先前的版本,是今年5、6⽉份版本。

插件包JSP版(utf8编码)下载地址(1分不算多吧,^_^,我的⾦币较少,赞助我点⾦币哈,评论即可获得1分)2、⽡公司⽤eclipse来开发,但是⼤多数⼈都是⽤myeclipse,所以我⽤myeclipse来演⽰:⾸先,新建⼀个webProject项⽬随便起个名字,如a,把解压后的ueditor插件包复制黏贴到webRoot根⽬录下然后打开editor_config.js这个配置⽂件,⼀看,⽡擦,乱码!然后点击项⽬a,按住Ctrl+回车,把项⽬a的环境从gbk换成utf8编码,此时乱码问题解决。

然后再这个配置⽂件的29⾏,找到URL= window.UEDITOR_HOME_URL||"/t/ueditor/";这句话,改成‘URL=window.UEDITOR_HOME_URL||"/项⽬名/ueditor/’即‘URL= window.UEDITOR_HOME_URL||"/a/ueditor/’;接着修改index.jsp⽂件,在<head/>上⾯加⼊引⽤的js包和css样式代码:[html]1. <script type="text/javascript" charset="utf-8" src="./ueditor/editor_config.js"></script>2. <script type="text/javascript" charset="utf-8" src="./ueditor/editor_all.js"></script>3. <LINK rel=stylesheet href="ueditor/themes/default/ueditor.css">然后在<body>标签⾥加⼊⽡调好的编辑器代码,如下:[html]1. <div align="center">2. <textarea id="newsEditor" name="content"> </textarea>3. <br/>4. <input type="submit" value="发布" >5. <script type="text/javascript">6.7. UE.getEditor('newsEditor');8.9. </script>10. lt;/div>保存的时候把⾸⾏的pageEncoding="ISO-8859-1"改为pageEncoding="utf-8",即可保存部署上传,然后浏览器打开http://localhost:8888/a/,我设置的端⼝是8888,⼤多数⼈⽤的都是http://localhost:8080/a/效果图就这样。

JSP中eWebEditor使用说明

JSP中eWebEditor使用说明

JSP中eWebEditor使用说明Ewebeditor使用说明:一、部署方式:1、直接把压缩目录中的文件拷贝到您的网站发布目录下;2、配置对应WEB-INF下文件,把eWebEditor文件夹下WEB-INF/web.xml中复制到你的应用中的WEB-INF/web.xml中;3、把WEB-INF下的Style.xml和Button.xml复制到你的应用中的WEB-INF目录下;4、把eWebEditor/WEB-INF/lib下的dom4j.jar和jspsmartupload.jar包复制到你应用的WEB-INF/lib下;注:net.jar为ewebeditor原/WEB-INF/classes下的class文件,我把它打包后放到应用的lib下,以免跟其它class混淆;5、在你要调用编辑器的代码中加入:在</head>前加入:提交表单时触发这个函数把eWebEditor中的值复制到你的表单中,然后在你的form中调用它:<form name="form1" onsubmit=" subchk()">6、重新启动服务器即可。

二、设置:界面修改:一般只修改/WEB-INF目录下面的style.xml和button.xml就可以了,button.xml为编辑界面配置文件,如果有菜单显示不全,可以在里面修改大小。

====================================== ==============上传图片路径设置://默认上传默认目录为xx/upload/,xx为你的根目录//此处设置上传文件保存路径,注意路径要由ROOT开始===3处======================//修改此处需修改WEB-INF/Style.xml文件对应处<suploaddir>/upload/</suploaddir>//修改此处需修改eWebEditor.jsp文件对应处//修改此处需修改upload.jsp文件对应处例如要传到根目录的/upload/下面:upload.jsp中String sUploadFilePath="/upload/";Style.xml中<suploaddir>/upload/</suploaddir>eWebEditor.jsp 中String sUploadFilePath="../upload/";//设置文件上传后在ewebeditor编辑器中图片显示地址这样就好了。

Ueditor1.4.3 jsp utf-8 版配置

Ueditor1.4.3 jsp utf-8 版配置

最近做项目要用到在线编辑器。

(也就是现在编写博客用的东东)。

经一番折腾发现百度编辑器Ueditor 真心好用,配置也方便。

废话不多,j进入正题:首先,在Ueditor首页下载编辑器。

我用的是开发板 1.4.3jsp版本utf-8版。

解压后可以看到如下目录:myeclipse下新建项目,在项目的WebRoot下新建文件夹ueditor。

将ueditor1_4_3-utf8-jsp目录下的文件全部复制到ueditor目录下,当然,/jsp/lib下的jar得放到项目WEB-INF/下的lib文件夹下。

出现错误:Errors occurred during the build.Errors running builder 'JavaScript Validator' on project 'a'.7 这是Myeclipse的bug。

可以在通过:右键项目->Properties->Builders->将Javascripte Validator前的复选框去掉 ->OK 解决。

然后下面是参照Ueditor官方文档给出的例子写的测试页:在这<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>ueditor demo</title><!-- 配置文件 --><script type="text/javascript"src="ueditor/ueditor.config.js"></script><!-- 编辑器源码文件 --><script type="text/javascript"src="ueditor/ueditor.all.js"></script><link rel="stylesheet" type="text/css"href="udeditor/themes/default/css" /></head><body><!-- 实例化编辑器 --><script type="text/javascript">var ue = UE.getEditor('container');</script><!-- 加载编辑器的容器 --><textarea id="container" name="content">这里写你的初始化内容</textarea></body></html>就这么简单,编辑器出现了。

Ueditor1.4.3jsputf-8版配置

Ueditor1.4.3jsputf-8版配置

Ueditor1.4.3jsputf-8版配置最近做项目要用到在线编辑器。

(也就是现在编写博客用的东东)。

经一番折腾发现百度编辑器Ueditor 真心好用,配置也方便。

废话不多,j进入正题:首先,在Ueditor首页下载编辑器。

我用的是开发板1.4.3jsp版本utf-8版。

解压后可以看到如下目录:myeclipse下新建项目,在项目的WebRoot下新建文件夹ueditor。

将ueditor1_4_3-utf8-jsp目录下的文件全部复制到ueditor 目录下,当然,/jsp/lib下的jar得放到项目WEB-INF/下的lib文件夹下。

出现错误:Errors occurred during the build.Errors running builder 'JavaScript Validator' on project 'a'.7 这是Myeclipse的bug。

可以在通过:右键项目->Properties->Builders->将Javascripte Validator前的复选框去掉 ->OK 解决。

然后下面是参照Ueditor官方文档给出的例子写的测试页:在这<="" bdsfid="83" p="" rel="stylesheet" type="text/css"/>href="udeditor/themes/default/css" />就这么简单,编辑器出现了。

但是图片上传却出现图片无法加载,多图上传中的网络图片可出现,但可恶的是1.4.3有个自动保存的bug。

在ueditor.config.js 中的设置配置禁止自动本地保存无效。

于是就看到:(博客上图太慢,以后修改)图片无法显示。

查看官方文档,竟然没有JSP版的。

Ultraedit 使用手册

Ultraedit 使用手册

Ultraedit 使用手册Ultraedit 是一个文本编辑器软件,启动速度很快,体积小巧,占用内存较少,编辑功能强大全面。

为了更好地介绍它功能,我们分普通功能与特色功能介绍。

(一)普通功能普通功能就是指它作为一个文本工具所应该具有的功能。

File菜单:打开,保存文件等常见的操作。

Edit 菜单:恢复/重复操作、剪切和拷贝及粘贴、多项选择、多项删除等全面的编辑功;Date/Time 能在文章中自动加入日期;Toggle Word-Wrap 是类似Word 的自动换行功能。

Search 菜单:提供了查找、替换功能,换行定位、书签标记、字数统计功能。

Window 菜单:可以将多个编辑框进行有序排列,并在它们之间随意切换,也可通过直接点击编辑框上的标签在各个文本间切换;Show File In Browser 将直接启动默认浏览器,查看用HTML 语言所编辑的网页的实际效果;直接拖放、文件长度不限制等常规功能。

(二)特色功能1、Read Only:可以将正在阅读的文件设成只读属性,防止对重要文件进行误操作;2、拼写检查:Edit\Spell Check提供的拼写检查功能相当好使,感觉很像Word。

利用单词库,UltraEdit-32能检查文章中的每个单词,如单词库中不包含所书写的单词,会弹出对话框让用户作出相应处理:改正错词或添加新单词。

在第一次使用拼写检查时,如果UltraEdit-32 报告Error opening dictionary C:\PROGRAM FILES\ULTRAEDT\ssceam.tlx,这是因为UltraEdit-32 没有找到配套的字典文件*.tlx所至。

UltraEdit-32总共支持英文、法文、德文、西班牙文等八种文字拼写检查,但是需要你下载安装相应的字典文件。

3、Web 列表功能:这是其他文本编辑工具所不具备的,UltraEdit-32 的这个功能可以很好地对你本机或者通过局域网映射的Web 站点发布文件进行编辑,大大方便了我们这些经常更新站点的同志,好功能。

UEditor编辑器的使用教程

UEditor编辑器的使用教程

UEditor编辑器的使用教程
咱们在开发的时候经常会用到一些所见即所得的编辑器,今天给大家介绍一款由百度开发的UEditor,这个编辑器效果不错,用得起来也很方便简单,大家在开发的时候可以用到这款编辑器。

首先,咱们需要在网上下载这款编辑器:
/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-jsp
我这里下载的是支持jsp的最新版本,它还有支持php,.net的其它版本。

一、完成基本配置:
1.将下载的文件解压到咱们的JavaWeb项目中(如下图):
2.把相应的jar包导入到项目中(如下)
这几个jar包可以在/ueditor/jsp/lib中找到
最后展示的效果如下:
大家可以看到,这里可以完成各种设置(包含字体,表格,表情,图片等东西),整体看来,效果还是非常不错的。

二、参数配置效果
完成基本的配置之,咱们又要学习一下,看怎么来进行一些常用参数的配置。

三、上传图片功能
接下来咱们简单说一下插件的上传图片功能,上传功能是自带的,如果你是jsp+servlet 非常简单,直接使用就可以了,但是我们可以去设计上传的路径与名称。

大家可以在
文件的位置:文件中修改的位置(设置到自己需要的位置)
下面是上传了图片后的效果:
四、Struts2的上传功能
下面做一个扩展,如果咱们的项目是使用的Struts2,那么Struts2的核心过滤器会导致咱们的上传失效。

最新版UEDITOR使用教程

最新版UEDITOR使用教程

最近项目中使用到了富文本编辑器,选择的是百度的UEditor。

所以对其进行了研究,发现最近发布了新版本,与以往的用法有的改变。

一下对UEditotr 的是用做一下详细的介绍。

首先是UEditotr的下载,下载地址:/website/download.html在这个页面有很多下载选项,为了简单起见,可以更具开发的环境进行下载。

我用的是JSP,所以下载的是以下的使用说明也都是以JSP的作为介绍,其他的大同小异。

下载完成之后解压出来。

下边开始介绍使用方法:一.导入:将解压好的文件导入工程,我用的是MyEclipse,直接粘贴到工程中的WebRoot下如图:工程中的js文件报错是由于开发工具的问题,不用处理。

二.包的导入:在导入的文件中的jsp->lib下有需要导入的包将这些包拷贝到WEB-INF的lib下导入后有的包不能自动添加,需要手动添加一下。

三.简单例子:在jsp的head中添加:<script type="text/javascript"charset="utf-8"src="ueditor1_4_2-utf8-jsp/ueditor.config.js"></script> <script type="text/javascript"charset="utf-8" src="ueditor1_4_2-utf8-jsp/ueditor.all.js"></script>body中添加:<script id="editor" name="editor" type="text/plain"style="width:1024px;height:500px;"></script><script type="text/javascript">//实例化编辑器//建议使用工厂方法getEditor创建和引用编辑器实例,如果在某个闭包下引用该编辑器,直接调用UE.getEditor('editor')就能拿到相关的实例 var ue = UE.getEditor('editor');</script>注意在head中的引用是否正确,一切完成后启动程序,就能看到效果。

百度UEditor编辑器使用教程与使用方法(图文)

百度UEditor编辑器使用教程与使用方法(图文)

百度UEditor编辑器使⽤教程与使⽤⽅法(图⽂)我们在做⽹站的时候,⽹站后台系统⼀般都会⽤到web编辑器,今天笔者就给⼤家推荐⼀款百度UEditor编辑器。

关于这款百度UEditor编辑器官⽹上也有简单的教程,不过看着⽐较费劲,今天笔者就跟⼤家分享⼀下百度UEditor编辑器使⽤教程与使⽤⽅法,希望对⼤家有所帮助。

第⼀:百度UEditor编辑器的官⽅下载地址第⼆:百度UEditor编辑器的功能版本选择当我们进⼊百度UEditor编辑器官⽹点击下载选项后,我们发现⼀共有两个版本供我们选择,⼀个是UBuilder,⼀个是开发版,通过下⾯注释的红⾊⼩字我们可以了解到UBuilder和开发版的区别。

⼀般情况下我们选择UBuilder版本即可。

跟我们以往下载软件的⽅式不同,UEditor采⽤选择性下载。

⾸先是可见功能的选择,共有基本,插⼊,格式化,表格四⼤组,每组下⾯都有若⼲功能按钮,我们可以根据⾃⼰的需求来进⾏选择,如果双击四⼤组则表⽰全选该组按钮。

如果对选择的按钮不满意还可以点击清空选择,有⼀点要提⽰的是如果点击清空选择会清楚掉你原先做过的所有选择。

接着就是隐藏功能,语⾔,服务端版本的选择,隐藏功能默认的是全选,如⾮必要还是不要更改为好。

语⾔选项共分为了中⽂和英⽂两种,默认的是只下载中⽂语⾔包,如果你有需要⽤到英⽂的话可以把英⽂包也加上。

服务端版本⽬前提供了三种,分别为PHP,.NET,JSP,选择完毕后我们就可以点击下载资源包了。

第三:百度UEditor编辑器的配置⽅法技巧1、从官⽹上下载完整源码包,解压到任意⽬录,解压后的源码⽬录结构如下所⽰:_examples:编辑器完整版的⽰例页⾯dialogs:弹出对话框对应的资源和JS⽂件themes:样式图⽚和样式⽂件 php/jsp/.net:涉及到服务器端操作的后台⽂件,根据你选择的不同后台版本,这⾥也会不同,这⾥我们选择phpthird-party:第三⽅插件(包括代码⾼亮,源码编辑等组件)editor_all.js:_src⽬录下所有⽂件的打包⽂件(⽤于发布版本)editor_api.js: API接⼝配置⽂件(开发版本)editor_all_min.js:editor_all.js⽂件的压缩版,建议在正式部署时才采⽤editor_config.js:编辑器的配置⽂件,建议和编辑器实例化页⾯置于同⼀⽬录2、编辑器的实例化页⾯,导⼊编辑器需要的三个⼊⼝⽂件,⽰例代码如下:<script type="text/javascript" charset="utf-8" src="../umeditor.config.js"></script><!--使⽤版--><!--<script type="text/javascript" charset="utf-8" src="../umeditor.all.js"></script>--><!--开发版--><script type="text/javascript" charset="utf-8" src="editor_api.js"></script><script type="text/javascript" src="../lang/zh-cn/zh-cn.js"></script>3、然后在编辑器的实例化页⾯中创建编辑器实例及其DOM容器,⽰例代码如下:<textarea name="后台取值的key" id="myEditor">这⾥写你的初始化内容</textarea><script type="text/javascript">var editor = new UE.ui.Editor();editor.render("myEditor");//1.2.4以后可以使⽤⼀下代码实例化编辑器//UE.getEditor('myEditor')</script>4、在editor_config.js中查找URL变量配置编辑器在你项⽬中的路径。

ueditor使用说明jsp版最新版

ueditor使用说明jsp版最新版

Ueditor使用说明:1、下载最新版本Ueditor,如下图所示:ueditor_release_ueditor1_4_3_1-utf8-jsp.zip2、解压Ueditor文件,如图:3、在MyEclipse已建好的web Project项目下新建一个folder,命名为”ueditor”,将上图所示的文件全部拷贝进ueditor文件夹下。

(为了方便后面的配置,文件夹最好是在webroot 根路径下)4、配置图片、视频、文件的上传下载路径,在ueditor ---> jsp ---> config.json文件如下图:配置如下:以上传图片配置为例:修改imageUrlPrefix和imagePathFormat两项配置,配置上合适的路径;因为ueditor是直接放在根路径下,如图:5、配置完毕,可以实例化ueditor编辑器。

新建一个JSP页面ueditorTest.jsp:在<HEAD>标签中引入相关的JS文件:在<BODY>:style设置编辑器的长宽实例化编辑器:6、访问项目下ueditorTest.jsp页面:http://localhost/MyUeditorTest,访问结果如图所示:7、为了便于后台获取编辑框中的数据,可以用<form>表单标签包围编辑,并给编辑器区域的name属性赋值:onclick = ”getC()”可以在提交表单之前,显示下编辑器的内容,如图:效果如图所示:8、后台对应action,对content变量提供get() 和set() 方法,做相应的处理。

9、如果觉得ueditor的工具栏过于复杂,使用过程中并不会完全使用到,可以通过ueditor 文件夹下的ueditor.config.js配置,更改工具栏的配置,进行自定义工具栏。

如图:。

ueditor配置

ueditor配置

Ueditor配置4.1 手动部署1.解压对应的UEditor压缩包至Tomcat的webapps目录下,最终,UEditor的安装路径为:2.D:\apache-tomcat-6.0.41\webapps\ueditor1_4_3-utf8-jsp\3.进入目录:4.D:\apache-tomcat-6.0.41\webapps\ueditor1_4_3-utf8-jsp\5.创建如下两个文件夹(注意区分大小写):6.WEB-INF\lib\7.拷贝目录:8.D:\apache-tomcat-6.0.41\webapps\ueditor1_4_3-utf8-jsp\jsp\lib\9.下的所有jar包到第2步创建的lib目录下,结果如图所示:10.部署完成,双击以下脚本文件,启动Tomcat(需要正确配置JAVA_HOME环境变量)。

11.D:\apache-tomcat-6.0.41\bin\startup.bat12.出现如下所示界面,则表示服务器启动成功。

13.进入5 验证安装步骤,验证部署是否成功。

14.4.2 Eclipse部署在我项目下的“WebRoot”目录上右击,在弹出的菜单中选择:Import->Import...,弹出如下图所示对话框:1.在弹出的对话框中展开General项,双击“File System”后弹出对话框,如下图所示:2.点击“Browse...”按钮,在弹出的文件选择对话框中选中第3步中解压出来的ueditor文件夹,并勾选全部文件,结果如下图所示:3.点击“Finish”按钮,完成导入。

4.拷贝目录jsp/lib/下的所有jar包到WEB-INF/lib/目录下5.添加该项目到Tomcat中,并启动Tomcat,在Eclipse的“Console”面板中出现如下图所示的界面时,启动成功。

6.进入5 验证安装步骤,验证部署是否成功。

7.5 验证安装在浏览器地址栏中输入如下URL:http://localhost:8080/sqsm/jsp/controller.jsp?action=config出现类似下图所示内容,则配置成功,否则,即为失败。

UEditor配置,上传图片和附件及其他使用方法

UEditor配置,上传图片和附件及其他使用方法

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码。

这简直是Web开发富文本框输入的一大神器!最低来说,使用百度的富文本编辑器,无论是本地化还是相关操作学习文档,都比国外的FCKEdit神马的要好的多!首先是下载地址:/website/ipanel/panel.html下载时可以下载完整包,或者功能定制化下载;如果网站对富文本编辑器需求比较明确,尽量使用定制化下载,经测试,如果下载完整包,每次页面请求有800K内容,定制化下载后简单优化一下,页面可以缩小到600K甚至更小…。

如果页面访问量不大,对编辑器需求也不太明确,建议下载完整包罗,需要的功能通过配置后下载配置文件,以后只需在网站上更新UEditor的配置文件就可以完成功能更新了!基础配置UEditor除了具有功能强大、可定制等优点外,还始终将优化编辑操作、提升用户体验摆在了很重要的位置。

在这一点上,除了对编辑器功能、性能、实现细节等不断地改进和追求创新之外,众多灵活而个性化的自定义配置也充分体现了这个特点。

通过修改配置,用户几乎可以完全地改变编辑器的外观和行为。

从配置本身的优先级来看,UEditor的配置可以分为系统默认配置和用户自定义配置两种类型。

系统默认配置分散在各个对应的核心或者插件文件之中,对用户不可见。

当用户注释掉自定义配置时起作用。

用户自定义配置包括两种类型,一种位于editor_config.js 文件之中,优先级高于系统默认配置;另一种位于实例化编辑器时传入的参数中,优先级最高。

默认情况下,UEditor在editor_congfig.js注释掉了所有可以省略的配置项,采用系统默认配置,若取消注释,则以该配置项为准;未注释的配置项要求用户必需按照项目实际这里以.net环境和Visual Studio开发工具为例,看看UEditor的配置;在解决方案中新建目标文件夹用于放置UEditor的所有文件内容,我放在目标文件夹(Scripts)下使用VS时添加现有项太麻烦?有一个快捷办法,将UEditor解压缩后的整个文件夹复制到目标文件夹(Scripts)中,在VS的项目管理器上点击显示所有文件按钮,解决方案资源管理器的目标文件夹下可以找到UEditor的文件夹了,但是文件夹显示是隐藏状态,右键点击文件夹,选择包括在项目中,VS自动将UEditor下的文件夹和文件全部加载到解决方案资源管理器中。

vue 中文utf-8编码

vue 中文utf-8编码

vue 中文utf-8编码在Vue.js 项目中,默认情况下,Vue 文件和其他相关文件(如HTML 文件)都应该使用UTF-8 编码。

UTF-8 是一种可变长度的字符编码,它支持世界上几乎所有的字符。

确保你的Vue 项目文件都保存为UTF-8 编码的步骤如下:1. 编辑器设置:在你使用的代码编辑器中,通常有一个设置或保存文件时的选项,你可以选择将文件保存为UTF-8 编码。

确保设置中选择了"UTF-8" 或"UTF-8 without BOM"。

2. HTML 文件头部声明:在你的HTML 文件中,确保你有一个UTF-8 的字符集声明。

例如:```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Your Vue App</title></head><body><!-- Your Vue app content goes here --></body></html>```3. Vue 文件:对于Vue 单文件组件(.vue 文件),也要确保它们使用UTF-8 编码。

这通常是编辑器的默认设置,但你也可以在编辑器中手动检查并设置。

确保所有文件都是以UTF-8 编码保存,这有助于确保字符的正确显示,避免编码问题。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Ueditor在线编辑器配置示例
1.简介
UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

2.下载
首页地址:/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中,
不解的可以参照:
/krysml/article/details/9006533
5.示例
本例中上述配置好之后,可以实现图片编辑等内容
页面代码示例如下:
6.自定义:
对于需要更多特性的定义,可以参照ueditor官网
需要将图片插入数据库的,可以将ueditor-1.1.2.jar进行反编译,修改
对于需要完全自定义的,可以直接抛弃ueditor-1.1.2.jar的引用,直接使用自定义的方法进行功能设定,返回对应的json数据即可。

相关文档
最新文档