网页模板——基于jQueryBootstrap3的文本编辑器特效源码.zip资源-CSDN文库

共129个文件

js：85个

json：10个

hbs：8个

版权申诉

168 浏览量 2021-11-24 00:37:51 上传评论收藏 953KB ZIP 举报

该压缩包文件“网页模板——基于jQuery Bootstrap3的文本编辑器特效源码.zip”提供了一个网页模板，这个模板特别设计用于实现基于jQuery和Bootstrap3的文本编辑器特效。jQuery是JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。Bootstrap3则是Twitter开发的一个流行的开源前端框架，它提供了易于使用的CSS和JavaScript组件，帮助开发者快速构建响应式和移动优先的网站。在Bootstrap3中，文本编辑器特效通常指的是利用框架的样式和JavaScript插件来增强文本输入框或富文本编辑器的用户体验。这些特效可能包括但不限于以下几点： 1. **响应式设计**：Bootstrap3的核心特性之一就是响应式布局，这意味着文本编辑器会根据用户的设备屏幕大小自动调整其尺寸和样式，确保在各种设备上都能良好显示。 2. **预览功能**：编辑器可能包含了实时预览功能，让用户在编辑过程中即时看到内容的效果，无需频繁地切换到浏览器查看。 3. **格式化工具栏**：jQuery和Bootstrap3可以创建一个包含各种格式化选项（如加粗、斜体、插入链接、插入图片等）的工具栏，方便用户快速应用样式。 4. **Markdown支持**：对于熟悉Markdown语法的用户，编辑器可能支持Markdown语言，让用户可以通过简单的符号来控制文本格式，然后转换为HTML。 5. **插件集成**：jQuery允许开发者集成各种插件，例如CKEditor或TinyMCE，这些富文本编辑器插件能提供更高级的功能，如拼写检查、表格创建、多语言支持等。 6. **自定义样式**：Bootstrap3的样式表（CSS）可以轻松定制，因此开发者可以根据需要调整文本编辑器的颜色、字体和其他视觉元素。 7. **AJAX交互**：利用jQuery的AJAX功能，文本编辑器可以实现异步数据提交，这样用户在编辑内容时无需刷新整个页面，提高了用户体验。 8. **错误提示与验证**：通过jQuery，可以添加表单验证功能，当用户输入不符合要求的数据时，编辑器能立即给出反馈。 9. **可扩展性**：Bootstrap3和jQuery的组合使得这个文本编辑器模板具有很高的可扩展性，开发者可以根据项目需求添加更多的功能或组件。 10. **兼容性**：由于jQuery和Bootstrap3的广泛使用，它们通常对主流浏览器有良好的支持，包括Chrome、Firefox、Safari、Edge等。通过这个源码，开发者可以学习如何结合jQuery和Bootstrap3创建具有丰富特性的文本编辑器，并应用于自己的Web项目中，提升用户在内容编辑过程中的体验。同时，这也是一个很好的实践案例，可以帮助开发者深入理解这两款工具的用法以及如何将它们应用于实际项目中。

展开

资源推荐

资源详情

资源评论

收起资源包目录

网页模板——基于jQuery Bootstrap3的文本编辑器特效源码.zip （129个子文件）

bootstrap.css 144KB

bootstrap.min.css 120KB

bootstrap-theme.css 26KB

bootstrap-theme.min.css 23KB

default.css 6KB

bootstrap3-wysihtml5.css 2KB

bootstrap3-wysihtml5.min.css 2KB

glyphicons-halflings-regular.eot 20KB

icomoon.eot 2KB

color.hbs 3KB

link.hbs 1KB

lists.hbs 1KB

font-styles.hbs 1KB

image.hbs 1KB

emphasis.hbs 849B

blockquote.hbs 404B

html.hbs 392B

index.html 2KB

generate.html 295B

generate_advanced_unwrap.html 289B

generate_advanced.html 282B

generate_simple.html 280B

2.jpg 28KB

1.jpg 28KB

bootstrap3-wysihtml5.all.js 563KB

bootstrap3-wysihtml5.all.js 554KB

wysihtml5.js 500KB

bootstrap3-wysihtml5.all.min.js 206KB

bootstrap3-wysihtml5.all.min.js 204KB

wysihtml5x-toolbar.min.js 168KB

jquery-2.1.1.min.js 82KB

bootstrap.js 67KB

bootstrap.min.js 36KB

templates.js 35KB

bootstrap3-wysihtml5.min.js 25KB

handlebars.runtime.amd.js 16KB

bootstrap3-wysihtml5.js 10KB

handlebars.runtime.min.js 7KB

print_parser_rules.js 2KB

bootstrap-wysihtml5.ru-RU.js 2KB

bootstrap-wysihtml5.bg-BG.js 2KB

bootstrap-wysihtml5.ua-UA.js 2KB

bootstrap-wysihtml5.ru-RU.js 2KB

bootstrap-wysihtml5.ar-AR.js 2KB

bootstrap-wysihtml5.il-HE.js 2KB

bootstrap-wysihtml5.pl-PL.js 2KB

bootstrap-wysihtml5.el-GR.js 2KB

bootstrap-wysihtml5.es-ES.js 2KB

bootstrap-wysihtml5.es-AR.js 2KB

bootstrap-wysihtml5.cs-CZ.js 2KB

bootstrap-wysihtml5.tr-TR.js 2KB

bootstrap-wysihtml5.pt-BR.js 2KB

bootstrap-wysihtml5.zh-TW.js 2KB

bootstrap-wysihtml5.ca-CT.js 2KB

bootstrap-wysihtml5.lt-LT.js 2KB

bootstrap-wysihtml5.zh-CN.js 2KB

bootstrap-wysihtml5.sk-SK.js 2KB

bootstrap-wysihtml5.hr-HR.js 2KB

bootstrap-wysihtml5.da-DK.js 1KB

bootstrap-wysihtml5.ja-JP.js 1KB

bootstrap-wysihtml5.ko-KR.js 1KB

bootstrap-wysihtml5.nl-NL.js 1KB

bootstrap-wysihtml5.nb-NB.js 1KB

bootstrap-wysihtml5.tr-TR.js 1KB

bootstrap-wysihtml5.nb-NB.js 1KB

bootstrap-wysihtml5.sv-SE.js 1KB

bootstrap-wysihtml5.it-IT.js 1KB

bootstrap-wysihtml5.hu-HU.js 1KB

bootstrap-wysihtml5.de-DE.js 1KB

bootstrap-wysihtml5.mo-MD.js 1KB

bootstrap-wysihtml5.eo-EO.js 1KB

共 129 条

      <!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于Bootstrap3所见即所得的jQuery文本编辑器插件</title>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap.min.css"></link>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap-theme.min.css"></link>
	<link rel="stylesheet" type="text/css" href="dist/bootstrap3-wysihtml5.min.css"></link>
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<style type="text/css" media="screen">
	  .btn.jumbo {
	    font-size: 20px;
	    font-weight: normal;
	    padding: 14px 24px;
	    margin-right: 10px;
	    -webkit-border-radius: 6px;
	    -moz-border-radius: 6px;
	    border-radius: 6px;
	  }
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<article class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>基于Bootstrap3所见即所得的jQuery文本编辑器插件 <span>A Simple, beautiful wysiwyg editor</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="container">
		  <div class="jumbotron" style="margin-top:40px">
		    <h1 style="font-size:58px">bootstrap-wysihtml5 <br/><small>Simple, beautiful wysiwyg editors</small></h1>
		    <hr style="border-color: white"/>
		    <textarea class="textarea" placeholder="Enter text ..." style="width: 100%; height: 200px; font-size: 14px; line-height: 18px;"></textarea>
		  </div>

		</div>

	</article>
	
	<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
	<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
	<script src="dist/bootstrap3-wysihtml5.all.min.js"></script>
	<script type="text/javascript" src="dist/locales/bootstrap-wysihtml5.zh-CN.js"></script>
	<script>
	  $('.textarea').wysihtml5({locale: "zh-CN"});
	</script>
</body>
</html>