百度富文本的使用

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。 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月前
|
开发者
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
无法拖拽选中文字的在线电子书的做笔记方法 —— html文本提取大法
43 0
|
6月前
|
数据采集 JavaScript 前端开发
详尽分享网站网页中加入各种分享按钮功能百度分享
详尽分享网站网页中加入各种分享按钮功能百度分享
131 0
|
7月前
|
容器
百度富文本上传图片后样式崩塌
百度富文本上传图片后样式崩塌
62 0
百度富文本上传图片后样式崩塌
实现百度换肤功能
具体功能: 点击图片浏览器背景变为所点的图片
MarkDown编辑器-MarkText使用文档
1.Why MarkText typora要收费使用了,🤔我们可以使用免费的开源软件MarkText来编写MarkDown文档 MarkText官方承认,将会永远免费开源此软件 MarkText 是一个带有各种降价扩展的降价实时预览编辑器。您可以简单地编写和编辑文本 安装地址: MarkText安装
1345 0
MarkDown编辑器-MarkText使用文档
CSDN博客自定义栏目——Google、百度、必应站内搜索框
CSDN博客自定义栏目——Google、百度、必应站内搜索框
167 0
|
程序员
markdown语法图文介绍
markdown的排版格式固定且比较美观,大部分博主都会使用markdown进行博客文章的编辑,今天给大家介绍一下markdown语法的使用
19653 0
markdown语法图文介绍
html+css实战99-新浪导航内容div
html+css实战99-新浪导航内容div
372 0
|
搜索推荐
哪些内容更容易被百度收录 百度喜欢什么内容
作为一名SEOer,如果你以前从事过内容营销的工作,你就会发现有良好内容结构的文章更容易被百度收录,并且更有利于被社交媒体转发。哪些内容更容易被百度收录?百度爬虫喜欢什么样的内容结构呢?武汉SEO和大家一起来容易被百度收录的文章有哪些特征。
817 0