通过简单Html代码实现实时Web编辑器

多人可能都用过Web编辑器，比如Ckedit等，除了Word等本地编辑器外Web编辑器也是最常用最方便Web内容来源。这些在线编辑器的一个短板限制很多，不能实时反馈在线效果。本文虫虫给大家介绍一种很简单的无限制在线Html编辑器，实现所写即所得UI和样式实时刷新，JS代码也能进行热加载执行重新渲染，而且这些实现都非常简单，只用到了很少的html和css代码。

Html内容可编辑—contenteditable

要使Html可以编辑实际上很简单只要一个body标签就足矣。contenteditable这个body属性可能鲜为人知，实际上它的功能就是实现Html文档可编辑。我们新建一个Html文档（Cc.html），然后将如下代码复制粘贴到文档中：

通过浏览器打开这个文档，怎么样，神奇的事情发生了把？

你可以在这个页面任意输入文本甚至还可以粘贴图片。（兼容基本上所有的浏览器，IE也可以）。还可以支持Ctr+Z撤销和重做。

<style>…</style>样式实时变化

我们知道<div>…</div>和<p>…</p>标签内的文字都会在页面显示，而<script>…</script>和<style>…</style>中的都是引用的前端脚本的代码（JS）等需要通过浏览器引擎执行渲染显示出来的，那么这些代码是不是可以在显示出来呢？实际上在大多数浏览器只是通过CSS样式隐藏起来的，我们通过重写在div>…</div>中增加script, style { display: block; }即可：

<body>

<style>

script, style { display: block; }

</style>

console.log("Hello Chongchong!");

</script>

</body>

通过将其粘贴到html文件并在浏览器中打开它，显示如下：

而且，我们也可以将这个页面也设置为contenteditable，并且<style></ style>增加样式显示，比如我们修改字体的大小为20pt，颜色为绿色：

<style>

script, style { display: block;font-size: 20pt;color: green}

</style>

console.log("Hello ChongChong!");

</script>

</body>

现在我们可以，通过在线编辑style{}的内容，让页面的呈现实时变化，比如字体再增加10pt，颜色变成蓝色。

注意，输入时候内容会实时变化的，比如你修改20pt为30pt途中，你字体会变成2，很小很小，继续删除2就会恢复成默认正常默认，你不用理会继续输入30字体就会变成30pt，其他参数也类似。

该方法可以实时刷新样式显示<style></ style>标签，对于JS代码，由于其只会在页面加载时候执行一次，你可以修改<script>…</script>内容，但是不能实时执行生效。

JS代码热加载

上面我也说，JS代码的修改需要重新加载才能执行。为了实现重新加载，我们首先使用简单的按键（Shift+enter）触发重新加载的方法：

<style>

script, style { display: block;font-size: 20pt; color: green}

</style>

//alert("Hello ChongChong!");

document.onkeydown=function(e) {

var key=window.event ? event : e;

if (key.shiftKey && key.keyCode==13) {

eval(window.getSelection().focusNode.parentNode.innerHTML);

}

};

</script>

</body>

通过浏览器打开，并且编辑去掉//alert("Hello ChongChong!")前面的//注释,然后按键shift时按Enter键。

结果如上图就可以弹出一个消息窗口。

基础模版和完善

通过上面的方法我们实现了一个可编辑上面在线编辑器。在前面代码的基础上，我们提供一个基础的模版供大家使用，完整代码如下：

<title>editor</title>

<style>script,

style {

display: block;

white-space: pre-wrap;

background-color: #eeeeee;

border: solid;

border-radius: 10px;

padding: 20px;

}

body {

font-family: Menlo, Monaco, monospace;

font-size: 12pt;

tab-size: 4;

}

script.success {

background-color: #ccffcc;

border: solid, #00cc00;

}

script.error {

background-color: #ffcccc;

border: solid, #ff1111;

}

</style>

//alert("Hello Chongchong!");

document.onkeydown=function(e) {

var key=window.event ? event : e;

var node=window.getSelection().focusNode;

if (key.shiftKey) {

if (key.keyCode==13) {

node.parentNode.classList.remove("error");

node.parentNode.classList.remove("success");

try {

eval(node.parentNode.innerHTML);

node.parentNode.classList.add("success");

} catch (e) {

node.parentNode.classList.add("error");

}

return false;

}

} else {

if (key.keyCode==13) {

document.execCommand("insertHTML", false, "\n");

return false;

}

if (key.keyCode==9) {

document.execCommand("insertHTML", false, "\t");

return false;

}

</script>

</body>

将上面代码保存为html，然后用浏览器打开就实现了一个简单的在线html编辑器。

完善功能

该在线编辑器模版还非常简陋，如果能增加语法高亮和自动完成等一些功能可能很好，但是这是很大工作量，有兴趣的可以尝试着做下。也可以通过引入一些第三方的库来做下，比如使用微软的language-server-protocol 库来实现自动完成功能。

至于语法高亮，一般做法是将所有内容填充到标签中并对其进行着色（大多数其他基于html的编辑器都这样做），但是这样会破坏自动刷新和热加载功能的简单性。

完善内容

你可能还希望处理实际内容，而不仅仅是编辑本身。这个简单，只需在contenteditable body中添加另一个元素，该操作可以通过JS脚本实现该操作。还可以添加更多元素，例如一个按钮或者只是通过修改快速HTML框来实现。这些都可以在提供的模版的基础上按需增加修改。

总结

本文我们在contenteditable属性的基础上实现了，在线Html的编辑器实现内容和样式的实时更新、实现了JS代码的热加载。虽然此在线编辑器还非常简陋，但是以此作为一个想法和基础"抛砖引玉"，希望大家可以实现一个功能完善，更加实用的在线编辑器。

天给大家推荐几个可以在线编程的网站。对于大部分开发者可能会不屑使用在线的网站，认为在自己电脑安装环境不是很简单的事情么。但是你很有可能临时需要一台电脑去测试一段简单的代码，也有可能想要分享一段代码给别人，也有可能你想要学习很多语言，又不想一一安装编程环境。那么今天推荐的网站肯定能满足你的需求。

idenone.com

网址：https://ideone.com/SExhrM

这个网站不错，支持Java，但是页面有广告。除了支持Java语言，还支持其他语言。

dabblet

https://dabblet.com/

这个网站适合前端测试使用，该网站可以用来测试Html，Css，Js等功能。

Fenby

网址：http://www.fenby.com/

这个网站不只支持后端语言编码，也支持前端编码，使用体验很不错。支持的语言也很丰富。

前端的支持也很OK。

W3School

https://www.w3school.com.cn/tiy/t.asp?f=js_use

当然对于想系统学习前端知识的童鞋可以使用W3School，这个网站很适合，不仅有大量的案列，还有可以实战编码。

在线编程

https://www.bccn.net/run/

该网站支持的语言也挺多，比较推荐。

今天的介绍就到这里了，如果你打算系统学习编程，那我还是建议你老老实实的安装编译环境，安装编辑器。

绍

ContentTools是一个美观小巧的网页内容工具（一个JS库），具备所见即所得（WYSIWYG）的编辑器功能，只需几个简单的步骤，即可将ContentTools添加到任何HTML页面。如下图所示页面通过实时ContentTool的弹出层实现实时编辑功能。用小而美来形容它最好不过了！

Github地址

https://github.com/GetmeUK

特性

ContentTools是用于HTML页面的美观小巧的内容编辑器。它被设计为：

与框架无关的库不使用任何JavaScript框架（没有JQuery），但可以很好地使用它们。
灵活的ContentTools软件包由5个库组成，每个库或可以独立使用。
可扩展的软件包旨在易于扩展。
小巧完整的编辑器（JS，CSS，图像和图标字体）为241kb（压缩后为49kb）。

功能简介

ContentTools具有字体加粗、斜体、超链接、对齐、列表、表格、图片、视频、代码、撤销、重做、删除等功能

1、加粗显示

2、斜体显示

3、超链接

4、H标题

5、正文

6、有序和无序列表

7、插入表格

8、插入图片

9、视频

以上截图中的功能还不完整，如果想体验以下完整的功能可以直接去DEMO页面体验，如果需要在HTML级别上更改元素的内容，那也是可以的。通过属性对话框中的最后一个选项卡，可以查看所选元素的内部HTML代码并直接对其进行更新。

使用

第一步是下载JS，CSS和其他关联的项目文件：

下载仓库并打开/ build文件夹，包括预构建的源文件。将文件夹的内容复制到项目的适当位置（例如，content-tools.min.js> /www/scripts/content-tools.min.js）。但是，/ images文件夹和icons.woff字体需要复制到与content-tools.min.css相同的文件夹中，文件结构应类似于：

HTML

<head>
 <title>My page</title>
 <link rel="stylesheet" type="text/css" href="assets/content-tools.min.css">
 ...
</head>
<body>
 ...
 <script src="assets/content-tools.min.js"></script>
 <script src="assets/editor.js"></script>
</body>

包括一个名为editor.js的附加JS文件。包含初始化我们的编辑器的代码，继续

<div data-editable data-name="main-content">
 <blockquote>
 Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.
 </blockquote>
 <p>John F. Woods</p>
</div>

data-name属性用于在保存时标识区域（默认情况下使用id属性），标记可编辑HTML时，常见的误解是将单个元素标记为可编辑，例如：

<h1 data-editable data-name="heading">Content</h1>

正确的使用方式如下，也就是说必须要在特定的容器元素内

<div data-editable data-name=heading>
 <h1>Content</h1>
</div>

准备CSS

ContentTools使用CSS类来对齐文本，图像，视频和iframe，需要在自己的CSS中为这些对齐类定义样式，例如：

[data-editable] iframe,
[data-editable] image,
[data-editable] [data-ce-tag=img],
[data-editable] img,
[data-editable] video {
 clear: both;
 display: block;
 margin-left: auto;
 margin-right: auto;
 max-width: 100%;
}

/* 左对齐 */
[data-editable] .align-left {
 clear: initial;
 float: left;
 margin-right: 0.5em;
}

/* 右对齐 */
[data-editable].align-right {
 clear: initial;
 float: right;
 margin-left: 0.5em;
}

/* 可编辑区域中文本的对齐样式 */
[data-editable] .text-center {
 text-align: center;
}

[data-editable] .text-left {
 text-align: left;
}

[data-editable] .text-right {
 text-align: right;
}

初始化编辑器

ContentTools提供了一个编辑器，但是在初始化它之前，我们需要配置一些东西，即：

我们希望用户能够将CSS样式应用于元素。
我们希望页面的区域是可编辑的。
一种保存我们的内容的机制。
我们可能还会配置图像处理程序等等

将以下代码添加到我们之前创建的editor.js文件中：

window.addEventListener('load', function() {
 var editor;

});

配置样式

就像文字处理程序一样，可以为内容配置一系列预定义样式。当用户从视口底部的检查器栏中选择标签时，这些标签就会出现。尽管可以将样式设置为适用于所有标签，但是仅显示适用于标签类型的样式。

我们将添加可应用于段落<p>标记的单一样式.author。在var编辑器下方声明添加：

ContentTools.StylePalette.add([
 new ContentTools.Style('Author', 'author', ['p'])
]);

StylePalette.add方法使我们可以向编辑器添加样式列表。每种样式均声明为一个Style实例，该实例使用显示名称，CSS类和可以应用该样式的标签列表初始化。我们需要添加相关的CSS来支持这种样式，因此在HTML的开头添加：

<head>
 ...
 <style>
 .author {
 font-style: italic;
 font-weight: bold;
 }
 </style>
</head>

选择可编辑区域

接下来，我们需要初始化编辑器，并让它知道页面上的哪些元素是可编辑的。为此，将以下代码添加到editor.js中：

editor=ContentTools.EditorApp.get();
editor.init('*[data-editable]', 'data-name');

我们使用用于页面可编辑区域的CSS选择器和属性名称（“数据名称”）来初始化编辑器，以告知编辑器元素的哪个属性包含其区域名称。区域名称在同一页面中必须唯一。

保存更改

最后，我们希望在用户保存页面时得到通知，以便我们可以将每个区域的更新内容存储在文件或数据库中。为此，我们监听由编辑器触发的保存事件。在editor.init语句之后，将以下代码添加到editor.js中：

editor.addEventListener('saved', function (ev) {
 var name, payload, regions, xhr;

 // 检查是否已更改
 regions=ev.detail().regions;
 if (Object.keys(regions).length==0) {
 return;
 }

 // 保存更改时将编辑器设置为忙
 this.busy(true);

 // 将每个区域的内容收集到一个FormData实例中
 payload=new FormData();
 for (name in regions) {
 if (regions.hasOwnProperty(name)) {
 payload.append(name, regions[name]);
 }
 }

 // 将更新内容发送到要保存的服务器
 function onStateChange(ev) {
 // 检查请求是否完成
 if (ev.target.readyState==4) {
 editor.busy(false);
 if (ev.target.status=='200') {
 // 保存成功，通知前台
 new ContentTools.FlashUI('保存成功');
 } else {
 // 保存失败，通知前台
 new ContentTools.FlashUI('保存失败');
 }
 }
 };

 xhr=new XMLHttpRequest();
 xhr.addEventListener('readystatechange', onStateChange);
 xhr.open('POST', '/save-my-page');
 xhr.send(payload);
});

当用户保存页面时，我们可以使用AJAX将每个区域的内容发送到服务器进行保存。在浏览器中打开页面，寻找左上方的蓝色编辑按钮，然后单击它以开始编辑。

总结

这样一个美观且强大的即时编辑器可谓是非常的实用，特别是对于一些内容编辑网站，如CMS、静态文档网站、博客等内容型网站尤其有用，希望对你有所帮助，Enjoy it！

在线咨询

上一篇：css隐藏页面元素的多种方法
下一篇：数据驱动营销：14条运用数据的经验法则

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

通过简单Html代码实现实时Web编辑器

Html内容可编辑—contenteditable

<style>…</style>样式实时变化

JS代码热加载

基础模版和完善

完善功能

完善内容

总结

idenone.com

dabblet

Fenby

W3School

在线编程

绍

Github地址

特性

功能简介

使用

总结

您的项目需求