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

Posted 2020-12-28 vandheerlord

　　由于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  }

       关于插入图片，参考https://segmentfault.com/a/1190000010541119，对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格式不正确也可能无法正确的显示图片，而是会提示错误。

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