wangEditor使用簡記

 

頁面

<!--用父容器來控制寬度-->
<div style="width:800px">
    <!--用當前元素來控制高度-->
    <textarea id="textarea1" style="height:400px;max-height:500px;">
        <p>請輸入內容...</p>
    </textarea>
</div>
<button id="btn1">獲取內容</button>

<script type="text/javascript" src="<%=path %>/resources/dist/js/lib/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="<%=path %>/resources/dist/js/wangEditor.min.js"></script>
    <script type="text/javascript">
        var editor = new wangEditor('textarea1');
        
        // 上傳圖片（舉例）
        editor.config.uploadImgUrl = '<%=path %>/uploads';
        
        // 設置 headers（舉例）
        editor.config.uploadHeaders = {
            'Accept' : 'multipart/form-data'
        };

        // 設置 headers（舉例）
        editor.config.uploadImgFileName = 'myFileName';
        
        editor.create();
        $('#btn1').click(function () {
            // 獲取編輯器區域完整html代碼
            var html = editor.$txt.html();
    
            // 獲取編輯器純文本內容
            var text = editor.$txt.text();
    
            // 獲取格式化后的純文本
            var formatText = editor.$txt.formatText();
            
            alert(html);
        });
    </script>

 

后台

如果你是用servlet那么請按照文檔中給出的形式寫就可以使用了，比較簡單，這邊不再復制代碼過來了。

如果你使用springMVC的話，以下代碼僅供參考

/*測試文件上傳*/
    @RequestMapping("/uploads")
    public @ResponseBody String uploads(HttpServletRequest request, @RequestParam("myFileName") MultipartFile file){
        String url = null;
        try {
            url = 只要能上傳文件，並且返回文件在服務器上的相對路徑即可。
        } catch (IOException e) {
            e.printStackTrace();
        }
        return request.getServletContext().getContextPath() + url;
    }

返回的路徑是絕對路徑和相對路徑均可。

 

評價

布置較為方便，加載速度中等，文檔清晰。

實際使用中幾個問題。

1、圖片調整大小位置較為奇怪。有時會出現點在圖片外面（少數情況）。圖片加入之后沒有辦法調整位置，只能刪除之后重新調整。

2、復制文本進入編輯器默認會換行。需要自己調整。

3、撤銷Ctrl+Z可以，但是還原Ctrl+Y不行。需要手動點擊。

總體感覺效果不錯。使用起來方便。