富文本內容簡單的的增刪改查

　　因爲html自己的textarea標籤的文本編輯功能較爲簡單，不能設置文字的樣式，所以須要富文本控件來加強textarea的功能。
       一些常見的富文本控件有：UEditor、kindeditor、simditor、bootstrap-wysiwyg、wangEditor、CKEditor、tinymce，各有優缺點，網上也有對不介紹，再也不贅述。

　　此處選用tinymce，因其兼容性較好，插入頁面也較爲簡單，此外還有豐富的插件能夠擴展功能。

　　首先，在頁面上使用tinymce：1.引入js文件tinymce.min.js；2.在header中加入script標籤，加入初始化函數：

 1 tinymce.init({
 2             selector: 'textarea',
 3             language: 'zh_CN',
 4             menubar: false,
 5             convert_urls: false,
 6             mode: 'textareas',
 7             width: 700,
 8             height: 300,
 9             branding: false,
10             plugins: 'link lists textcolor wordcount colorpicker textpattern imageupload',
11             toolbar: 'bold italic strikethrough forecolor backcolor undo redo | imageupload link | 
　　　　　　　　　　　　　　fontselect | fontsizeselect | imageupload link | alignleft aligncenter alignright alignjustify  | 
　　　　　　　　　　　　　　numlist bullist outdent indent  | removeformat',
12             imageupload_url: '${pageContext.request.contextPath}/UploadServlet'
13         });

　　此處mode爲textarea，意味着如今頁面中插入的textarea標籤均會變爲tinymce編輯器。其餘不少參數能夠根據須要進行配置，如theme、plugins、toolbar等。

有了正確的js引入和初始化參數後，在jsp頁面中加入一個textarea的效果就會以下圖所示：

　　下一步，增刪改查。要進行增刪改查，就意味着須要和後臺、數據庫進行交互，所以首先應該知道tinymce傳遞到後臺的數據到底是什麼樣的數據。這一點，能夠簡單的經過form表單提交後，在控制檯遍歷打印request.getParameterMap()的key---value來進行了解，好比：

　　　　RTFContent---<p style="text-align: center; padding-left: 30px;"><span style="text-decoration: line-through; color: #0000ff; "><em><strong>你好</strong></em></span></p>

       能夠知道一系列的文本格式基本上都是經過各類html標籤的組合以及其style屬性的設置來完成的，且傳遞到後臺的數據中包含了能夠用於展現出相同文本效果的所有信息，所以我的此處增刪改查的思路其實較爲簡單：數據庫相應的表格只須要一個id主鍵和用以保存rtf內容的text類型的字段便可。

　　tinymce是能夠經過配置插件實現插入圖片的效果的，不過傳遞到後臺的是還是img標籤的信息，所以數據庫方面存儲上使用text類型字段仍然沒有問題，只是額外須要在編輯器上配置插件，以及增長後臺處理圖片上傳的servlet。

增刪改查雖然都是較爲基本的操做，可是實際操做此控件有一些方面可能須要進行調整。

　　好比在提交內容方面，submit提交和ajax提交會有必定的差別，主要是ajax方式提交可能存在後臺獲取不到數據的問題。參考https://blog.csdn.net/Panda_813/article/details/81037934，經過tinyMCE.activeEditor.getContent();來提取富文本內容、並拼接在data中來傳遞內容，也即：

 1  function saveRTF(){
 2    　　var content = tinyMCE.activeEditor.getContent();
 3    　　$.ajax({
 4     　　　　url:"${pageContext.request.contextPath }/RTFServlet",
 5     　　　　data:"method=saveRTF&title="+$("#title").val()+"&content=" + content,
 6     　　　　type:"post",
 7     　　　　dataType:"json",
 8     　　　　success:function(data){
 9      　　　　　　alert(data.message);
10     　　　　　　if(data.code == 200){
11      　　　　　　　　window.location.href="${pageContext.request.contextPath }/index.jsp";
12     　　　　　　}
13    　　　　}
14   　　});
15  }

       關於插入圖片，參考http://www.javashuo.com/article/p-xdhhohdu-de.html，對tinymce進行配置，添加imageupload插件、引入tinymce.min.js。

　　須要調整的地方主要是：

　　　　1.因爲tinyMCE內置CSS的問題會致使彈窗縮放爲0.1倍，須要在imageupload插件目錄的css文件夾下的style.css中添加如下樣式，覆蓋原樣式：

1 .mce-window {
2     transform: initial !important;
3 }

　　　　2.imageupload_url參數的url是處理上傳操做的（好比servlet）路徑。

　　　　3.後臺處理圖片上傳後，返回的結果須要是json類型，且形式如{"error":false,"path":"http:\/\/www.mydomain.com\/myimage.jpg"}，好比：如果上傳成功，則返回的json應該是"{\"error\":false,\"path\":\"上傳路徑\"}"；而若文件類型不是圖片則返回的json應該是"{\"error\":\"filetype\"}"，不然若json格式不正確也可能沒法正確的顯示圖片，而是會提示錯誤。

　　　　正確設置後便可經過圖片上傳按鈕在光標位置加入圖片，且圖片的大小能夠進行調整。