富文本编辑器simditor的使用
生活随笔
收集整理的這篇文章主要介紹了
富文本编辑器simditor的使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先在web工程的webapps目錄下創(chuàng)建一個(gè)文件夾，在這里我是用simditor，如下圖：
?
去官網(wǎng)下載文件
2.3.6版本有單獨(dú)的simditor-2.3.6.zip可以下載，點(diǎn)擊下面的鏈接：
https://simditor.tower.im/docs/doc-usage.html
?
此處要注意的是如果你是下載的源碼，只要在simditor-2.3.8\site\assets中引入下面三個(gè)目錄的內(nèi)容即可：?
?
?
?
?
?
?
?
<%@ 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>添加用戶(hù)</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><!-- 開(kāi)始 --><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';//設(shè)置中文var editor = new Simditor({textarea: $('#editor'), //textarea的idplaceholder: '這里輸入文字...',toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'], //工具條都包含哪些內(nèi)容pasteImage: true,//允許粘貼圖片defaultImage: '/res/simditor/images/image.png',//編輯器插入的默認(rèn)圖片，此處可以刪除upload : {url : 'richtext_img_upload.do', //文件上傳的接口地址params: null, //鍵值對(duì),指定文件上傳接口的額外參數(shù),上傳的時(shí)候隨文件一起提交fileKey: 'upload_file', //服務(wù)器端獲取文件數(shù)據(jù)的參數(shù)名connectionCount: 3,leaveConfirm: '正在上傳文件'}});</script><!-- 結(jié)束 --><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%>添加用戶(hù)<%=basePath%></h1> <form action="" name="userForm"> 標(biāo)題：<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;"/> --><!-- 開(kāi)始 --><div class="row cl"><label class="form-label col-xs-4 col-sm-2">文章內(nèi)容： </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><!-- 結(jié)束 --><input type="button" value="添加" onclick="addArticle()"> </form></div> </body> </html>?
總結(jié)
以上是生活随笔為你收集整理的富文本编辑器simditor的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： MATLAB基础——关于数组（一）
- 下一篇： 网易云歌词解析(配合audio标签实现本