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

二话不说，先上图：

我配置好的效果大致是这些功能：基本的文字编辑功能、图片上传功能、附件上传功能、百度/谷歌地图搜索截图、视/音频发布功能。这个插件是现今我用过觉得最舒服的编辑器，功能齐全强大，稍微修改下配置即可投放使用，来，走起！

1、最新版的官方插件跟先前的版本不一致，所以我还是用先前的版本， 是今年5、6月份版本。插件包JSP版（utf8编码）下载地址http://download.csdn.net/detail/jk33220/5798407（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] view plaincopy
  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] view plaincopy
  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/

效果图就这样。时间关系，先整理到此，今晚回家有时间再整理图片以及其他的设置文档。

posted @   郑文亮  阅读(10222)  评论(1)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
历史上的今天：
2013-03-05 如何解决虚拟机安装centos无法全屏显示问题！
2013-03-05 LINUX下RPM的使用方法
2012-03-05 免费软件 认出图像文件中文字的利器
2012-03-05 本地运行FlashPlayer怎么样才能访问本地文件
2011-03-05 Json数据格式
点击右上角即可分享
微信分享提示
AI IDE Trae