使用ueditor富文本编辑器

使用ueditor富文本编辑器

官网地址:https://ueditor.baidu.com/website/

在这里插入图片描述

根据需要下载Demo:

在这里插入图片描述

我这用的是jsp版本:
解压之后结构图:
在这里插入图片描述
到这一步准备工作就做好了,接下来导入到工程中:

  1. 全部复制到工程中:
    在这里插入图片描述
    2.导入依赖jar包:jar包在jsp目录下
    在这里插入图片描述
    如果是maven工程:
     <dependency>  
        <groupId>com.baidu</groupId>  
        <artifactId>ueditor</artifactId>  
        <version>1.1.2</version>  
    </dependency> 
    <!--ueditor 依赖包  -->
    <dependency>
      <groupId>org.json</groupId>
      <artifactId>json</artifactId>
      <version>20180813</version>
      <type>bundle</type>
    </dependency>
     <dependency>
      <groupId>commons-codec</groupId>
      <artifactId>commons-codec</artifactId>
      <version>1.9</version>
    </dependency>
    <!-- 文件上传 -->
    <dependency>
        <groupId>commons-io</groupId>
        <artifactId>commons-io</artifactId>
        <version>2.4</version>
    </dependency>
    <dependency>
        <groupId>commons-fileupload</groupId>
        <artifactId>commons-fileupload</artifactId>
        <version>1.4</version>
    </dependency>
    

注意:maven中央仓库 没有ueditor.jar ,所以需要加载到本地仓库
方式一:是要指令:
mvn install:install-file -Dfile=ueditor-1.1.2.jar -Dpackaging=jar - DgroupId=com.baidu.ueditor -DartifactId=ueditor -Dversion=1.1.2
方式二:使用myEclipse:
单击右键,选择import
在这里插入图片描述
在这里插入图片描述

  1. 在jsp中使用:
    添加js文件:config.js与all.js顺序
<script type="text/javascript" src="<%=path %>/res/ueditor/ueditor.config.js"></script>  
<!-- 编辑器源码文件 -->
    <script type="text/javascript" src="<%=path %>/res/ueditor/ueditor.all.js"></script>  
    <link rel="stylesheet" href="<%=path %>/res/ueditor/themes/default/css/ueditor.css">  
    <script type="text/javascript"  src="<%=path %>/res/ueditor/lang/zh-cn/zh-cn.js"></script>
<!--把文本域变成 富文本编辑器-->
<textarea id="container" name="content"></textarea>  

   <script type="text/javascript">  
    $(function(){
         UE.getEditor("container");

    })       
   </script>

   运行结果:

在这里插入图片描述
到这一步后,会发现上传图片显示不出来,注意要修改配置文件
在这里插入图片描述
在这里插入图片描述

版权声明:本文为weixin_44702125原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44702125/article/details/88709898