由于手机上打字比较慢，并不适合长篇大论的文章，所以移动端的富文本编辑器很少。artEditor是一款基于jQuery的移动端富文本编辑器，支持插入图片，图片拍照功能，点击图片按钮你可以从手机相册选择图片，也可以通过相机拍照上传。先看下artEditor演示效果：
全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>artEditor</title>
<!-- 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览 -->
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width, minimal-ui">
<!-- iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="http://baixuexiyang.github.io/artEditor/example/css/style.css">
</head>
<body>
<div style="width:320px;margin: 0 auto;">
<div class="publish-article-title">
<div class="title-tips">标题</div>
<input type="text" id="title" class="w100" placeholder="文章标题">
</div>
<div class="publish-article-content">
<div class="title-tips">正文</div>
<div class="article-content" id="content">
</div>
<div class="footer-btn g-image-upload-box">
<div class="upload-button">
<span class="upload"><i class="upload-img"></i>插入图片</span>
<input class="input-file" id="imageUpload" type="file" name="fileInput" capture="camera" accept="image/*" style="position:absolute;left:0;opacity:0;width:100%;">
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://baixuexiyang.github.io/artEditor/artEditor.min.js"></script>
<script>
$(function() {
"use strict";
$('#content').artEditor({
imgTar: '#imageUpload',
limitSize: 5, // 兆
showServer: false,
uploadUrl: '',
data: {},
uploadField: 'image',
placeholader: '<p>请输入文章正文内容</p>',
validHtml: ["br"],
uploadSuccess: function(res) {
return res.path;
},
uploadError: function(res) {
console.log(res);
}
});
});
</script>
</body>
</html>
版权声明：本文为博主原创文章，未经博主允许不得转载。资源在我的qq群里！
： » 移动端富文本编辑器artEditor使用教程
原创文章，作者：254126420，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251136.html