- 浏览: 294518 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
qq_24396407:
博主,两个问题:1.如上代码报错:java.security. ...
PHP和Java的RSA加密互通 -
wj196:
u011690782 写道楼主啊,怎么一直报错啊什么报错啊?J ...
PHP和Java的RSA加密互通 -
u011690782:
楼主啊,怎么一直报错啊
PHP和Java的RSA加密互通 -
学而不止:
怎样在myEclipse中使用debug调试程序? -
13donggua13:
:ll: :: ps:
java中null与""的区别
百度编辑器UEditor 下载:
http://ueditor.baidu.com/website/download.html
将包下载下来放在web包下,我的是这个:
在jsp页面按正确路径引入
在<head></head>中代码
注意:
提交的地方 一定要使用它提供的这个方法,因为这里有赋值.
要使得上传图片和附件等功能页面出来,就要调试editor_config.js。
其中的rootpath:
这是我项目所需的路径,依照自己的项目找到正确的插件地址就可以。
上传图片的页面在ueditor\dialogs\image\image.html
修改它的上传处理操作路径:
上传附件的页面在ueditor\dialogs\attachment\attachment.html
修改它的上传处理操作路径:
上传图片和附件功能实现代码放在ueditor\server\upload下,有各4种语言的上传例子,参照修改使用,以上的两个jsp('/upload/uploadImage.jsp'和 '/upload/uploadFile.jsp',
)就是参照里面的up.jsp做的,基本上不需要有大的改动,主要是把存储路径和访问路径调对,就行。
editor_config.js中的代码
up.jsp中的代码
editor_config.js中的代码中的 rootPath 和 up.jsp中的代码中的url就是图片的地址,访问的地址,就是把rootPath 转化为域名,这个自己好好调试一下就出来了,附件也和上传图片基本一样。重点还是自己弄清楚自己的路径怎么设置的,才能正确访问到。
jsp页面另一种赋值:
form提交之前或者js验证需要做一个操作:
官方文档可参考:
http://ueditor.baidu.com/website/document.html
解决了就好,呵呵
这个是取不到,在form里面应该隐藏一个hidden,在form提交之前给它设值。
比如:
<input id="custom-content" name="contents" type="hidden">
$("#custom-content").val(editor.getContent());
这个就是富文本呀,如果确实需要,可以在后台将标签过滤掉,jsoup就可以。
另外我也写了篇类似的文章,传送门:http://asialee.iteye.com/blog/1749341
这种request.getParameter("textAreaName")方式是取不到值,提交的时候,必须有这个 <script type="text/plain" id="myEditor">${description}</script> 。
我去到的也是带了标签,这个没有找到方法去掉呢,我现在也很头疼复制粘贴,样式过来会变乱,问题真的很多呢。
http://ueditor.baidu.com/website/download.html
将包下载下来放在web包下,我的是这个:
在jsp页面按正确路径引入
在<head></head>中代码
<script type="text/javascript" charset="utf-8" src="<c:url value='/js/ueditor/editor_config.js'/>"></script> <script type="text/javascript" charset="utf-8" src="<c:url value='/js/ueditor/editor_all_min.js'/>"></script> <link rel="stylesheet" href="<c:url value='/js/ueditor/themes/default/ueditor.css'/>" /> <script src="<c:url value="/js/jquery/jquery-1.4.2.min.js"/>"></script> <script language="javascript"> $(document).ready(function() { var editor = new baidu.editor.ui.Editor({ textarea : 'description' // textarea 的名称,后台就是接这个变量。 }); //var URL="../js/ueditor/"; editor.render("myEditor"); $('#submitLink').removeAttr("href") .click(function() { if(editor.hasContents()){ //提交条件满足时提交内容 editor.sync(); //此处的editor是页面实例化出来的编辑器对象 $('#caseForm').submit(); }else{ alert("案例描述 不能为空!! "); } }).css({ 'cursor' : 'pointer' }); $('#cancelLink').removeAttr("href") .click(function() { //$('#caseForm').submit(); }).css({ 'cursor' : 'pointer' }); }); </script>
<form id="caseForm" name="caseForm" action="uploadCase.do" method="post" enctype="multipart/form-data"> <tr> <td valign="top">描述</td> <td colspan="2"> <script type="text/plain" id="myEditor">${description}</script> </td> </tr> <a id="submitLink" >确定</tt></a> <a id="cancelLink" > 取消</tt></a>
注意:
提交的地方 一定要使用它提供的这个方法,因为这里有赋值.
要使得上传图片和附件等功能页面出来,就要调试editor_config.js。
//dialog内容的路径 ~会被替换成URL iframeUrlMap:{ 'anchor':rootPath+'/js/ueditor/dialogs/anchor/anchor.html', 'insertimage':rootPath+'/js/ueditor/dialogs/image/image.html', 'inserttable':rootPath+'/js/ueditor/dialogs/table/table.html', 'link':rootPath+'/js/ueditor/dialogs/link/link.html', 'spechars':rootPath+'/js/ueditor/dialogs/spechars/spechars.html', 'searchreplace':rootPath+'/js/ueditor/dialogs/searchreplace/searchreplace.html', 'map':rootPath+'/js/ueditor/dialogs/map/map.html', 'gmap':rootPath+'/js/ueditor/dialogs/gmap/gmap.html', 'insertvideo':rootPath+'/js/ueditor/dialogs/video/video.html', 'help':rootPath+'/js/ueditor/dialogs/help/help.html', 'highlightcode':rootPath+'/js/ueditor/dialogs/code/code.html', 'emotion':rootPath+'/js/ueditor/dialogs/emotion/emotion.html', 'wordimage':rootPath+'/js/ueditor/dialogs/wordimage/wordimage.html', 'attachment':rootPath+'/js/ueditor/dialogs/attachment/attachment.html', 'insertframe':rootPath+'/js/ueditor/dialogs/insertframe/insertframe.html', 'edittd':rootPath+'/js/ueditor/dialogs/table/edittd.html', 'snapscreen': rootPath+'/js/ueditor/dialogs/snapscreen/snapscreen.html' },
其中的rootpath:
var curWwwPath=window.document.location.href; //获取主机地址之后的目录,如: uimcardprj/share/meun.jsp var pathName=window.document.location.pathname; var pos=curWwwPath.indexOf(pathName); //获取主机地址,如: http://localhost:8083 var localhostPaht=curWwwPath.substring(0,pos); //获取带"/"的项目名,如:/uimcardprj var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1); var rootPath = localhostPaht+projectName;
这是我项目所需的路径,依照自己的项目找到正确的插件地址就可以。
上传图片的页面在ueditor\dialogs\image\image.html
修改它的上传处理操作路径:
url:rootPath+'/upload/uploadImage.jsp', //rootPath同上,后面为处理功能的jsp页面。
上传附件的页面在ueditor\dialogs\attachment\attachment.html
修改它的上传处理操作路径:
upload_url:rootPath+'/upload/uploadFile.jsp', //rootPath同上,后面为处理功能的jsp页面。
上传图片和附件功能实现代码放在ueditor\server\upload下,有各4种语言的上传例子,参照修改使用,以上的两个jsp('/upload/uploadImage.jsp'和 '/upload/uploadFile.jsp',
)就是参照里面的up.jsp做的,基本上不需要有大的改动,主要是把存储路径和访问路径调对,就行。
editor_config.js中的代码
UEDITOR_CONFIG = { imagePath:rootPath , //图片文件夹所在的路径,用于显示时修正后台返回的图片url!具体图片保存路径需要在后台设置。!important compressSide:0, //等比压缩的基准,确定maxImageSideLength参数的参照对象。0为按照最长边,1为按照宽度,2为按照高度 maxImageSideLength:900, //上传图片最大允许的边长,超过会自动等比缩放,不缩放就设置一个比较大的值 relativePath:true, //是否开启相对路径。开启状态下所有本地图片的路径都将以相对路径形式进行保存.强烈建议开启! filePath:rootPath, //附件文件夹保存路径 catchRemoteImageEnable:true, //是否开启远程图片抓取 catcherUrl:rootPath +"server/submit/php/getRemoteImage.php", //处理远程图片抓取的地址 localDomain:"baidu.com", //本地顶级域名,当开启远程图片抓取时,除此之外的所有其它域名下的图片都将被抓取到本地 imageManagerPath:rootPath+ "server/submit/php/imageManager.php", //图片在线浏览的处理地址 UEDITOR_HOME_URL: rootPath,
up.jsp中的代码
response.getWriter().print( "{'url':'"+ realPath + "/" + picTo + "','title':'" + title + "','state':'" + state + "'}");
editor_config.js中的代码中的 rootPath 和 up.jsp中的代码中的url就是图片的地址,访问的地址,就是把rootPath 转化为域名,这个自己好好调试一下就出来了,附件也和上传图片基本一样。重点还是自己弄清楚自己的路径怎么设置的,才能正确访问到。
jsp页面另一种赋值:
<!-- 文章正文开始 --> <textarea name="content" id="content" style="width:880px;">${fn:escapeXml(article.content)}</textarea> <script type="text/javascript"> var editor_a; document.onreadystatechange = function(){ if(document.readyState=="complete"){ editor_a = new baidu.editor.ui.Editor(); editor_a.render('content'); } } </script> <!-- 文章正文结束 -->
form提交之前或者js验证需要做一个操作:
if(editor_a.hasContents()){ //此处以非空为例 editor_a.sync(); //同步内容 var content=editor_a.getContent();//js得到content值。 }
官方文档可参考:
http://ueditor.baidu.com/website/document.html
评论
12 楼
asialee
2013-05-27
其实在这个里面我是详细记录了的:http://asialee.iteye.com/blog/1749341
wj196 写道
不好意思,最近一直比较忙,没来得及回。我是这样写的,他这个有一个专门在给那个变量赋值的过程。看了你的博客,应该是解决了。
<!-- 文章正文开始 -->
<textarea name="content" id="content" style="width:880px;">${fn:escapeXml(article.content)}</textarea>
<script type="text/javascript">
var editor_a;
document.onreadystatechange = function(){
if(document.readyState=="complete"){
editor_a = new baidu.editor.ui.Editor();
editor_a.render('content');
}
}
</script>
<!-- 文章正文结束 -->
js中获取编辑框中的值:
if(editor_a.hasContents()){ //此处以非空为例
editor_a.sync(); //同步内容
var content=editor_a.getContent();
}
参考文档来源:http://ueditor.baidu.com/website/document.html
这个是取不到,在form里面应该隐藏一个hidden,在form提交之前给它设值。
比如:
<input id="custom-content" name="contents" type="hidden">
$("#custom-content").val(editor.getContent());
<!-- 文章正文开始 -->
<textarea name="content" id="content" style="width:880px;">${fn:escapeXml(article.content)}</textarea>
<script type="text/javascript">
var editor_a;
document.onreadystatechange = function(){
if(document.readyState=="complete"){
editor_a = new baidu.editor.ui.Editor();
editor_a.render('content');
}
}
</script>
<!-- 文章正文结束 -->
js中获取编辑框中的值:
if(editor_a.hasContents()){ //此处以非空为例
editor_a.sync(); //同步内容
var content=editor_a.getContent();
}
参考文档来源:http://ueditor.baidu.com/website/document.html
asialee 写道
sunsyx13 写道
加了这个 <script type="text/plain" id="myEditor">${description}</script>还是一样的?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
这个是取不到,在form里面应该隐藏一个hidden,在form提交之前给它设值。
比如:
<input id="custom-content" name="contents" type="hidden">
$("#custom-content").val(editor.getContent());
11 楼
wj196
2013-05-27
unsigned 写道
楼主真是帮了我大忙了。那个存储路径和访问路径都快把我搞晕了。
解决了就好,呵呵
10 楼
wj196
2013-05-27
不好意思,最近一直比较忙,没来得及回。我是这样写的,他这个有一个专门在给那个变量赋值的过程。看了你的博客,应该是解决了。
<!-- 文章正文开始 -->
<textarea name="content" id="content" style="width:880px;">${fn:escapeXml(article.content)}</textarea>
<script type="text/javascript">
var editor_a;
document.onreadystatechange = function(){
if(document.readyState=="complete"){
editor_a = new baidu.editor.ui.Editor();
editor_a.render('content');
}
}
</script>
<!-- 文章正文结束 -->
js中获取编辑框中的值:
if(editor_a.hasContents()){ //此处以非空为例
editor_a.sync(); //同步内容
var content=editor_a.getContent();
}
参考文档来源:http://ueditor.baidu.com/website/document.html
这个是取不到,在form里面应该隐藏一个hidden,在form提交之前给它设值。
比如:
<input id="custom-content" name="contents" type="hidden">
$("#custom-content").val(editor.getContent());
<!-- 文章正文开始 -->
<textarea name="content" id="content" style="width:880px;">${fn:escapeXml(article.content)}</textarea>
<script type="text/javascript">
var editor_a;
document.onreadystatechange = function(){
if(document.readyState=="complete"){
editor_a = new baidu.editor.ui.Editor();
editor_a.render('content');
}
}
</script>
<!-- 文章正文结束 -->
js中获取编辑框中的值:
if(editor_a.hasContents()){ //此处以非空为例
editor_a.sync(); //同步内容
var content=editor_a.getContent();
}
参考文档来源:http://ueditor.baidu.com/website/document.html
asialee 写道
sunsyx13 写道
加了这个 <script type="text/plain" id="myEditor">${description}</script>还是一样的?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
这个是取不到,在form里面应该隐藏一个hidden,在form提交之前给它设值。
比如:
<input id="custom-content" name="contents" type="hidden">
$("#custom-content").val(editor.getContent());
9 楼
unsigned
2013-05-09
楼主真是帮了我大忙了。那个存储路径和访问路径都快把我搞晕了。
8 楼
asialee
2013-04-17
详细的大家可以参考这个: http://asialee.iteye.com/blog/1749341
7 楼
asialee
2013-04-17
sunsyx13 写道
加了这个 <script type="text/plain" id="myEditor">${description}</script>还是一样的?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
这个是取不到,在form里面应该隐藏一个hidden,在form提交之前给它设值。
比如:
<input id="custom-content" name="contents" type="hidden">
$("#custom-content").val(editor.getContent());
6 楼
sunsyx13
2013-04-17
加了这个 <script type="text/plain" id="myEditor">${description}</script>还是一样的?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
我是这么写的:
<script type="text/plain" id="editor">${editorValue}</script>
<script type="text/javascript">
var option = {
initialContent: '编写文章内容...',//初始化编辑器的内容
textarea: 'editorValue',//设置提交时编辑器内容的名字
minFrameHeight:280, //设置高度
initialFrameWidth:1080 //设置宽度
}
var editor = new baidu.editor.ui.Editor(option);//new一个对象,通过对象创建编辑器
editor.render("editor");
</script>
这种request.getParameter("editorValue")方式取不到值?
5 楼
asialee
2013-02-20
june8796 写道
为什么我在后台取到的值是带有<p>内容</p>,而不是纯的文本内容呢?
这个就是富文本呀,如果确实需要,可以在后台将标签过滤掉,jsoup就可以。
另外我也写了篇类似的文章,传送门:http://asialee.iteye.com/blog/1749341
4 楼
wj196
2013-02-19
alfusen_xiong 写道
我在后台用request.getParameter("textAreaName")取不到值,蛋疼!!!!
这种request.getParameter("textAreaName")方式是取不到值,提交的时候,必须有这个 <script type="text/plain" id="myEditor">${description}</script> 。
3 楼
wj196
2013-02-19
june8796 写道
为什么我在后台取到的值是带有<p>内容</p>,而不是纯的文本内容呢?
我去到的也是带了标签,这个没有找到方法去掉呢,我现在也很头疼复制粘贴,样式过来会变乱,问题真的很多呢。
2 楼
alfusen_xiong
2013-01-28
我在后台用request.getParameter("textAreaName")取不到值,蛋疼!!!!
1 楼
june8796
2012-12-28
为什么我在后台取到的值是带有<p>内容</p>,而不是纯的文本内容呢?
发表评论
-
一些记录
2013-07-12 18:33 899修改数据的编码,本机 修改环境变量 NLS_LANG SIM ... -
自己总结
2012-01-30 18:07 0eclipse 1、svn安装:点击help选项卡选择So ... -
常见异常类:
2012-01-04 17:47 1133常见异常类: 1、IOException:操作输入流和输出流是 ... -
接口和继承
2012-01-03 17:35 1465java不允许一个类继承多个直接父类,原因:当子类覆盖父 ... -
多态运行怎么区分引用哪个类型/对象
2011-12-23 16:16 1150多态的运行: 实例方法:动态绑定,即引用的变量实际引用的类型是 ...
相关推荐
百度富文本编辑器UEditor 1.4.3版本
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。此版本为dev-1.5.0 gbk-asp
真正解决百度编辑器UEditor上传图片跨域问题 真正解决百度编辑器UEditor上传图片跨域问题 真正解决百度编辑器UEditor上传图片跨域问题
百度编辑器ueditor
vue 百度编辑器ueditor使用文件,直接使用在项目即可.
百度编辑器UEditor v1.4.3.2 更新日志: 更新 video-js 以修复 XSS 安全漏洞 百度编辑器UEditor简介 百度编辑器Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。 ...
百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器百度ueditor编辑器
百度编辑器UEditor v1.4.3.2 更新日志: 更新 video-js 以修复 XSS 安全漏洞 百度编辑器UEditor简介 百度编辑器Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。 ...
百度编辑器UEditor Asp
UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器,具有轻量、可定制、注重用户体验等特点。是目前免费版最好用兼容性最好的编辑器之一,此版为官方最新版1.5.0。
实战 vue3 使用百度编辑器ueditor
UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器,具有轻量、可定制、注重用户体验等特点。是目前免费版最好用兼容性最好的编辑器之一,此版为官方最新版1.5.0。
UEditor 是由百度 web 前端研发部开发所见即所得富文本web编辑器,具有轻量、可定制、注重用户体验等特点。是目前免费版最好用兼容性最好的编辑器之一,此版为官方最新版1.5.0。
使用小技巧: 使用百度编辑器栏目设置里面的栏目内容无法保存的解决方法: 这里需要修改下在栏目内容编辑时候使用默认ckeditor就可以了: 找到文件位置:/dede/templates/catalog_edit.htm和/dede/templates/...
百度编辑器UEditor开发版是目前UE最新的、包含所有功能的完全版本,目前已经经过QA的第一轮测试。由于编辑器本身的复杂性,再加上UE的功能较多,且用户使用编辑器的侧重点各不相同,导致部分功能的bug除非深入使用...
百度编辑器UEditor v1.4.3.2 更新日志: 更新 video-js 以修复 XSS 安全漏洞 百度编辑器UEditor简介 百度编辑器Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。 ...
百度编辑器UEditor v1.4.3.2 更新日志: 更新 video-js 以修复 XSS 安全漏洞 百度编辑器UEditor简介 百度编辑器Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。 ...
百度编辑器UEditor v1.4.3.2 更新日志: 更新 video-js 以修复 XSS 安全漏洞 百度编辑器UEditor简介 百度编辑器Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。 ...
百度编辑器UEditor v1.4.3.2 更新日志: 更新 video-js 以修复 XSS 安全漏洞 百度编辑器UEditor简介 百度编辑器Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。 ...
详细的说明了Framework.Aspx.Net.百度编辑器UEditor(前端加后台DLL调用例子) 使用IDE:Visual Studio 2017 2019 均可