富文本编辑器ueditor初探

最新推荐文章于 2024-08-05 17:43:42 发布

李秀才

最新推荐文章于 2024-08-05 17:43:42 发布

阅读量965

点赞数 1

分类专栏： java 文章标签：富文本编辑器ueditor教程

本文链接：https://blog.csdn.net/qq_33556185/article/details/55261642

版权

java 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

ueditor是百度开源的一款富文本编辑器，官网是：http://ueditor.baidu.com/website/

我们下载最新版本1.4.3.3，解压下来目录结构如下：

lib包在jsp文件夹下、剩余的4个文件夹是需要的js和css。

1：引入资源

5个jar包：

引入需要的js和css(除jsp文件夹外，其他4个文件夹资源都需要引入)

将config.json和controller.jsp引入，二者需放在同一目录下。

2：在页面里使用

<!DOCTYPE html>
<html>
  <head>
    <title>testUeEdit.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <!-- 配置文件 -->
 <script type="text/javascript" src="../js/ueEdit/ueditor.config.js"></script>
 <!-- 编辑器源码文件 -->
 <script type="text/javascript" src="../js/ueEdit/ueditor.all.js"></script>
  <script type="text/javascript" charset="utf-8" src="../js/ueEdit/lang/zh-cn/zh-cn.js"></script>
<script>
   //初始化
  var ue = UE.getEditor('editor');
  </script>
  </head>
  <body>
   <div>
    <h1>完整demo</h1>
    <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>

此时文字编辑、表情都可以正常使用。

3：后端配置

控件的配置在ueditor.config.js

上传图片、附件、视频等等的配置在config.json里。

此时只需要修改ueditor.config.js里的serverUrl指向controller.jsp文件,controller.jsp会调用config.json里的配置去使用UeEdit自带的上传插件去上传文件。

上传功能需要我们在config.json里配置好文件的访问前缀、上传保存路径及文件命名格式。上传完图片后，图片会自动显示在编辑器里。

如此之后编辑器的基本功能文字编辑、图片上传、表情等等就ok了。

Tips: 在插入html的时候一定要等ueEdit初始化完成才可以：

      varue = UE.getEditor('editor');
      ue.addListener("ready",function () {
         ue.execCommand('insertHtml',value);
      });

李秀才

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录