feat: first commit

tuohuang · Jan 10, 2016 · 6e17d3d · 6e17d3d
1 parent b6e58a3
commit 6e17d3d
Show file tree

Hide file tree

Showing 8 changed files with 10,762 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,64 @@
-# artEditor
-移动端富文本编辑器
+# artEditor   
+artEditor是一款基于jQuery的移动端富文本编辑器，支持插入图片，后续完善其他功能。   
+
+# 引用
+在页面中引入下面资源   
+```
+<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>     
+<script src="artEditor.min.js"></script>       
+```   
+
+# Options  
+### imgTar  
+  图片上传按钮     
+### limitSize   
+  图片最大限制，默认3兆   
+### showServer    
+  显示从服务端返回的图片，默认是显示本地资源的图片       
+### uploadUrl    
+  图片上传路劲       
+### data    
+  上传图片其他参数       
+### uploadField    
+  上传图片字段       
+### placeholader    
+  富文本编辑器holder       
+### validHtml    
+  粘贴时，去除不合法的html标签       
+### uploadSuccess    
+  图片上传成功回调       
+### uploadError    
+  图片上传失败回调       
+
+
+# Example
+html:
+```
+<div class="article-content" id="content">
+</div>
+```
+js:
+
+```
+$('#content').artEditor({
+	imgTar: '#imageUpload',
+	limitSize: 5,   // 兆
+	showServer: false,
+	uploadUrl: '',
+	data: {},
+	uploadField: 'image',
+	placeholader: '<p>请输入文章正文内容</p>',
+	validHtml: ["br"],
+	uploadSuccess: function(res) {
+		// return img url
+		return res.path;
+	},
+	uploadError: function(res) {
+		// something error
+		console.log(res);
+	}
+});
+```
+
+# Issues  
+[new Issue](https://github.com/baixuexiyang/artEditor/issues/new)
diff --git a/artEditor.js b/artEditor.js
@@ -0,0 +1,121 @@
+/**
+ * 移动端富文本编辑器
+ * @author ganzw@gmail.com
+ * @url    https://github.com/baixuexiyang/artEditor
+ */
+$.fn.extend({
+	_opt: {
+		placeholader: '<p>请输入文章正文内容</p>',
+		validHtml: [],
+		limitSize: 3,
+		showServer: false
+	},
+	artEditor: function(options) {
+		var _this = this,
+			styles = {
+				"-webkit-user-select": "text",
+				"user-select": "text",
+				"overflow-y": "auto",
+				"text-break": "brak-all",
+				"outline": "none"
+			};
+		$(this).css(styles).attr("contenteditable", true);
+		_this._opt = $.extend(_this._opt, options);
+		try{
+			$(_this._opt.imgTar).on('change', function(e) {
+				var file  = e.target.files[0];
+				if(Math.ceil(file.size/1024/1024) > _this._opt.limitSize) {
+					console.error('文件太大');
+					return;
+				}
+                var reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = function (f) {
+                	if(_this._opt.showServer) {
+                		_this.upload(f.target.result);
+                		return ;
+                	}
+            		var img = '<img src="'+ f.target.result +'" style="width:90%;" />';
+            	    _this.insertImage(img);
+                };
+			});
+			_this.placeholderHandler();
+			_this.pasteHandler();
+		} catch(e) {
+			console.log(e);
+		}
+	},
+	upload: function(data) {
+		var _this = this, filed = _this._opt.uploadField;
+		$.ajax({
+			url: _this._opt.uploadUrl,
+			type: 'post',
+			data: $.extend(_this._opt.data, {filed: data}),
+			cache: false
+		})
+		.then(function(res) {
+			var src = _this._opt.uploadSuccess(res);
+			if(src) {
+				var img = '<img src="'+ src +'" style="width:90%;" />';
+			    _this.insertImage(img);
+			} else {
+				_this._opt.uploadError(res);
+			}
+		});
+	},
+	insertImage: function(src) {
+	    $(this).focus();
+		var selection = window.getSelection ? window.getSelection() : document.selection;
+		var range = selection.createRange ? selection.createRange() : selection.getRangeAt(0);
+		if (!window.getSelection) {
+		    range.pasteHTML(src);
+		    range.collapse(false);
+		    range.select();
+		} else {
+		    range.collapse(false);
+		    var hasR = range.createContextualFragment(src);
+		    var hasLastChild = hasR.lastChild;
+		    while (hasLastChild && hasLastChild.nodeName.toLowerCase() == "br" && hasLastChild.previousSibling && hasLastChild.previousSibling.nodeName.toLowerCase() == "br") {
+		        var e = hasLastChild;
+		        hasLastChild = hasLastChild.previousSibling;
+		        hasR.removeChild(e);
+		    }
+		    range.insertNode(hasR);
+		    if (hasLastChild) {
+		        range.setEndAfter(hasLastChild);
+		        range.setStartAfter(hasLastChild);
+		    }
+		    selection.removeAllRanges();
+		    selection.addRange(range);
+		}
+	},
+	pasteHandler: function() {
+		var _this = this;
+		$(this).on("paste", function() {
+			var content = $(this).html();
+			valiHTML = _this._opt.validHtml;
+			content = content.replace(/_moz_dirty=""/gi, "").replace(/\[/g, "[[-").replace(/\]/g, "-]]").replace(/<\/ ?tr[^>]*>/gi, "[br]").replace(/<\/ ?td[^>]*>/gi, "&nbsp;&nbsp;").replace(/<(ul|dl|ol)[^>]*>/gi, "[br]").replace(/<(li|dd)[^>]*>/gi, "[br]").replace(/<p [^>]*>/gi, "[br]").replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]").replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]").replace(/<[^>]*>/g, "").replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]").replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>");
+			if (!/firefox/.test(navigator.userAgent.toLowerCase())) {
+			    content = content.replace(/\r?\n/gi, "<br>");
+			}
+			$(this).html(content);
+		});
+	},
+	placeholderHandler: function() {
+		var _this = this;
+		$(this).on('focus', function() {
+			if($.trim($(this).html()) === _this._opt.placeholader) {
+				$(this).html('');
+			}
+		})
+		.on('blur', function() {
+			if(!$(this).html()) {
+				$(this).html(_this._opt.placeholader);
+			}
+		});
+
+		if(!$.trim($(this).html())) {
+			$(this).html(_this._opt.placeholader);
+		}
+	}
+});
diff --git a/artEditor.min.js b/artEditor.min.js
diff --git a/example/css/style.css b/example/css/style.css
@@ -0,0 +1,175 @@
+html {
+  font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "宋体", Arial, Verdana, sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+  font-size: 62.5%;
+}
+body {
+  font-size: 1.4rem;
+}
+html,
+body,
+div,
+p {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  vertical-align: baseline;
+  font-weight: normal;
+}
+a {
+  background: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+img {
+  border: 0;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+button {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+input {
+  line-height: normal;
+}
+* {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+body {
+  background: #ededed;
+  color: #666666;
+  line-height: 20px;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+}
+body.white {
+  background: #ffffff;
+}
+html.hairlines div,
+html.hairlines li,
+html.hairlines a,
+html.hairlines i,
+html.hairlines header {
+  border-width: 0.5px !important;
+}
+html .g-image-upload-box .upload-btn {
+  border: 1px dashed #e3e3e3 !important;
+}
+a {
+  color: #3278ee;
+  text-decoration: none;
+}
+input[type="text"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+textarea {
+  border: none;
+  font-size: 1.4rem;
+  height: 20px;
+  line-height: 20px;
+  padding: 5px;
+  color: #333333;
+  font-family: "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", "宋体", Arial, Verdana, sans-serif;
+  outline: none;
+  -webkit-border-radius: none;
+  -moz-border-radius: none;
+  border-radius: none;
+}
+textarea {
+  outline: none;
+  border: none;
+  resize: none;
+  height: 90px;
+  width: 100%;
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  /* Firefox */
+  -webkit-box-sizing: border-box;
+  /* Safari */
+}
+input[type=text]:active,
+input[type=password]:active,
+textarea:active,
+input[type=text]:focus,
+input[type=password]:focus,
+textarea:focus {
+  border: none;
+  background: #ffffff;
+  outline: none;
+}
+::-webkit-input-placeholder {
+  -webkit-text-fill-color: #bdbdbd;
+}
+::-moz-placeholder {
+  color: #dddddd;
+}
+input:-ms-input-placeholder {
+  color: #dddddd;
+}
+textarea:-ms-input-placeholder {
+  color: #dddddd;
+}
+
+.publish-article-title {
+  padding: 15px;
+  background: #fff;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+}
+.title-tips {
+  font-weight: bold;
+  margin-bottom: 3px;
+}
+.publish-article-content {
+  padding: 15px;
+  background: #fff;
+  border: 1px solid #ccc;
+}
+.publish-article-content .article-content {
+  height: 200px;
+  border-bottom: 1px solid #ccc;
+}
+.publish-article-content .footer-btn {
+  text-align: center;
+  padding-top: 10px;
+}
+.publish-article-content .footer-btn .upload-img {
+  display: inline-block;
+  vertical-align: bottom;
+  width: 25px;
+  height: 20px;
+  margin-right: 10px;
+  background: url(../img/img.png) 0 no-repeat;
+  background-size: 100%;
+}
diff --git a/example/img/img.png b/example/img/img.png
diff --git a/example/js/index.js b/example/js/index.js
@@ -0,0 +1,22 @@
+$(function() {
+	"use strict";
+
+	$('#content').artEditor({
+		imgTar: '#imageUpload',
+		limitSize: 5,   // 兆
+		showServer: false,
+		uploadUrl: '',
+		data: {},
+		uploadField: 'image',
+		placeholader: '<p>请输入文章正文内容</p>',
+		validHtml: ["br"],
+		uploadSuccess: function(res) {
+			// return img url
+			return res.path;
+		},
+		uploadError: function(res) {
+			// something error
+			console.log(res);
+		}
+	});
+});