百度富文本的使用

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

注意: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为例

相关文章
|
5月前
|
JavaScript
vue使用百度富文本
vue使用百度富文本
62 0
|
3月前
|
存储 Kubernetes 容器
百度搜索:蓝易云【Kubernetes使用helm部署NFS Provisioner】
现在,你已经成功使用Helm部署了NFS Provisioner,并且可以在Kubernetes中创建使用NFS存储的PersistentVolumeClaim。
47 10
|
3月前
百度搜索:蓝易云【什么是HTTP长轮询?】
现在,HTTP长轮询逐渐被WebSocket等更高效的实时通信技术所替代,但了解HTTP长轮询仍然有助于理解实时数据推送的基本原理。
86 9
|
3月前
|
移动开发 Shell Linux
百度搜索:蓝易云【Shell错误:/bin/bash^M: bad interpreter: No such file or directory】
将 `your_script.sh`替换为你的脚本文件名。运行此命令后,脚本文件的换行符将被转换为Linux格式,然后就可以在Linux系统上正常执行脚本了。
34 8
|
3月前
百度搜索:蓝易云【ipmitool配置BMC的ip】
以上操作将配置BMC的IP地址为新的值。请注意,操作BMC需要谨慎,确保你对服务器有足够的权限,并且仔细检查新的IP地址、子网掩码和默认网关,以免导致服务器网络失联。
36 7
|
3月前
|
缓存 网络协议 Linux
百度搜索:蓝易云【解决github push/pull报错443】
通过以上方法,你有望解决GitHub push/pull报错443的问题。如果问题仍然存在,建议检查GitHub的状态页面,看是否有正在维护或故障的情况。
83 3
|
3月前
|
Kubernetes 应用服务中间件 nginx
百度搜索:蓝易云【使用Kubernetes部署Nginx应用教程】
现在,你已经成功在Kubernetes集群上部署了Nginx应用。通过访问Service的外部IP地址,你可以访问Nginx服务。
42 4
|
3月前
|
Linux Perl
百度搜索:蓝易云【Linux常用命令awk】
以上仅是awk命令的一些常见用法,它还有许多更复杂的功能和用法,可以根据需要灵活运用。awk在文本处理和数据分析中非常实用,是Linux系统中的一把利器。
26 2
|
3月前
|
编解码 应用服务中间件 nginx
百度搜索:蓝易云【基于Nginx与Nginx-rtmp-module实现】
综上所述,基于Nginx与Nginx-rtmp-module的组合,可以搭建一个功能强大的流媒体服务器,用于实现直播和点播服务。
43 1
|
3月前
|
Linux
百度搜索:蓝易云【Linux系统ps命令:查看正在运行的进程】
通过这些简洁的ps命令用法,你可以方便地查看Linux系统中正在运行的进程信息。
35 1