ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

百度富文本Ueditor编辑器的使用

2020-02-23 09:03:10  阅读:335  来源: 互联网

标签:解压 Ueditor lib UEditor 编辑器 导入 jsp 文本 页面


UEditor官网下载地址:https://ueditor.baidu.com/website/download.html

image
这里我下载的是jsp版本中的UTF-8版,然后将压缩包解压之后是这个样子
image
解压内容中的index.html是官方给我们提供的一个富文本使用例程,打开页面可以体验到各种富文本操作

接下来将UEditor应用到我们自己的项目中

1、新建一个动态Web工程
image
2、将解压到的UEditor文件拷贝到新建工程的WebContent目录下
image
这时会报错,不用担心。原因是我们还没有将UEditor需要用到的jar包加入到工程环境当中。

接下来打开目录jsp->lib,将lib下面的所有jar包全部拷贝到WEB-INF/lib文件中,eclipse会自动将新导入的包加入到工程环境当中。

3、新建一个ueditor.jsp页面,开始导入UEditor富文本编辑器

注意:在导入UEditor时必须要的3个文件,

1
2
3
4
 
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script> <!--ueditor的配置文件-->
<script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.min.js"></script> <!--ueditor核心文件-->
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script> <!--ueditor语言文件-->

导入这3个文件之后在需要调用UEditor的位置加入

1
2
 
<script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>

最后通过初始化UEditor,让它显示出来

1
2
3
4
 
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>

页面全部代码如下:

1
大专栏

标签:解压,Ueditor,lib,UEditor,编辑器,导入,jsp,文本,页面
来源: https://www.cnblogs.com/liuzhongrong/p/12348483.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有