UEditor之实现配置简单的图⽚上传⽰例
提出问题
Ueditor简单介绍和实现图⽚上传功能
读书感悟
前提：
假如你已经安装tomcat服务器；
假如你已经把项⽬运⾏到Eclipse上；
假如你已经有java基础；
假如你对js有⼀定基础；
假如你已经下载ueditor1_4_3_3-src源码，记得是开发的哦;
那么开始吧!
1.⾸先你可以到官⽹Ueditor，查看很详细的⽂档，包括如何安装到Eclipse，相关jar包和如何使⽤Ueditor，本⽂主要介绍如何实现单图⽚上传和利⽤⾃⼰的接⼝：
运⾏tomcat上，在google浏览器运⾏（Test是我的项⽬名称）：
localhost:8081/Test/jsp/config.json
出现⼀串长长的json的字符串，说明运⾏成功。
2.把WEB-INF/jsp/src下的java源码copy到项⽬源码中，⽅便之后的调试代码，如上图
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<script type="text/javascript" charset="utf-8" src="../fig.js"></script>
<script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
</head>
<body>
<h1>UEditor简单功能</h1>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor">图片下载站源码
<p>这⾥我可以写⼀些输⼊提⽰</p>
</script>
<script type="text/javascript">
//这⾥可以选择⾃⼰需要的⼯具按钮名称，此处仅选择如下五个
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold','test']],
//focus时⾃动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域⾼度
initialFrameHeight:300
//更多其他参数，请参考fig.js中的配置项
})
</script>
</body>
</html>
上⾯例⼦很简单，就是如何初始化⼀个富⽂本框，已经如何配置⼯具条等等
4.因为我们要实现图⽚上传功能，所有要把图⽚上传按钮搞上去，⽅法如下:
1）第⼀种⽅法：把simpleupload加到toolbars中:
toolbars:[['FullScreen',simpleupload ,'Source', 'Undo', 'Redo','Bold','test']]
2）第⼆种⽅法：直接把toolbars注释掉
这时就会读取默认的配置⽂件fig.js，下⾯介绍，不过会把所有的按钮全部显⽰出来如图：
5.可是你会发现，点击图⽚上传按钮，⼀点反应都没有，有⽊有！
这⾥开始介绍fig.js⽂件，
⾸先，你会发现在这个⽂件可以配置很多，具体看下⾯即可
重点讲：serverUrl: URL + “php/controller.php”，没错，你没有看错，这个就是请求后端的统⼀接⼝路径，记得是统⼀接⼝路径，也就是说只有这个路径，没有第⼆个，会不会觉得很坑呢？
我们把路径改成jsp的：, serverUrl: URL + “jsp/controller.jsp”
我们把注释去掉，重新启动tomcat，刷新页⾯，点击图⽚上传按钮，
window.UEDITOR_CONFIG = {
//为编辑器实例添加⼀个路径，这个不能被注释
UEDITOR_HOME_URL: URL
// 服务器统⼀请求接⼝路径
, serverUrl: URL + "php/controller.php"
//⼯具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择⾃⼰需要的重新定义
, toolbars: [[
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forec        'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template        'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'sp        'print', 'preview', 'searchreplace', 'drafts', 'help'
]]
//当⿏标放在⼯具栏上时显⽰的tooltip提⽰，留空⽀持⾃动多语⾔配置，否则以配置值为准
//,labelMap:{
//    'anchor':'', 'undo':''
//}
//语⾔配置项，默认是zh-cn。有需要的话也可以使⽤如下这样的⽅式来⾃动多语⾔切换，当然，前提条件是lang⽂件夹下存在对应的语⾔⽂件：
//lang值也可以通过⾃动获取 (navigator.language||navigator.browserLanguage ||navigator.userLanguage).toLowerCase()
//,lang:"zh-cn"
//,langPath:URL +"lang/"
//主题配置项，默认是default。有需要的话也可以使⽤如下这样的⽅式来⾃动多主题切换，当然，前提条件是themes⽂件夹下存在对应的主题⽂件：
//现有如下⽪肤:default
//,theme:'default'
//,themePath:URL +"themes/"
//,zIndex : 900    //编辑器层级的基数，默认是900
//针对getAllHtml⽅法，会在对应的head标签中增加该编码设置。
//,charset:"utf-8"
//若实例化编辑器的页⾯⼿动修改的domain，此处需要设置为true
//,customDomain:false
//常⽤配置项⽬
//,isShow : true    //默认显⽰编辑器
//,textarea:'editorValue' // 提交表单时，服务器获取编辑器提交内容的所⽤的参数，多实例时可以给容器name属性，会将name给定的值最为每个实例的键值，不⽤    //,initialContent:'欢迎使⽤ueditor!'    //初始化编辑器的内容，也可以通过textarea/script给值，看官⽹例⼦
6.你会发现，你选择⼀张图⽚，我卡，图⽚上传不了
打开google浏览器调试，如下图：
7.说明还有些配置⽂件还没配好，我们看刚刚配置的后端请求路径
// 服务器统⼀请求接⼝路径
, serverUrl: URL + "jsp/controller.jsp"
记住，⼤家要把这个⽂件当作后端的java⽂件，⼀定要记住，很重要的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。