百度富文本整合到web项目开发

                        ## **百度富文本整合到maven项目**## 

富文本工具栏：
toolbars: [[‘anchor’, //锚点’undo’, //撤销’redo’, //重做’bold’, //加粗’indent’, //首行缩进’snapscreen’, //截图’italic’, //斜体’underline’, //下划线’strikethrough’,

//删除线’subscript’, //下标’fontborder’, //字符边框’superscript’, //上标’formatmatch’, //格式刷’source’, //源代码’blockquote’, //引用’pasteplain’, //纯文本粘贴模式’selectall’,

//全选’print’, //打印’preview’, //预览’horizontal’, //分隔线’removeformat’, //清除格式’time’, //时间’date’, //日期’unlink’, //取消链接’insertrow’, //前插入行’insertcol’,

//前插入列’mergeright’, //右合并单元格’mergedown’, //下合并单元格’deleterow’, //删除行’deletecol’, //删除列’splittorows’, //拆分成行’splittocols’, //拆分成列’splittocells’,

//完全拆分单元格’deletecaption’, //删除表格标题’inserttitle’, //插入标题’mergecells’, //合并多个单元格’deletetable’, //删除表格’cleardoc’, //清空文档’insertparagraphbeforetable’,

//”表格前插入行“‘insertcode’, //代码语言’fontfamily’, //字体’fontsize’, //字号’paragraph’, //段落格式’simpleupload’, //单图上传’insertimage’, //多图上传’edittable’, //表格属性’edittd’,

//单元格属性’link’, //超链接’emotion’, //表情’spechars’, //特殊字符’searchreplace’, //查询替换’map’, //Baidu地图’gmap’, //Google地图’insertvideo’, //视频’help’, //帮助’justifyleft’,

//居左对齐’justifyright’, //居右对齐’justifycenter’, //居中对齐’justifyjustify’, //两端对齐’forecolor’, //字体颜色’backcolor’, //背景色’insertorderedlist’, //有序列表’insertunorderedlist’,

//无序列表’fullscreen’, //全屏’directionalityltr’, //从左向右输入’directionalityrtl’, //从右向左输入’rowspacingtop’, //段前距’rowspacingbottom’, //段后距’pagebreak’, //分页’insertframe’,

//插入Iframe’imagenone’, //默认’imageleft’, //左浮动’imageright’, //右浮动’attachment’, //附件’imagecenter’, //居中’wordimage’, //图片转存’lineheight’, //行间距’edittip ‘, //编辑提示’customstyle’,

//自定义标题’autotypeset’, //自动排版’webapp’, //百度应用’touppercase’, //字母大写’tolowercase’, //字母小写’background’, //背景’template’, //模板’scrawl’, //涂鸦’music’, //音乐’inserttable’,

//插入表格’drafts’, // 从草稿箱加载’charts’, // 图表]]
包的整合：官网中下载的资源文件中会附带包，需要自己手动整合到项目中。
页面引用：

这里写代码片 <script type="text/javascript" charset="utf-8" th:src="@{/res/utf8-jsp/ueditor.config.js}" src="upload/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/res/utf8-jsp/ueditor.all.min.js}" src="ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" th:src="@{/res/utf8-jsp/lang/zh-cn/zh-cn.js}" src="lang/zh-cn/zh-cn.js"></script>

<fieldset style="border:solid 1px #aaa;padding:3px;">
        <legend>公告内容</legend>
        <div style="padding:5px;">
            <table>
                <tr>
                    <td colspan="4">
                        <script id="editor" type="text/plain" style="width:760px;height:260px;"></script>
                    </td>
                </tr>
            </table>
        </div>
    </fieldset>

实例化编译器

var ue = UE.getEditor('editor',{
        toolbars: [
            ['preview','undo', 'redo', 'bold', 'indent', 'italic','underline','strikethrough','subscript','fontborder','superscript','directionalityltr',
                'formatmatch','blockquote','selectall','print','horizontal','removeformat','time','date','fontfamily','fontsize','simpleupload','imagecenter',
                'insertimage','edittable','edittd','emotion','spechars','searchreplace',
                'justifyleft','justifyright','justifyjustify','forecolor','backcolor','insertorderedlist','rowspacingtop','rowspacingbottom','pagebreak',
                'insertframe','lineheight','customstyle','autotypeset','touppercase','tolowercase','background','template','inserttable','charts']
        ]
    });

Toolbars:上面提到的富文本编译器按钮

编译器一般是以jsp形式请求分装好的服务，要想将编译器整合到项目中以selevt服务请求可做如下修改配置文件ueditor.config.js：

修改文件内容：url是获取项目服务前缀，ctx是项目中的根目录，一般在头文件获取，页面再引用头文件，serverUrl : ctx + “upload/import/getConfig”此句是请求后台配置好的方法，编译器的所有方法的统一服务请求方法，后台方法后续会写出。

var URL = window.UEDITOR_HOME_URL || getUEBasePath();
  URL = ctx +'/res/utf8-jsp/';
  /**
   * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
   */
  window.UEDITOR_CONFIG = {

      //为编辑器实例添加一个路径，这个不能被注释
      UEDITOR_HOME_URL: URL
,
      // 服务器统一请求接口路径
      //, serverUrl: URL + "jsp/controller.jsp"
      serverUrl : ctx + "upload/import/getConfig"
      //工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的重新定义

后台文件附件上传方法：

/**
 * 读取json配置,获取整合到项目中的config.json
 *
 * @return json配置
 * @throws IOException
 */
public String readJson() throws IOException {
    InputStream inputStream = UploadController.class.getResourceAsStream("/config.json");
    BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream, "UTF-8"));
    String line = reader.readLine(); // 读取第一行
    String resl = "";
    while (line != null) { // 如果 line 为空说明读完了
        resl += line;
        line = reader.readLine(); // 读取下一行
    }
    reader.close();
    return resl;
}

/**
 * 百度编译器上传
 *
 * @param action
 * @param file
 * @return
 */
@ResponseBody
@RequestMapping(value = "/getConfig")
public Object getConfig(@RequestParam("action") String action,
                        @RequestParam(value = "upfile", required = false) CommonsMultipartFile file) {
    String reString = "";
    JSONObject object = null;
    if ("config".equals(action)) {
        try {
            reString = readJson();
            //读取配置文件，以json实体的形式呈现
            object = JSON.parseObject(reString);
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    } else {
        try {
            reString = readJson();
        } catch (IOException e) {
            e.printStackTrace();
        }
        object = JSON.parseObject(reString);
        //获取上传文件名称
        String fileName = file.getOriginalFilename();
        //创建一个json实体用于存储一些状态值
        JsonState state = new JsonState();
        state.setState(JsonState.OK);
        state.setTitle(fileName);
        state.setOriginal(fileName);
        //读取配置文件中的rootpath根上传目录
        File newFile = new File(object.get("rootpath") + fileName);
        if (!newFile.exists()) {
            newFile.mkdirs();
        }
        //附件表
        CommFjxxBo commFjxxBo = new CommFjxxBo();
        try {
            file.transferTo(newFile);
            commFjxxBo.setFjxxId(IdWorker.getId());
            commFjxxBo.setWjmc(fileName);
            commFjxxBo.setWjlj(object.get("rootpath") + fileName);
            commFjxxBo.setScbz(CodeKeyUtils.STATE_USERD);
            commFjxxBo.setCjrId(Securitys.getUserId());
            commFjxxBo.setCjsj(WondersUtils.getNowDate());
            commFjxxService.saveEntity(commFjxxBo);
        } catch (IOException e) {
            e.printStackTrace();
        }
        state.setUrl(String.valueOf(commFjxxBo.getFjxxId()));
        state.setTitle(String.valueOf(commFjxxBo.getFjxxId()));
        return state;
    }
    return object;
}

用于存储一些状态值的json实体：此实体根据自己业务需求修改

/**
 * 上传文件返回对象
 *
 * @author liaopeng
 * @ClassName: JsonState
 * @mail liaopeng@wondersgroup.com
 * @date 2015年11月3日 下午3:46:39
 */
public class JsonState {

    public final static String OK = "SUCCESS";

    // 是否成功 成功 SUCCESS
    private String state;
    //宽度
    private String width;
    //高度
    private String height;
    private String id;
    //错位代码
    private int error;

    // 图片地址
    private String url;

    // 标题
    private String title;

    // 别称
    private String original;

    public String getState() {
        return state;
    }

    public void setState(String state) {
        this.state = state;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getOriginal() {
        return original;
    }

    public void setOriginal(String original) {
        this.original = original;
    }

    public int getError() {
        return error;
    }

    public void setError(int error) {
        this.error = error;
    }

    public String getWidth() {
        return width;
    }

    public void setWidth(String width) {
        this.width = width;
    }

    public String getHeight() {
        return height;
    }

    public void setHeight(String height) {
        this.height = height;
    }

    public String getId() {
        return id;

    }

    public void setId(String id) {
        this.id = id;
    }

}

配置文件存放位置：可以放在项目中的resources下面，文件名：config.json

配置文件内容如下：
/* 前后端通信相关的配置,注释只允许使用多行方式 */
{
*/ 上传图片配置项 */
“rootpath”:”E:/aaaaaa/”, /此字段是我手动添加的属性，用去放服务器附件存储的根目录/**
“imageActionName”: “uploadimage”, /* 执行上传图片的action名称 */
“imageFieldName”: “upfile”, /* 提交的图片表单名称 */
“imageMaxSize”: 2048000, /* 上传大小限制，单位B */
“imageAllowFiles”: [“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”], /* 上传图片格式显示 */
“imageCompressEnable”: true, /* 是否压缩图片,默认是true */
“imageCompressBorder”: 1600, /* 图片压缩最长边限制 */
“imageInsertAlign”: “none”, /* 插入的图片浮动方式 */
“imageUrlPrefix”: “/nxlagc/upload/import/fileReadShow?fjid=”, /* 图片访问路径前缀，此处采用的是获取文件存放地址，然后再读取文件以流的形式传送到页面 */
“imagePathFormat”: “/data/”, /* 上传保存路径,可以自定义保存路径和文件名格式 ,此时此处无用*/
/* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */
/* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */
/* {time} 会替换成时间戳 */
/* {yyyy} 会替换成四位年份 */
/* {yy} 会替换成两位年份 */
/* {mm} 会替换成两位月份 */
/* {dd} 会替换成两位日期 */
/* {hh} 会替换成两位小时 */
/* {ii} 会替换成两位分钟 */
/* {ss} 会替换成两位秒 */
/* 非法字符 \ : * ? ” < > | */
/* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

/* 涂鸦图片上传配置项 */
“scrawlActionName”: “uploadscrawl”, /* 执行上传涂鸦的action名称 */
“scrawlFieldName”: “upfile”, /* 提交的图片表单名称 */
“scrawlPathFormat”: “/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, /* 上传保存路径,可以自定义保存路径和文件名格式 */
“scrawlMaxSize”: 2048000, /* 上传大小限制，单位B */
“scrawlUrlPrefix”: “/nxlagc/upload/import/fileReadShow?fjid=”, /* 图片访问路径前缀 */
“scrawlInsertAlign”: “none”,

/* 截图工具上传 */
“snapscreenActionName”: “uploadimage”, /* 执行上传截图的action名称 */
“snapscreenPathFormat”: “/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, /* 上传保存路径,可以自定义保存路径和文件名格式 */
“snapscreenUrlPrefix”: “/nxlagc/upload/import/fileReadShow?fjid=”, /* 图片访问路径前缀 */
“snapscreenInsertAlign”: “none”, /* 插入的图片浮动方式 */

/* 抓取远程图片配置 */
“catcherLocalDomain”: [“127.0.0.1”, “localhost”, “img.baidu.com”],
“catcherActionName”: “catchimage”, /* 执行抓取远程图片的action名称 */
“catcherFieldName”: “source”, /* 提交的图片列表表单名称 */
“catcherPathFormat”: “/ueditor/jsp/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}”, /* 上传保存路径,可以自定义保存路径和文件名格式 */
“catcherUrlPrefix”: “”, /* 图片访问路径前缀 */
“catcherMaxSize”: 2048000, /* 上传大小限制，单位B */
“catcherAllowFiles”: [“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”], /* 抓取图片格式显示 */

/* 上传视频配置 */
“videoActionName”: “uploadvideo”, /* 执行上传视频的action名称 */
“videoFieldName”: “upfile”, /* 提交的视频表单名称 */
“videoPathFormat”: “/ueditor/jsp/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}”, /* 上传保存路径,可以自定义保存路径和文件名格式 */
“videoUrlPrefix”: “/nxlagc/upload/import/fileReadShow?fjid=”, /* 视频访问路径前缀 */
“videoMaxSize”: 102400000, /* 上传大小限制，单位B，默认100MB */
“videoAllowFiles”: [
“.flv”, “.swf”, “.mkv”, “.avi”, “.rm”, “.rmvb”, “.mpeg”, “.mpg”,
“.ogg”, “.ogv”, “.mov”, “.wmv”, “.mp4”, “.webm”, “.mp3”, “.wav”, “.mid”], /* 上传视频格式显示 */

/* 上传文件配置 */
“fileActionName”: “uploadfile”, /* controller里,执行上传视频的action名称 */
“fileFieldName”: “upfile”, /* 提交的文件表单名称 */
“filePathFormat”: “/ueditor/jsp/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}”, /* 上传保存路径,可以自定义保存路径和文件名格式 */
“fileUrlPrefix”: “/nxlagc/upload/import/fileReadShow?fjid=”, /* 文件访问路径前缀 */
“fileMaxSize”: 51200000, /* 上传大小限制，单位B，默认50MB */
“fileAllowFiles”: [
“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”,
“.flv”, “.swf”, “.mkv”, “.avi”, “.rm”, “.rmvb”, “.mpeg”, “.mpg”,
“.ogg”, “.ogv”, “.mov”, “.wmv”, “.mp4”, “.webm”, “.mp3”, “.wav”, “.mid”,
“.rar”, “.zip”, “.tar”, “.gz”, “.7z”, “.bz2”, “.cab”, “.iso”,
“.doc”, “.docx”, “.xls”, “.xlsx”, “.ppt”, “.pptx”, “.pdf”, “.txt”, “.md”, “.xml”
], /* 上传文件格式显示 */

/* 列出指定目录下的图片 */
“imageManagerActionName”: “listimage”, /* 执行图片管理的action名称 */
“imageManagerListPath”: “/ueditor/jsp/upload/image/”, /* 指定要列出图片的目录 */
“imageManagerListSize”: 20, /* 每次列出文件数量 */
“imageManagerUrlPrefix”: “”, /* 图片访问路径前缀 */
“imageManagerInsertAlign”: “none”, /* 插入的图片浮动方式 */
“imageManagerAllowFiles”: [“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”], /* 列出的文件类型 */

/* 列出指定目录下的文件 */
“fileManagerActionName”: “listfile”, /* 执行文件管理的action名称 */
“fileManagerListPath”: “/ueditor/jsp/upload/file/”, /* 指定要列出文件的目录 */
“fileManagerUrlPrefix”: “”, /* 文件访问路径前缀 */
“fileManagerListSize”: 20, /* 每次列出文件数量 */
“fileManagerAllowFiles”: [
“.png”, “.jpg”, “.jpeg”, “.gif”, “.bmp”,
“.flv”, “.swf”, “.mkv”, “.avi”, “.rm”, “.rmvb”, “.mpeg”, “.mpg”,
“.ogg”, “.ogv”, “.mov”, “.wmv”, “.mp4”, “.webm”, “.mp3”, “.wav”, “.mid”,
“.rar”, “.zip”, “.tar”, “.gz”, “.7z”, “.bz2”, “.cab”, “.iso”,
“.doc”, “.docx”, “.xls”, “.xlsx”, “.ppt”, “.pptx”, “.pdf”, “.txt”, “.md”, “.xml”
] /* 列出的文件类型 */

}
以上主要以图片上传为例子，此处图片显示主要是以流的形式赋值给页面的img标签，imageUrlPrefix：为图片访问前缀，此处采用的是请求后台地址方法的形式获取文件流。

编译器常用方法：
1.获取UE父文本编辑框
var testmySeatWork = UE.getEditor(“mySeatWork”); 或者
var testmySeatWork = UE.getEditor(“mySeatWork”,{initialFrameHeight:340,initialFrameWidth:900,maximumWords:1000,autoHeightEnabled:false});

2.设置ueditor编辑框为只读
testmySeatWork.setDisabled();

3.获取UE编辑框里的内容
var content = testmySeatWork.getContent();

4.通过js设置编辑框里的提示内容
testmySeatWork.execCommand(“insertHtml”, “作答不能为空“);

5.通过js让编辑框获取焦点
// 选择之后隐藏文件文件div框
myUE.addListener(“focus” ,function(){
$(“#myFiles”).hide(500);
});

其他百度