65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Cleditor 的 HTML 富文本编辑器示例

李松博士
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.77/5 (16投票s)

2011年9月20日

CPOL

3分钟阅读

viewsIcon

178434

downloadIcon

9548

这篇文章提供了一个非常简单的例子，展示了如何使用 "Cleditor" jQuery 插件进行 HTML 富文本编辑。

引言

这篇文章提供了一个非常简单的例子，展示了如何使用 "Cleditor" jQuery 插件进行 HTML 富文本编辑。

背景

自从我上次需要支持在线富文本编辑的 Web 应用程序以来已经有一段时间了。最近，我再次拾起这个话题并研究了 "Cleditor"。我发现它非常好用且易于使用。我觉得我需要用一个小的例子来记录它，以防我再次需要使用它。我希望这个小例子也能帮助其他可能希望在他们的 Web 应用程序中支持富文本编辑的人。

SolutionExplorer.jpg

附带的 Web 应用程序是在 Visual Studio 2010 中开发的。

  • 在 "Script" 文件夹中，我添加了 "jQuery" 和 "Cleditor" 的 JavaScript 文件。
  • "Cleditor" 所需的 CSS 样式位于 "Content/cleditor" 文件夹中。
  • "Default.htm" 文件是展示如何使用 "Cleditor" 的地方。

您可以从 这里 下载 "Cleditor" 的 JavaScript 文件和 CSS 样式。

示例代码

"Cleditor" 非常易于使用。您可以在 "Default.htm" 文件中看到这一点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Cleditor Example</title>
    <link href="Content/cleditor/jquery.cleditor.css" rel="stylesheet" type="text/css" />
    <link href="Content/Site.css" rel="stylesheet" type="text/css" />
 
    <script src="Scripts/jquery-1.6.3.js" type="text/javascript"></script>
    <script src="Scripts/jquery.cleditor.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
    $(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",
                "http://images.free-extras.com/pics/s/smile-1620.JPG", null, null);
            editor.focus();
        });
 
        $("#btnGetHtml").click(function () {
            alert($("#editor").val());
        });
 
    });
</script>
</head>
 
<body>
<div style="width: 400px">
    <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>
</div>
</body>
</html>
  • 要使用 "Cleditor"，您需要在您的网页中包含 "jQuery" 和 "Cleditor" 相关的 JavaScript 文件和 CSS 样式。
  • 您需要在您的网页中放置一个 "textarea" HTML 控件。"Cleditor" 将使用它作为占位符来生成富文本编辑器。

在启动富文本编辑器时，您不需要提供任何选项。在本文中，我给出了一些非常简单的选项来配置编辑器，使其符合我的喜好。这三个超链接控件在此示例中用作按钮，以演示如何清除编辑器、如何将图像插入到编辑器中以及如何获取富文本编辑器创建的 HTML 文本。

虽然它很简单，但我们现在拥有了一个功能齐全的富文本编辑器。我们现在可以测试它以查看其工作原理。

运行应用程序

当应用程序启动时，编辑器将显示在浏览器中。

RunAppStart.jpg

然后我们可以输入一些文本，并单击“添加图像”按钮来添加图片。

RunAppEdit.jpg

如果单击“获取 html”按钮，将显示一个消息框以显示富文本编辑器创建的 HTML 文本。

RichText.jpg

关注点

  • 这篇文章提供了一个非常简单的例子，展示了如何使用 "Cleditor" jQuery 插件进行 HTML 富文本编辑。
  • "Cleditor" 不是由我创建的。我只是在这里给出了一个关于如何使用它的例子。谁创造了它，干得好，谢谢！
  • "Cleditor" 具有一些非常全面的配置选项。在此示例中，我只向您展示了 "Cleditor" 的一些非常基本的使用方法。如果您想使用一些高级功能，可以查看该插件的 JavaScript 代码。
  • 我希望您喜欢我的文章，希望本文能以某种方式帮助您。

历史

  • 第一次修订 - 2011年9月20日
© . All rights reserved.