富文本编辑器simditor的使用

首先在web工程的webapps目录下创建一个文件夹，在这里我是用simditor，如下图：

去官网下载文件

2.3.6版本有单独的simditor-2.3.6.zip可以下载，点击下面的链接：

https://simditor.tower.im/docs/doc-usage.html

此处要注意的是如果你是下载的源码，只要在simditor-2.3.8\site\assets中引入下面三个目录的内容即可：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
   <%  
String path = request.getContextPath();  
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
	%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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">
<base href="<%=basePath%>"> 
<title>添加用户</title>   
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
      <!-- 开始 -->
      
      <link rel="stylesheet" type="text/css" href="simditor/styles/simditor.css" />

		<script type="text/javascript" src="simditor/scripts/jquery.min.js"></script>
		<script type="text/javascript" src="simditor/scripts/module.js"></script>
		<script type="text/javascript" src="simditor/scripts/hotkeys.js"></script>
		<script type="text/javascript" src="simditor/scripts/uploader.js"></script>
		<script type="text/javascript" src="simditor/scripts/simditor.js"></script>
      
      	<script type="text/javascript">
      	var editor = new Simditor({
      	  textarea: $('#editor')
      	  //optional options
      	});
      	$(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: '/res/simditor/images/image.png',//编辑器插入的默认图片，此处可以删除
                upload : {
                    url : 'richtext_img_upload.do', //文件上传的接口地址
                    params: null, //键值对,指定文件上传接口的额外参数,上传的时候随文件一起提交
                    fileKey: 'upload_file', //服务器端获取文件数据的参数名
                    connectionCount: 3,
                    leaveConfirm: '正在上传文件'
                }
            });
      	</script>
      <!-- 结束 -->
      
    
      
    <script type="text/javascript">  
    function addArticle(){  
        var form = document.forms[0];  
        form.action = "<%=basePath%>article/addArticle?userId=${userId}";  
        form.method="post";  
        form.submit();  
    }  
</script>

</head>
<body>
<div class="container-fluid">
	<h1><%=path%>添加用户<%=basePath%></h1>  
    <form action="" name="userForm">  
       标题：<input type="text" name="title"> 
      <!--  正文：<textarea name="content" clos=",50" rows="5" warp="virtual"></textarea> -->
<!-- <input type="textarea" name="content" style="width:300px;height:100px;"/> -->
       
       
  <!-- 开始 -->
    <div class="row cl">
    	<label class="form-label col-xs-4 col-sm-2">文章内容：&nbsp;
    	</label>
    	<div class="formControls col-xs-8 col-sm-9">
        	<textarea id="editor" type="text/plain" name="content" style="width:100%;height:400px;"autofocus>
        	</textarea>
    	</div>
	</div>

       <!-- 结束 -->
       
       
        <input type="button" value="添加" onclick="addArticle()">  
    </form>
    </div>
</body>
</html>

富文本编辑器simditor的使用

猜你喜欢