Cleditor Demo_HTML文本编辑器_网页在线文本编辑器例子
2014-08-25 14:03:36  By: shinyuu

• shinyuu
• HTML5开发
• 0
• 7231
• 0

简介

本文主要提供了一个很简单的例子使用 Cleditor jQuery 插件的HTML文本编辑

背景

大家看到我的博客写博文和发技术分享都是通过在线文件编辑来实现的、我使用的是 KindEditor

这个是控件呢是我们国产的、帮助文档是比较完善的、这里就不做过多的介绍了

如果有需有的朋友可以给我留言DD博客留言板（dwtedx的留言板）

今天我要说的是web应用程序常用的另外一个文本编辑器Cleditor

我发现它非常漂亮，使用方便，我这里提供了一个小例子说明它

一我为了方便我自己以后使用

二是帮助一些跟我相同需求的朋友

先给大家看一下整个应用程序的 结构

示例代码

Cleditor 使用是非常简单的、您可以从 Default.htm 文件看到使用方法

以下给大家贴出来的是 js 代码

$(document).ready(function () {
	var options = {
		width: 400,
		height: 200,
		controls: "bold italic underline 
					strikethrough subscript superscript | 
					font size " +
					"style | color highlight 
					removeformat | bullets numbering | 
		outdent " +
				"indent | alignleft center 
				alignright justify | undo redo | " +
				"rule link image unlink | cut 
				copy paste pastetext | print source"
	};

	var editor = $("#editor").cleditor(options)[0];

	$("#btnClear").click(function (e) {
		e.preventDefault();
		editor.focus();
		editor.clear();
	});

	$("#btnAddImage").click(function () {
		editor.execCommand("insertimage",
			"图片地址", null, null);
		editor.focus();
	});

	$("#btnGetHtml").click(function () {
		alert($("#editor").val());
	});
});

下面是 HTML 代码

<div>
	<textarea id="editor" rows="0" cols="0"></textarea>
</div>
<div class="normaldiv" style="float: right">
	<a href="#" class="siteButton" id="btnClear">Clear</a>
	<a href="#" class="siteButton" id="btnAddImage">Add an image</a>
	<a href="#" class="siteButton" id="btnGetHtml">Get html</a>
</div>

好了、一个简单的在线文本编辑器都做好了

下载给大家献上源代码链接: http://dwtedx.com/download.html?bdkey=s/1gdnDclX 密码: qyws

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛