富文本simditor

前言

今天博主再添加一个新的富文本编辑器的学习，同样也是一个轻便的插件，简约、高效的simditor。

贴代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>simditorDemo</title>
		<link rel="stylesheet" href="css/app.css" />
		<link rel="stylesheet" type="text/css" href="css/mobile.css"/>
		<link rel="stylesheet" type="text/css" href="css/simditor.css"/>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="js/module.js" ></script>
		<script type="text/javascript" src="js/hotkeys.js" ></script>
		<script type="text/javascript" src="js/uploader.js" ></script>
		<script type="text/javascript" src="js/simditor.js" ></script>
		<script type="text/javascript">
			$(function() {
				var editor = new Simditor({
					textarea: $('#editor'),
					/*（默认值：''）编辑器的 placeholder，如果为空 Simditor 会取 textarea 的 placeholder 属性；*/
					placeholder: "请在这里输入内容：",
					/*（默认值：true）是否显示工具栏按钮；*/
					toolbar: [
						'title',
						'bold',
						'italic',
						'underline',
						'strikethrough',
						'fontScale',
						'color',
						'ol',
						'ul',
						'blockquote',
						'code',
						'table',
						'link',
						'image',
						'hr',
						'indent',
						'outdent',
						'alignment'
					],
					/*（默认值：true）是否让工具栏按钮在页面滚动的过程中始终可见；*/
					toolbarFloat: true,
					/*（默认值：false）是否隐藏工具栏，隐藏后 toolbarFloat 会失效；*/
					toolbarHidden: false,
					/*（默认值：'images/image.png'）编辑器插入混排图片时使用的默认图片；*/
					defaultImage: 'images/image.png',
					/*（默认值：true）是否在编辑器中使用 tab 键来缩进；*/
					tabIndent: true,
					/*（默认值：{}）键值对，在编辑器中增加 hidden 字段（input:hidden），通常用于生成 form 表单的默认参数；*/
					params: {},
					/*（默认值：false）false 或者键值对，编辑器上传本地图片的配置，常用的属性有 url 和 params；*/
					upload: {
						url: '',
						params: null,
						fileKey: 'upload_file',
						connectionCount: 3,
						leaveConfirm: '上传操作正在进行，您真的要离开本页面？'
					},
					/*（默认值：false）是否允许粘贴上传图片，依赖 upload 选项，仅支持 Firefox 和 Chrome 浏览器。*/
					pasteImage: true
				});
			});
		</script>
	</head>
	<body>
		<div style="width: 900px; height: 300px; ">
			<textarea id="editor" placeholder="Balabala" autofocus></textarea>
		</div>
	</body>
</html>

效果展示

http://github.ifdream.xin/demo/simditor/simditorDemo.html

资源文件链接

http://github.ifdream.xin/css/simditor/app.css
http://github.ifdream.xin/css/simditor/mobile.css
http://github.ifdream.xin/css/simditor/simditor.css
http://github.ifdream.xin/js/jquery.min.js
http://github.ifdream.xin/js/simditor/hotkeys.js
http://github.ifdream.xin/js/simditor/module.js
http://github.ifdream.xin/js/simditor/simditor.js
http://github.ifdream.xin/js/simditor/uploader.js