富文本内容简单的的增删改查

　　因为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格式不正确也可能没法正确的显示图片，而是会提示错误。

　　　　正确设置后便可经过图片上传按钮在光标位置加入图片，且图片的大小能够进行调整。