FreeMarker、Velocity模板嵌入UEditor

作者: 元代码 | 来源:发表于2017-10-25 18:35 被阅读0次

以下以FreeMarker为例，Velocity同理

1.官网：http://ueditor.baidu.com
下载：http://ueditor.baidu.com/website/download.html
下载jsp版本及源码版本（使用源码版本需要用grunt编译）
这里下源码版本的目的主要是为了获得 jsp/src/com/baidu/ueditor中的代码，可以根据自己需要修改代码。

2.导入必要jar包：

        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
        <dependency>
            <groupId>com.baidu</groupId>
            <artifactId>ueditor-json</artifactId>
            <version>1.0.0</version>
        </dependency>

3.拷贝代码：
把jsp/src/com/baidu/ueditor中源代码拷贝到工程中。
把ueditor目录拷贝到工程中webapp中，本例中拷贝到了webapp/media目录下。

4.页面中引入UEditor相关脚本：

<script type="text/javascript" charset="utf-8" src="../../../media/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../../../media/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="../../../media/ueditor/lang/zh-cn/zh-cn.js"></script>

用编辑器的位置加入

<div style="margin-left: 100px;">
  <script id="editor" type="text/plain" style="width:800px;height:600px;"></script>
</div>

5.这里是重点！！！有2种方案可选择：
第一种方案：这种方案简单一点，由于现有工程的视图解析器只有FreeMarker，并不能直接使用jsp版本的UEditor，需要加入jsp解析器配置，以便UEditor调用jsp中代码，

<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
   <property name="viewResolvers">
      <list>
         <!-- 配置freeMarker视图解析器 -->
         <bean class="org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver">
            <property name="cache" value="true" />
            <property name="prefix" value="" />
            <property name="suffix" value=".html" />
            <property name="contentType" value="text/html;charset=UTF-8" />
            <property name="viewClass" value="org.springframework.web.servlet.view.freemarker.FreeMarkerView" />
            <property name="allowSessionOverride" value="true" />
            <property name="allowRequestOverride" value="true" />
            <property name="exposeSpringMacroHelpers" value="false" />
            <property name="exposeRequestAttributes" value="true" />
            <property name="exposeSessionAttributes" value="true" />
            <property name="requestContextAttribute" value="request" />
         </bean>
         <!-- jsp 视图解析器 -->
         <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
            <property name="viewClass" value="org.springframework.web.servlet.view.JstlView" />
            <property name="prefix" value="/WEB-INF/jsp/" />
            <property name="suffix" value=".jsp" />
         </bean>
      </list>
   </property>
</bean>

第二种方案，不配置jsp视图解析器，请求返回时走jsp的视图解析器。
这种方案需要自定义接口“骗过”UEditor，修改UEditor请求的路径，请求自定义的接口。
a.通过看UEditor的js代码可以发现 ueditor.config.js文件配置的请求路径是serverUrl: URL + "jsp/controller.jsp" ，这里要改为自己接口的地址：serverUrl: URL + "jsp/upfile"。（注：这里路径前半段的jsp/不要修改，在UEditor的java代码中会根据这个路径查找config.js文件。如果非要改，就把jsp/config.json换个目录比如conf目录，这样就可以把接口地址改为serverUrl: URL + "conf/upfile"）
b.仿照jsp/controller.jsp写接口
jsp:

<%
    request.setCharacterEncoding( "utf-8" );
    response.setHeader("Content-Type" , "text/html");
    String rootPath = application.getRealPath( "/" );
    out.write( new ActionEnter( request, rootPath ).exec() );
%>

接口: （一定要支持POST和GET，页面加载时会通过GET请求加载配置。）

    @RequestMapping(value = "/media/ueditor/jsp/upfile", method = { RequestMethod.GET, RequestMethod.POST })
    @ResponseBody
    public String check(HttpServletRequest request) throws IOException {
        String rootPath = request.getSession().getServletContext().getRealPath("/");
        String exec = new ActionEnter(request, rootPath).exec();
        return exec;
    }

c.改造com.baidu.ueditor.upload.BinaryUploader类，处理MultipartFile
原：

FileItemIterator iterator = upload.getItemIterator(request);
while (iterator.hasNext()) {
  fileStream = iterator.next();
  if (!fileStream.isFormField())
    break;
  fileStream = null;
}
if (fileStream == null) {
  return new BaseState(false, AppInfo.NOTFOUND_UPLOAD_DATA);
}
String savePath = (String) conf.get("savePath");
String originFileName = fileStream.getName();

现：

MultipartHttpServletRequest mulReq = (MultipartHttpServletRequest) request;
MultipartFile file = mulReq.getFile("upfile");
String savePath = (String) conf.get("savePath");
String originFileName = file.getOriginalFilename();

6.目前工程是分布式部署，管理后台和提供前台工程查询接口的工程分别部署在不同服务器上，UEditor默认会把图片存储在管理后台的服务器上，需要再次对BinaryUploader进行改造，每次上传到共享文件服务器上，将图片的imageUrl存到State对象中，

storageState.putInfo("url", PathFormat.format(imageUrl));

附：UEditor相关API参照以下js

<script type="text/javascript">
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
        var ue = UE.getEditor('editor');
        function isFocus(e){
            alert(UE.getEditor('editor').isFocus());
            UE.dom.domUtils.preventDefault(e)
        }
        function setblur(e){
            UE.getEditor('editor').blur();
            UE.dom.domUtils.preventDefault(e)
        }
        function insertHtml() {
            var value = prompt('插入html代码', '');
            UE.getEditor('editor').execCommand('insertHtml', value)
        }
        function createEditor() {
            enableBtn();
            UE.getEditor('editor');
        }
        function getAllHtml() {
            alert(UE.getEditor('editor').getAllHtml())
        }
        function getContent() {
            var arr = [];
            arr.push("使用editor.getContent()方法可以获得编辑器的内容");
            arr.push("内容为：");
            arr.push(UE.getEditor('editor').getContent());
            alert(arr.join("\n"));
        }
        function getPlainTxt() {
            var arr = [];
            arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
            arr.push("内容为：");
            arr.push(UE.getEditor('editor').getPlainTxt());
            alert(arr.join('\n'))
        }
        function setContent(isAppendTo) {
            var arr = [];
            arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
            UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
            alert(arr.join("\n"));
        }
        function setDisabled() {
            UE.getEditor('editor').setDisabled('fullscreen');
            disableBtn("enable");
        }

        function setEnabled() {
            UE.getEditor('editor').setEnabled();
            enableBtn();
        }
        function getText() {
            //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
            var range = UE.getEditor('editor').selection.getRange();
            range.select();
            var txt = UE.getEditor('editor').selection.getText();
            alert(txt)
        }
        function getContentTxt() {
            var arr = [];
            arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
            arr.push("编辑器的纯文本内容为：");
            arr.push(UE.getEditor('editor').getContentTxt());
            alert(arr.join("\n"));
        }
        function hasContent() {
            var arr = [];
            arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
            arr.push("判断结果为：");
            arr.push(UE.getEditor('editor').hasContents());
            alert(arr.join("\n"));
        }
        function setFocus() {
            UE.getEditor('editor').focus();
        }
        function deleteEditor() {
            disableBtn();
            UE.getEditor('editor').destroy();
        }
        function disableBtn(str) {
            var div = document.getElementById('btns');
            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                if (btn.id == str) {
                    UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
                } else {
                    btn.setAttribute("disabled", "true");
                }
            }
        }
        function enableBtn() {
            var div = document.getElementById('btns');
            var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
            for (var i = 0, btn; btn = btns[i++];) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            }
        }

        function getLocalData () {
            alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
        }

        function clearLocalData () {
            UE.getEditor('editor').execCommand( "clearlocaldata" );
            alert("已清空草稿箱")
        }
    </script>

FreeMarker、Velocity模板嵌入UEditor

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读