Cleditor Demo_HTML文本编辑器_网页在线文本编辑器例子

简介

本文主要提供了一个很简单的例子使用 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