富文本编辑器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的idplaceholder: '这里输入文字...',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的使用相关推荐

富文本编辑器simditor
1. 使用依赖了jQuery, 而且它有自己的样式, 别忘记从node_modules引入,例如 import Simditor from 'simditor'; import 'simditor/ ...
html实现富文本编辑器,前端程序员福利，6款轻量级富文本编辑器，轻松实现富文本编辑...
1.国产富文本编辑wangEditor 基于javascript跟css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义typecho 富文本编辑器,菜单栏可以自定义配置. 下载 ...
android前端代码编辑器,前端程序员福利，6款轻量级富文本编辑器
原标题:前端程序员福利,6款轻量级富文本编辑器 1.国产富文本编辑wangEditor 基于java和css开发的 Web富文本编辑器, 轻量.简洁.易用.开源免费,样式可自定义,菜单栏可以自定义配置 ...
Simditor 富文本编辑器多选图片上传、视频连接插入
simditor 是一个基于浏览器的所见即所得的文本编辑器.Simditor 富文本编辑器, 支持多选图片上传, 视频连接插入, HTML代码编辑以及常用富文本按钮,支持的浏览器:IE10.Firef ...
react中使用simditor富文本编辑器
react 中使用没有启用图片上传功能的simditor 富文本编辑器环境介绍功能需求步骤实现 npm安装simditor依赖 jsx页面引入 componentDidMount 获取DOM ...
Spring Boot使用Simditor富文本编辑器，并将图片上传到七牛云。
开始之前,需要强调的是Simditor富文本编辑器是基于Jquery的.所以必须引入Jquery.Simditor下载地址下载解压后会发现是整个simditor项目,很多东西项目根本不需要,只需要将 ...
simditor 上传图片php,simditor富文本编辑器最新最简单的使用方法
Simditor这个编辑器就不过多的介绍了,反正我个人感觉挺不错,界面好看并且使用起来也特别简单. 一.Simditor下载官网链接https://simditor.tower.im/,可以直接下载 ...
Simditor富文本编辑器
官网:https://simditor.tower.im Simditor 是团队协作工具 Tower 使用的富文本编辑器. 相比传统的编辑器它的特点是: 功能精简,加载快速输出格式化的标准 HTM ...
kind富文本编辑器_在项目中集成富文本编辑器
前言现在学程序的都离不开 Markdown 语法了吧,Markdown 已经成为典型的转换为HTML的非正式规范和参考实现,现在市场上也出现了许多Markdown实现,在基本语法之上额外增加了 ...

富文本编辑器simditor的使用

富文本编辑器simditor的使用相关推荐

最新文章

热门文章