Java開發之富文本編輯器TinyMCE

1、題外話

最近負責了一個cms網站的運維，裏面存在不少和編輯器有關的問題，好比編輯一些新聞博客，論文模塊。系統採用的是FCKEditor，自我感受不是很好，以下圖

特別是在用戶想插入一個圖片的話，就很麻煩，全部用戶共享一個文件目錄，這樣就很差了，因而便想到了TinyMCE編輯器，博客園默認的也是這個編輯器，接下

來，咱們開始吧

2、TinyMCE編輯器集成步驟

2.1：下載相關文件

(1)下載TinyMCE插件包

下載地址:   https://www.tinymce.com/download/,以下圖所示，下載開發版

（2）下載其餘功能包

包括中文語言包zh_CN.js，圖片上傳操做須要的plugin.min.js和jquery.form.js

或者能夠從本人的網盤下載：      連接：http://pan.baidu.com/s/1skJ6uRV 密碼：xn0r   這一點很重要，很重要，很重要哦

下載完成後以下圖所示

2.2：操做步驟

(1):複製TinyMCE到項目中

 解壓下載到的tinymce_4.6.4_dev.zip,解壓後會有一個tinymce文件夾，將整個文件夾放到WebContent目錄下，目錄結構以下圖所示

(2):頁面集成TinyMCE

在頁面的JS標籤中初始化TinyMCE編輯器，代碼以下所示

<script type="text/javascript">
tinymce.init({
            selector: "textarea",
            upload_image_url: './upload', //配置的上傳圖片的路由
            height: 400,
            language:'zh_CN',
            plugins: [
                'advlist autolink lists link  charmap print preview hr anchor pagebreak',
                'searchreplace wordcount visualblocks visualchars code fullscreen',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help'
              ],
              toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
              toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help',
              image_advtab: true,
              templates: [
                { title: 'Test template 1', content: 'Test 1' },
                { title: 'Test template 2', content: 'Test 2' }
              ],
            menubar: false
        });
</script>

 運行以下圖所示，基本的集成已經完畢

3、TinyMCE編輯器本地上傳圖片功能

注：默認的TinyMCE是沒有上傳本地圖片到服務器的功能的，因此這裏咱們須要本身實現，下面咱們就說一說具體的實現步驟

3.1：集成uploadimage插件

在./tinymce/js/tinymce/plugins目錄下新建一個uploadimage目錄，放入下載的plugin.min.js，目錄結構以下圖所示

3.2：在TinyMCE初始化中添加上傳圖片按鈕

代碼以下圖所示，須要注意的是在plugins中和toobar2中都須要加入uploadimage，toolbar1表明第一行菜單，toolbar2表明第二行菜單，次初始化代碼是來自https://www.tinymce.com/docs/demo/full-featured/  官網一個完整的例子，功能按鈕你們能夠試着去除或者添加

tinymce.init({
            selector: "textarea",
            upload_image_url: './upload', //配置的上傳圖片的路由
            height: 400,
            language:'zh_CN',
            plugins: [
                'advlist autolink lists link  charmap print preview hr anchor pagebreak',
                'searchreplace wordcount visualblocks visualchars code fullscreen',
                'insertdatetime media nonbreaking save table contextmenu directionality',
                'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc help uploadimage'
              ],
              toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
              toolbar2: 'print preview media | forecolor backcolor emoticons | codesample help uploadimage',
              image_advtab: true,
              templates: [
                { title: 'Test template 1', content: 'Test 1' },
                { title: 'Test template 2', content: 'Test 2' }
              ],
            menubar: false
        });

再次運行，發如今編輯器的菜單欄多了一個圖片的按鈕就是上傳圖片了（TinyMCE默認有一個image，能夠去掉，由於那個image只能夠給網絡圖片的URL），總這裏plugins裏面

已經把默認的image去掉了，以下圖

3.3：實現上傳本地圖片到服務器的功能

前提：須要先用java實現一個upload工具類，此工具類能夠完成本地圖片上傳到服務器，並返回圖片的URL給ajax,ajax在success的方法中接收URL並向TinyMCE中插入一個image標籤

JS核心代碼以下，已包含在plugin.min.js文件中，這裏注意TinyMCE的版本不用命令可能會有差別

 success: function (data) {
                    //alert('2222');
                    //alert(data);
                    if (data!=null) {
                        //alert('4444');
                        editor.focus();
                        //tinyMCE 4.X版本的插入對象
                        tinyMCE.activeEditor.insertContent('<img src="'+data+'"></img>');
//                        editor.selection.setContent(dom.createHTML('img', {src: src}));
//                        data.file_path.forEach(function (src) {
//                            editor.selection.setContent(dom.createHTML('img', {src: src}));
//                        })
                    }

ajax提交form表單的操做中還用到了form.ajaxSubmit,因此須要在編輯器的頁面引入jquery.form.js 包，總體以下所示

<script type="text/javascript" src="./tinymce/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="./tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript" src="./tinymce/js/jquery.form.js"></script>

實現效果，點擊圖片上傳能夠從本地選擇圖片文件，肯定後ajax異步上傳，而且返回圖片的URL，讓TinyMCE執行插入img標籤的操做

4：演示一個編輯器發佈網頁內容的例子

4.1：添加發布按鈕

在編輯器頁面下面添加一個發佈文章的按鈕，定義onclick事件爲GetTinyMceContent()

function GetTinyMceContent()
{
// <!-- 
// http request方式b_content的參數不能太長，太長會截斷，這裏只是作演示編輯器，真實狀況是獲取到內容到數據庫而後
// 展現的時候在頁面遍歷數據庫字段content的內容
// --> 
//alert('11');
window.location.href="blog.jsp?b_content="+tinyMCE.activeEditor.getContent();
}

4.2：添加文章顯示頁面

以下圖所示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>文章內容-HTML</title>
</head>
<body>
<h2 align="center">個人第一篇博文</h2>
<%= request.getParameter("b_content") %>
</body>
</html>

4.3:運行效果

在編輯器輸入一些內容，並上傳一個圖片，以下圖示

點擊發布文章的按鈕，以下圖所示，發佈成功能夠在網頁查看文章的輸出格式，大功已經告成！

4.4：總結

在真實的環境中TinyMCE的內容不會經過在Request請求的後面以?參數名=參數值，而後在頁面<%= request.getParameter("b_content") %>的形式處理，這裏只是作一個流程的演示就沒涉及數據庫內容。真實的場景是編輯完後，把帶有HTML標籤的TinyMCE的內容存到數據庫的一個text大文本字段裏面，而後前端取出字符串對象插入到HTML元素中