将html文件导入<;text区域>;格式化为带有缩进和颜色的HTML


Import an html file to a <textarea> formatted as HTML with indent and color?

我的目标是将HTML文件中的任何内容导入/打开到用户在网页上可见并格式化为HTML的<textarea>中。

我有以下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title><!-- Insert your title here --></title>
</head>
<body>
<!-- start import -->
<textarea>
<html>
<head>
    <title><!-- Insert your title here --></title>
</head>
<body>
imported HTML code, imported HTML code, imported HTML code, imported HTML code, imported HTML code, imported HTML code, imported HTML code, imported HTML code, imported HTML code, 
</body>
</html>
</textarea>
<!-- End import -->
</body>
</html>

如何将HTML文件导入/上载到<textarea>

我如何在<textarea>中用颜色格式化代码,像Notepad++、Komodo等格式代码一样缩进。

我认为

http://codemirror.net/

http://ace.ajax.org/#nav=about

http://www.cdolivet.com/editarea/editarea/exemples/exemple_full.html

更适用于OP。

要将文件导入文本区域,您可以:

  • 使用PHP(或其他(脚本将上传文件的内容回显到文本区域
  • 使用HTML5FileApi(请参阅此处(

您还必须在文本区域内"编码html实体",否则它们将显示为html元素,而不是源代码。

要启用代码的语法高亮显示,请参阅CodeMirror或在web上搜索"HTML语法高亮显示">

正如Lucas所说,我很确定在textarea元素中不能将HTML显示为HTML(例如,<b>hello</b显示粗体(。你将需要某种第三方编辑(见此(。要在PHP中包含文件,请使用$content = file_get_contents("path_to_the_file");,然后在希望文件内容出现的任何位置执行echo($content);。如果你有一个动态系统,人们可以上传自己的文件,或者你想在不生成无效HTML的情况下显示<>符号,你可能也会想在XSS攻击中考虑这一点。

不能突出显示TEXTAREA中的代码。到目前为止,TextArea元素只接受纯文本。

诀窍是创建一个DIV,突出显示DIV中的文本,并将DIV放置在TEXTAREA标记上方。这可以通过使用TinyMCE或FCKEditor或任何类似的所见即所得编辑器来完成。

至于将代码导入页面,您将需要一种编程语言(如PHP(来打开文件并获取其内容。不过,请确保只导入body标记之间的内容。

您知道所见即所得编辑器吗?

我使用http://www.tinymce.com/

在谷歌上,你可以找到更多,也可以创建自己的jQuery和其他。