项目集成Ueditor编辑器

最新推荐文章于 2024-09-30 10:05:51 发布

原创最新推荐文章于 2024-09-30 10:05:51 发布 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Ueditor集成项目

Ueditor 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何从官网下载并集成Ueditor组件，包括解压文件、引入相关JS文件、初始化编辑器实例等步骤，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：这个Ueditor组件用了有一段时间了，没使用到截屏这个组件，这几天需要集成到另一个项目中去，

结果出现了问题，才想起没有文档记录，现在才来补个，方便以后集成查看

首先去官网下载Ueditor：http://ueditor.baidu.com/ 这里可以自定义文本域的组件，最好是需要哪些就下载哪些，免得到时候页面渲染慢，如果全部下载也可以在ueditor / ueditor.config.js 文件中去配置组件

开始集成：

1. 把下载的压缩包里面的内容全部解压到项目中

2.把目录 ueditor/jsp/lib 里的jar包拷贝到项目中去

3.页面引用js和配置

a. 引入相关js文件

<span style="font-size:12px;"><%-- ueditor插件js --%>
      <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/ueditor/ueditor.config.js"></script>
      <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/ueditor/ueditor.all.min.js"> </script>
   </span>

b.初始化编辑器实例

<span style="font-size:12px;">//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用 UE.getEditor('editor')就能拿到相关的实例
 	var ue = UE.getEditor('editor');//这里需要和c步骤的id相同
</span>

c.调用编辑器

<span style="font-size:12px;">	<script id="editor" type="text/plain" style="width:500px;height:100px"></script></span>

效果图如下：