Code Project 文章编写助手

• 下载源文件 - 3 Kb

<!-- 文章图片 -->

<!-- 在这里添加你的 HTML 代码 -->

引言

<blink>这里有一个工具，你可能会在离线编写 Code Project[^] 文章时觉得有用。它应该可以减少你的 HTML 格式化时间，并且可以在同一页面上提供预览。据我所知，它只在 Internet Explorer 中有效。

如何使用它

textarea 左侧的按钮模仿了 CP 论坛页面上的 HTML 插入功能。我添加了 p (<p></p>), br (<br>), space ( ), sup (<sup></sup>), sub (<sub></sub>), H2 (<H2></H2>) 和 img (<img src=...>)，因为文章可能需要它们。

当然，textarea 是你输入文章的地方。

textarea 下方的按钮用于对 textarea 进行常规编辑，除了预览按钮。预览将向你显示页面在 <div> 中显示的大致外观，位于按钮下方。

这里有一些用于预览的代码

function ShowPreview()
{
    // replace div innerHTML content
    previewarea.innerHTML = '<table border=1 width=100 
        height=100% cellpadding=0 cellspacing=0><tr>
        <td valign=top align=left>' + Form1.inputarea.value 
        + '</td></tr></table>';
}
...
<button onclick="ShowPreview()" type="button">Preview</button>
...
<div name="previewarea" id="previewarea" style="WIDTH: 100%;
    HEIGHT: 300px; BACKGROUND-COLOR: #ffffff"></div>

结论

这篇文章是在文章助手中使用创建的，所以正如你所见，它似乎工作正常。希望你觉得它有帮助。

大部分 JavaScript 代码都是毫不羞愧地从 Code Project 的“回复消息”页面偷来的。希望 Chris 不介意……

修订历史

版本 1.1

• 在 textarea 的 OnKeyUp 事件发生时以及所有相关按钮的 OnClick 事件发生后更新预览区域。（感谢 Zek3vil 的建议！)

版本 1.2

• 添加了 ol、ul 和 li 按钮，用于创建目录。
• 添加了打开 HTML 文件和将助手文本保存到 HTML 文件的按钮。

版本 1.3

• 符合 XHTML 标准的标签。（由 Thomas Freudenberg 建议）
• 添加了一个 quot 按钮，用于输入引号。（" "）
• 添加了一个 table 按钮，以及用于创建 HTML 表格的行和列输入区域。
• 添加了一个下拉列表，其中包含不太常用的标签，包括
  blockquote, center, cite, div, dl, dt, dd, em, H1, H3, H4, H5, H6, hr, iframe, hr, marquee, tt
  选择一个标签并单击 use 按钮将其粘贴到页面中。