整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

不得不佩服，美观小巧的网页内容编辑器-ContentTools

绍

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提供了一个编辑器，但是在初始化它之前，我们需要配置一些东西，即：

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

将以下代码添加到我们之前创建的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！

页设计是把颜色、图片和字体等等要素进行组合调整，达到网页页面美化的目的，在给用户带来完美的视觉体验的同时，也为用户提供更好的使用体验。因此，网页设计需要考虑的设计因素有很多，绝不仅仅只是为了美观。本文千锋武汉Web前端培训小编将推荐十款好用的HTML生成工具，帮助大家更高效率的完成网页设计。

1、Bootstrap Studio

这是一款桌面应用程序，旨在帮助web开发人员和设计人员创建一个相应迅速的网页。一般是用Bootstrap Studio来架构、设计页面效果图和最初的修饰，然后几乎不用导出功能，而是直接在单元上右键，复制html。可以说Bootstrap Studio是在Chrome浏览器代码和 Node.js 基础之上重组和整理出的一套很规范的基于Bootstrap框架的网页前端设计工具。

2、Template Stash

这款软件几乎集合了所有类型网页的模板，你可以通过关键词检索来找到你想要的主题风格。可以说Template Stash 是一个提供高品质，完全免费的响应式网页模板，帮助设计师们找到完美的响应式网站主题或模版，根据网站分类来提高不同的模版样式，所有的模版都是来源于Kickstart项目。

3、Carrd

这款软件是免费的，可以帮助初学者制作一个简单、响应快捷的网页，只要几个简单步骤就能快速设计出美观特色的响应式网站。

4、Bubble

Bubble的优势在于使用者不用掌握任何编程技巧就可以制作网页，它独特的拖拉界面可以让使用者在网页上添加视频、地图、音频等等功能。

5、Tilda Publishing

这款软件可以帮助使用者制作一个内容导向型的网页，这款软件非常适合那些喜欢设计博客页面的人。Tilda Publishing的最大优势在于可以会将不同内容形态切割成blocks，如果把网站想象成堆积木，内容就好比一块块不同花色的积木，利用拖拽方式进行排列组合，网站设计更加独特，操作上也更加简单。

6、XPRS

如果你曾经因为设计网页太过复杂和繁琐而感到沮丧，那么这款软件无疑是你的福音。这款软件会提供一个非常简单的编辑环境，让网页设计变得非常简单，因此对于新手小白来讲吗，是一款十分好用的HTML生成工具。

7、Hype 3.0

这款软件可以帮助你让网页的内容“动”起来，使用者可以设计每一帧动画并且进行排序，也可以手动添加或者删除动画效果，如果你想让自己的网页更加生动，那么这款软件绝对是你的首选。这是一款强大的Mac OS平台HTML5创作工具，它可以在网页上做出赏心悦目的动画效果，无需 Flash 插件。更重要的是这款强的html5开发工具竟然还有中文版！现在你几乎不需要任何的编码知识，只需要简单的拖拽就可以制作出好玩的动画，基于时间轴的制作方式非常的方便，最新的3.0版本具有全新的 UI和24 种全新的定时功能等新功能，非常强大！

8、OnePager

Onepager 是一个提供使用者建置小型网站网站的网络服务，透过视觉化的操作介面，无须下载、安装任何软体，也不用苦苦寻找虚拟主机，只要申请帐户，就能够快速建立自己公司的网站。作为一款好用的HTML生成工具，它可以帮助使用者快速编辑所有类型的网页。使用者可以轻松建立一个响应迅速的网站，这款软件内置的预设系统使得网页的一切都是可定制的，使用者甚至可以自己设计网页的主题风格。总之，Onepaper 让制作网页变得非常简单。内建多种佈景主题可以切换、使用，你甚至不用具备网页设计的知识，直接透过线上工具就能变更设计。

9、Grav

Grav是一个简单可扩展的CMS平台。因为是纯文件系统，所以它无需安装，并且它有着完善的后台界面和完整的官方文档。又因为可扩展型号，可以通过有插件控制几乎每个环节。不过这也是一款较为复杂的HTML生成工具，需要使用者掌握一些编程的技巧。

10、HTML to WordPress

这个软件可以将静态的HTML网站转换成WordPress，如果你想转换你的网站格式，这款软件将帮助你节省大量的时间，因此推荐大家使用。

以上就是千锋武汉Web前端培训小编推荐的十款好用的HTML生成工具，大家都用过了吗？如果你现在还在寻找一款HTML生成工具，不妨试试以上的推荐工具，相信总有一款适合你。关注“武汉千锋”微信公众号，会定期为大家分享最新Web前端发展趋势、学习资料，助力大家学好Web前端。

普及一下基本知识：什么叫在线HTML编辑器？

说得简单点，在线HTML编辑器就是在网上发帖子、写博客的那个带编辑功能的框框，可以进行图文排版等操作。

当年本菜鸟做网站的时候，曾经自己用javascript编写过一个比较简单的在线HTML编辑器，用于文本内容的排版。但是因为水平有限，很多功能都无法实现。后来有了eWebEditor，功能确实强大，但这个编辑器是个收费的软件，并且正因为功能强大，也就显得过重，一些轻量的场合不是太适用。那有没有既免费、又功能强大、还能适应轻量场合的在线HTML编辑器呢？

答案肯定是有的。这首先要感谢这些年来有一批奉献精神的程序猿们不断推进共享软件的开发，让我们得以享受他们的成果。

一、百度出品的UEditor

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。特别要说的是，头条号后台发布文章的编辑器就是用的UEditor!

百度UEditor

UEditor还有一个轻量版的，叫做UMeditor，简称UM。UM是为满足广大门户网站对于简单发帖框，或者回复框需求所定制的在线HTML编辑器。 主要特点是容量和加载速度上的改变，主文件的代码量为139k，而且放弃了使用传统的iframe模式，采用了div的加载方式， 以达到更快的加载速度和零加载失败率。UM的第一个使用者是百度贴吧，以经受贴吧每天几亿的pv的考验，功能设计应当是最优化的了。 当然随着代码的减少，UM的功能对于UE来说还是有所减少，但也有增加，比如拖拽图片上传，chrome的图片拖动改变大小等。

百度UEditor界面

二、xhEditor开源HTML编辑器

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化HTML编辑器，基于网络访问并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript开发，可以应用在任何的服务端语言环境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、论坛、商城等互联网平台上完美的嵌入运行，能够非常灵活简单的和您的系统实现完美的无缝衔接。

主要特点：

  • 精简迷你：初始加载4个文件，包括：1个js(50k)+2个css(10k)+1个图片(5k)，总共65k。若js和css文件进行gzip压缩传输，可以进一步缩减为24k左右。

  • 使用简单：简单的调用方式，加一个class属性就能将textarea变成一个功能丰富的可视化编辑器。

  • 无障碍访问：提供WAI-ARIA全面支持，全键盘精细操作，全程语音向导，提供完美无障碍访问体验，充分满足残疾人的上网需求。

  • 内置Ajax上传：内置强大的Ajax上传，包括HTML4和HTML5上传支持(多文件上传、真实上传进度及文件拖放上传)，剪切板上传及远程抓取上传。

  • Word自动清理：实现Word代码自动检测并清理，生成代码最优化精简，却不丢失细节效果。

  • UBB可视化编辑：支持UBB可视化编辑，在获得安全高效代码存储的同时，又能享受可视化编辑的便捷。

三、KindEditor开源HTML编辑器

KindEditor 也是一个开源的在线HTML编辑器， 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。本菜鸟感觉这个编辑器上手比较容易，功能也很强大，界面比较友好，很适合菜鸟使用。可惜的是最近好像停止更新了，官网好象也能不正常访问。

KindEditor界面

主要特点：

  • 快速：体积小，加载速度快

  • 开源：开放源代码，高水平，高品质

  • 底层：内置自定义 DOM 类库，精确操作 DOM

  • 扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能

  • 风格：修改编辑器风格非常容易，只需修改一个 CSS 文件

  • 兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera

四、阿里的KISSY

严格来说，KISSY不仅仅是一个在线HTML编辑器，而是由阿里集团前端工程师们发起创建的一个开源 JS 框架，具有跨终端、模块化、使用简单的特点。里面带有HTML编辑器这个模块。

阿里的KISSY

正因为KISSY采取模块化设计，因此具有高扩展性、组件齐全，接口一致、自主开发、适合多种应用场景等优点。KISSY 除了完备的工具集合诸如 DOM、Event、Ajax、Anim 等，KISSY 还面向团队协作做了独特设计，提供了经典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的 JavaScript 框架，KISSY还 为移动终端做了大量适配和优化，搞移动web开发的可以好好研究一下KISSY的运用。

关于菜鸟手记：

菜鸟最怕就是看大神的攻略，全是术语看头就头大！本人作为一名对啥都感兴趣的资深菜鸟，潜心研究各类技术二十余年，做网站、写程序、搞美工、练书法、学画画、作文章、抓管理、装逼格，属于搞IT里面最懂美工的，搞HR里面最懂画画的，搞文字里面最懂程序的，最终一事无成，博而不精，徒留一堆手记。从菜鸟角度写手记，同样的”白”更易懂，你值得拥有！感兴趣的，请别忘点右角关注菜鸟手记。


在线咨询
上一篇：如何处理html中内联元素之间水平空隙？
下一篇：safari浏览器怎么清除历史记录

您的项目需求

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

推荐阅读
友情链接 陆河县 彭州市 日土县 托克逊县 巴林左旗 南岳区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服