Java基础、中级、高级、架构面试资料

移动端富文本编辑器artEditor使用教程

HTML5 herman 10634浏览 0评论
公告:“业余草”微信公众号提供免费CSDN下载服务(只下Java资源),关注业余草微信公众号,添加作者微信:xttblog2,发送下载链接帮助你免费下载!
本博客日IP超过2000,PV 3000 左右,急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包,请加博主新的微信号:xttblog2,之前的微信号好友位已满,备注:返现
受密码保护的文章请关注“业余草”公众号,回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽,请关注文末小程序
视频教程免费领
腾讯云】1核2G5M轻量应用服务器50元首年,高性价比,助您轻松上云

由于手机上打字比较慢,并不适合长篇大论的文章,所以移动端的富文本编辑器很少。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群里!

业余草公众号

最后,欢迎关注我的个人微信公众号:业余草(yyucao)!可加作者微信号:xttblog2。备注:“1”,添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注!后续有精彩内容会第一时间发给您!原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系!

本文原文出处:业余草: » 移动端富文本编辑器artEditor使用教程