Simditor 富文本编辑器的使用

 Simditor 是Tower开源的一个基于浏览器所见即所得的文本编辑器，它的理念是保持简单，避免过度的功能，使用方法如下：

  Step1 . 点击此处   下载路径 下载最新版本的simditor的zip，如图所示：

   

 

下载解压后会发现是整个simditor项目，很多东西项目根本不需要，只需要将\site\assets下的images、scripts、styles文件夹拷

贝到我们项目中，如图所示：

Step2. 在项目的webapp中新建文件夹smiditor，将上面的文件放到此文件夹中，如图所示

Step3 . 在页面中引用需要的文件

      <!--css引用-->
     <div class="page-sidebar-wrapper" th:include="/common/page_sidebar::pageSidebar">
     <!--js引用-->
    <script type="text/javascript" th:src="@{/scripts/simditor/scripts/module.js}"></script>
    <script type="text/javascript" th:src="@{/scripts/simditor/scripts/hotkeys.js}"></script>
    <script type="text/javascript" th:src="@{/scripts/simditor/scripts/uploader.js}"></script>
    <script type="text/javascript" th:src="@{/scripts/simditor/scripts/simditor.js}"></script> 

注意：如果页面中没有引用jquery的js还需要引用jquery的js

Step4. 在页面中创建一个textarea元素，代码如下：

  <div class="form-group">
        <label class="col-md-3 control-label">详情
          <span class="required"> * </span>
        </label>
      <div class="col-md-7" id="contextText">
	<div class="form-group" align="center" id="nochecke">
	     <textarea id="editor" type="text/plain"  hidden="true" autofocus>
	     </textarea>
	</div>
     </div>
    <div style="display: none">
	<input type="input" id="content" name="content" value=''>	
    </div>
 </div>            

注意：textarea 的id值要与接下来的初始化simditor 的JS代码对应起来，隐藏的input 是 form表单提交时获取不到textarea 的值，所以需要一个能获取到的input，input 的 name 值要和后台接收的字段一致。

为了能实时更新隐藏input的值，js中需要有个同步的方法

function contextTextOnblur() {
	$(document).on("blur", "#contextText", function() {
		var content = $(".simditor-body").html();
		$("#content").val(content);
	});
}

Step5. 初始化simditor，代码如下：

	$(function(){
        Simditor.locale = 'zh-CN';//设置中文
        var editor = new Simditor({
            textarea: $("#editor"),  //textarea的id
            placeholder: '',
            toolbar:  ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'], //工具条都包含哪些内容
            pasteImage: true,//允许粘贴图片
            defaultImage: '/simditor/images/image.png',//编辑器插入的默认图片，此处可以删除
            upload : {
                url : '/smiditor/uploadSimditorImg', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                fileKey:'file', //服务器端获取文件数据的参数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
            }
        });
      });

注意：文件上需要返回特定的字段，成功时返回

{
  "success":true,
  "file_path":""
}

失败时返回：

{
  "success":false
}

Step6. 实现的controller中

@Controller
@RequestMapping("/smiditor")
public class SmiditorUploadImageController extends BaseController {
	
	@Autowired
	UploadSmiditorImageServie uploadSmiditorImageServie;
	
	@RequestMapping("/uploadSimditorImg")
	@ResponseBody
	public JSONObject uploadSimditorImg(MultipartFile file) {
		JSONObject json = new JSONObject();
		try {
			json = uploadSmiditorImageServie.uploadSimditorImg(file);
		} catch (Exception e) {
			LogWriter.writeErrorLog("上传编辑器图片失败：" + e);
		}

		return json;
	}

}

 注意： 参数名要和前台的js中的filekey一致，做图片上传的时候无论图片上传成功与否都会显示出来，二者唯一的区别就是图片的路径， 如果图片上传成功，图片的路径应该是正常的路径，如果图片上传失败图片的路径是被base64加密过的路径。

Step7. 实现service方法

	public JSONObject uploadSimditorImg(MultipartFile file) {
		JSONObject json = new JSONObject();
		try {
		//调用图片上传的方法
			ResultObject<UploadResult> resultObject = fileUploadService.uploadSingleImage(file);
            if(ValidateUtil.validateStringIsNullOrEmpty(resultObject.getData().getFileUrl()) == false){
            	json.put("success", true);
            	json.put("file_path", resultObject.getData().getFileUrl());
            }else{
            	json.put("success", false);
            }
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}

        return json;
	}

至此simditor 就可以正常使用啦。

注意：simditor默认的宽高是随内容的长短变化的，如果想固定宽高，找到simditor/styles/simditor.css文件中141行，可以加上固定宽高。

.simditor {
  position: relative;
  border: 1px solid #c9d8db;
   width: 80%; 
}