`
wj196
  • 浏览: 298337 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

使用百度编辑器UEditor小总结

ueditorjava 
阅读更多
百度编辑器UEditor 下载：

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






  • 大小: 43.9 KB
分享到：
| 随手记笔记
评论
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


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")方式取不到值?


这个是取不到，在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


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")方式取不到值?


这个是取不到，在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")方式取不到值?


这个是取不到，在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")方式取不到值?
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>,而不是纯的文本内容呢？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    百度编辑器ueditor-dev-1.5.0 gbk-asp 编译版

    总结起来，百度编辑器ueditor-dev-1.5.0 gbk-asp版本是一款专为ASP环境设计的富文本编辑器，具备轻量化、高度可定制和良好的用户体验特性，特别适合需要处理大量中文内容的网站使用。通过其提供的API和配置选项，...

    百度编辑器ueditor-dev-1.5.0官方最新版utf8-net.rar

    **UEditor：百度开源的富文本编辑器** UEditor是由百度公司前端研发部精心打造的一款开源的Web在线富文本编辑器。它以其轻量级、高度可定制和优秀的用户体验著称，广泛应用于各类网站和应用中，提供所见即所得...

    百度富文本编辑器 ueditor 使用总结

    【百度富文本编辑器 ueditor 使用总结】 在Web开发中，富文本编辑器是一个不可或缺的工具，它允许用户以类似Word的方式编辑网页内容。百度的ueditor是一款功能强大的开源富文本编辑器，广泛应用于博客、论坛、CMS...

    .net百度编辑器（UEditor)上传图片跟上次附件不成功的解决办法

    .NET百度编辑器（UEditor）是一个功能强大且广泛使用的富文本编辑器，但是在上传图片和附件时，可能会遇到一些问题。以下是解决.NET百度编辑器（UEditor）上传图片跟上次附件不成功的方法。 一、上传图片配置文件 ...

    百度开源在线文本编辑器(ueditor) demo

    百度UEditor是一款功能强大的在线文本编辑器，由百度公司开源并维护。它提供了丰富的编辑功能和良好的用户体验，被广泛应用于博客、论坛、CMS（内容管理系统）等场景。UEditor不仅在基本的文本编辑上表现出色，还...

    百度编辑器UEditor库-jsp版本

    总结，百度编辑器UEditor-JSP版本是Web开发中用于创建富文本内容的强大工具，其易于集成、功能强大、可扩展性强。理解并熟练运用其各项特性和API，可以帮助开发者构建出更优秀的Web内容编辑平台。

    百度富文本编辑器UEditorDemo

    **百度富文本编辑器UEditor简介** 百度富文本编辑器（UEditor）是一款由百度公司开发的开源在线文本编辑器，旨在提供一个易用、功能丰富的富文本编辑体验。它支持多种格式的内容编辑，包括文字、图片、视频、表格、...

    百度ueditor编辑器

    总结来说，百度UEditor是一款功能强大的富文本编辑器，不仅具备基本的文本编辑功能，还支持多媒体内容处理和高度的定制性，是Web开发者的得力工具。通过深入理解和利用其提供的各种接口和特性，开发者可以创建出满足...

    ueditor编辑器utf8-net 富文本编辑器

    该编辑器的核心是ueditor，一个广泛使用的JavaScript富文本编辑器，它提供了多种语言版本，包括JavaScript原生版以及针对不同后端平台的适配版本，如本案例中的"utf8-net"版本，专门为.NET环境定制。ueditor具有以下...

    百度编辑器 ueditor-1.4.3.3版本 php版本

    总结，百度编辑器ueditor-1.4.3.3版本是一个功能强大且跨平台的富文本编辑解决方案，无论是个人博客、企业网站还是大型内容管理系统，都能找到合适的应用场景。其优秀的用户体验和灵活的扩展性，使得它成为网页内容...

    百度文本编辑器实例UEditor实例

    **标题详解：**“百度文本编辑器实例UEditor实例” 百度UEditor是一款强大的富文本编辑器，由百度公司开发，广泛应用于网站内容编辑系统。它提供了丰富的文本格式化选项、图片上传、视频插入、表格编辑等功能，使得...

    百度编辑器ueditor-dev-1.5.0官方最新版utf8-asp.rar

    UEditor 是一个由百度公司旗下的 web 前端研发部精心打造的开源富文本Web编辑器。它以其轻量级、高度可定制化以及优秀的用户体验而受到开发者们的广泛欢迎。UEditor 的核心目标是提供一个在浏览器端使用的，功能强大...

    百度编辑器UEditor For DedeCMS V1.0.0 Beta Build 20111118-源码.zip

    《深入解析百度编辑器UEditor for DedeCMS V1.0.0 Beta Build 20111118源码》 百度编辑器（UEditor）是一款由百度公司开发的开源富文本在线编辑器，它专为Web开发者提供了一个简单易用、功能丰富的文本编辑解决方案...

    baidu编辑器 ueditor umeditor demo实例源码

    【百度编辑器 UEditor & UMEditor 示例源码详解】 百度编辑器是一款强大的在线富文本编辑器，主要用于网页内容的编辑和格式化。它提供了丰富的功能，如文本样式、图片上传、链接插入等，使得非技术人员也能轻松编辑...

    百度编辑器ueditor-dev-1.5.0官方最新版gbk-asp.rar

    **UEditor：百度开源的富文本编辑器** UEditor是由百度公司前端研发团队精心打造的一款开源的Web在线富文本编辑器。它以其轻量级、高度可定制化以及优秀的用户体验而受到开发者们的广泛欢迎，尤其在免费的富文本...

    ueditor_jsp 百度富文本编辑器

    "ueditor1_4_3_3-utf8-jsp"是百度推出的一款开源的、功能强大的富文本编辑器，特别适合于Java Web应用程序中使用。这个版本是基于UTF-8编码的，确保了多语言环境下的正常显示。 1. **基本结构与安装** - **下载与...

    织梦百度编辑器+又拍云升级版ueditor.zip

    总结，织梦CMS与百度编辑器又拍云升级版的整合，不仅提升了内容创作的便捷性，也优化了用户在浏览网站时的体验。通过利用云存储服务，网站的稳定性和效率得到了显著提高，对于那些需要大量上传图片和文件的网站来说...

    ueditor.all.js 百度富文本编辑器ueditor配合angularjs的使用 内附源码 及使用方法说明

    百度的ueditor.all.js是一款功能强大的富文本编辑器，而AngularJS则是一款流行的前端MVC框架。本文将详细介绍如何将ueditor.all.js与AngularJS结合使用，以实现高效、灵活的富文本编辑功能，并提供内附的源码作为...

    百度UEditor使用说明

    百度UEditor是中国搜索引擎巨头百度公司推出的富文本编辑器，旨在帮助开发者快速构建富文本编辑功能。下面是关于百度UEditor使用说明的详细知识点总结： 一、UEditor的下载和安装 在使用百度UEditor之前，需要从...

    Asp.net MVC 下使用百度 UEditor 编辑器

    在Asp.net MVC框架下集成并使用百度UEditor编辑器是一项常见的需求，它能为用户提供一个功能丰富的在线文本编辑体验。UEditor是一款流行的JavaScript富文本编辑器，它提供了多种编辑功能，如图片上传、视频插入、...

Magicbox
Global site tag (gtag.js) - Google Analytics