且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

百度富文本的使用

更新时间:2022-08-22 10:25:43

版权声明:本文为博主原创文章,未经博主允许不得转载。 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>

注意: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,//富文本高度
        });

注意:如果后台是用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);
      }
   }
}

注意:本文以jsp为例