百度富文本的使用

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxdeng/article/details/77802227 下载百度富文本对应的版本创建工程引入百度对应的jar包修改jsp目录下的config.
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hxdeng/article/details/77802227
  1. 下载百度富文本对应的版本
  2. 创建工程引入百度对应的jar包
  3. 修改jsp目录下的config.json
    “imageUrlPrefix”: “/BaiduUEditor”, /* 图片访问路径前缀[/工程发布的名字] */
  4. 引入js

  5. 编写HTML,在需要使用百度富文本的地方添加如下代码
<script type="text/plain" id="goodsInfo" name="goodsInfo"></script>
AI 代码解读

注意:type是“text/plain”id 是控制百度富文本功能,name是后台获取数据

  1. 初始化富文本
    var ue = UE.getEditor(‘goodsInfo’);
  2. 如果需要自定义功能,按照如下代码修改即可
    如果需要自定义富文本类容需要只需要在UE.getEditor()中传入需要的功能即可
   var ue = UE.getEditor('goodsInfo', {
            toolbars: [
                [
                    'undo', //撤销
                    'redo', //重做
                    'selectall', //全选
                    'bold', //加粗
                    'fontfamily', //字体
                    'fontsize', //字号
                    'forecolor', //字体颜色
                    'backcolor', //背景色
                    'indent', //首行缩进
                    'italic', //斜体
                    'formatmatch', //格式刷
                    'removeformat', //清除格式
                    'pasteplain', //纯文本粘贴模式
                    'touppercase', //字母大写
                    'tolowercase', //字母小写
                    'date', //日期
                    'time', //时间
                    'underline', //下划线
                    'strikethrough', //删除线
                    'subscript', //下标
                    'justifyleft', //居左对齐
                    'justifyright', //居右对齐
                    'justifycenter', //居中对齐
                    'justifyjustify', //两端对齐
                    'insertorderedlist', //有序列表
                    'insertunorderedlist', //无序列表
                    'simpleupload', //单图上传
                    'insertimage', //多图上传
                    'cleardoc', //清空文档
                    'fullscreen', //全屏
                 ]
            ],
            initialFrameWidth : 1000,//富文本宽度
            initialFrameHeight :200,//富文本高度
        });
AI 代码解读

注意:如果后台是用Struts2获取表单数据的时且Struts2拦截的是/会和百度富文本的冲突,建议修改为.action或者.do等其他。如果非要拦截/只能够重写Struts的核心拦截器,并且在web.xml中配置Struts2的核心拦截器的时候使用自定义的。

import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter;
publicclass MyStruts2Filter extends StrutsPrepareAndExecuteFilter {
   @Override
   publicvoid doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
      HttpServletRequest req = (HttpServletRequest) request;
      String url = req.getRequestURI();
      /*
       * 检查url是否包含百度富文本路径
       * /BaiduUEditor/plugins/ueditor/jsp
       * /工程发布名称/百度富文本所在路径/jsp
       */
      if (url.contains("/BaiduUEditor/plugins/ueditor/jsp")) {
         chain.doFilter(request, response);
      } else {
         super.doFilter(request, response, chain);
      }
   }
}
AI 代码解读

注意:本文以jsp为例

目录
打赏
0
相关文章
uniapp显示富文本
uniapp显示富文本
132 0
【Markdown小技巧】 整理小图标和表情符号
让博客变得更加优美,你需要这些萌萌的、好看的表情符号。以下是我收集的一些表情符号和小图标,分享给大家。
【Markdown小技巧】 整理小图标和表情符号
深入解析:抖音视频标题的Python爬虫提取方法
深入解析:抖音视频标题的Python爬虫提取方法
|
10月前
|
百度富文本上传图片后样式崩塌
百度富文本上传图片后样式崩塌
74 0
百度富文本上传图片后样式崩塌
实现百度换肤功能
具体功能: 点击图片浏览器背景变为所点的图片
CSDN博客自定义栏目——Google、百度、必应站内搜索框
CSDN博客自定义栏目——Google、百度、必应站内搜索框
204 0
markdown语法图文介绍
markdown的排版格式固定且比较美观,大部分博主都会使用markdown进行博客文章的编辑,今天给大家介绍一下markdown语法的使用
19680 0
markdown语法图文介绍
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
179 0
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)