Java開發之富文字編輯器TinyMCE

標籤：版本   核心   arch   ack   page   sts   icon   table   dev   

一、題外話

最近負責了一個cms網站的營運，裡面存在很多和編輯器有關的問題，比如編輯一些新聞部落格，論文模組。系統採用的是FCKEditor，自我感覺不是很好，如

特別是在使用者想插入一個圖片的話，就很麻煩，所有使用者共用一個檔案目錄，這樣就不好了，於是便想到了TinyMCE編輯器，部落格園預設的也是這個編輯器，接下

來，我們開始吧

二、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>

 運行如所示，基本的整合已經完畢

三、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元素中

 

Java開發之富文字編輯器TinyMCE