不得不佩服，美观小巧的网页内容编辑器——ContentTools
gaoyangw 2024-11-09 12:18 22 浏览 0 评论
介绍
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！
相关推荐
- 限时免费推广，就在今日闵行APP，看看你是我们等的人么?
-
为助力汽车行业复工复产，今日闵行APP特开设“车圈复工”栏目，自即日起，凡是闵行区行政区域内的汽车行业商户，可获得一次免费线上推广机会，具体操作方式如下：参与方式1.下载今日闵行APP。2.注册账户并...
- 免费推广还送礼物?!贵阳一母婴店老板疑中新型骗术
-
贵阳的蹇女士经营着一家母婴用品店，上个月初一家来自黑龙江的传媒公司找到蹇女士合作，声称不用蹇女士花一分钱，免费帮她宣传推广母婴店，真有这么好的事情吗？蹇女士告诉记者，对方提供的推广方式，是以她的母婴店...
- 网络实名制认证，对于免费网络推广有哪些要求?
-
网络实名制大都表现在网络店铺、互动类SNS平台、收款类平台、商务站点平台、门户类论坛等，只要人气旺的领域都慢慢需要实名认证或要求绑定个人联系方式。在前两年互联网运营人员提到要求网络实名制，这个提议也遭...
- 拼多多不花钱推广能做起来吗?全站推广适合长期开吗?
-
对于许多刚刚进入拼多多的商家来说，推广是一个非常重要的问题。然而，很多商家可能面临的困境是：是否可以在拼多多不花钱推广，从而做起来呢？本文将围绕这个问题进行深入探讨，为商家提供一些有效的推广方法和建议...
- 小心!免费推广不“免费”
-
年底将至各个商家为了提高曝光量使出浑身解数这就让不法分子发现了“商机”于是……...
- 免费推广营销的技巧，你学会了吗?
-
新手们刚开始接触淘宝网，相信没有足够的资金或者是不敢投入太多的资金进去，加上没有网点运营经验。因此不敢花大价钱去做一些付费的网点推广。所以小默就给大家总结了一些网店免费推广营销的技巧，提供给大家学习。...
- 新手应该学习了解的免费网络推广方法
-
这段时间以来，木偶有点忙碌，今天为大家分享一些免费的网络推广方法。尤其是针对新手来说，没有做过网络推广的人，给大家讲解下木偶个人的见解。现在互联网推广的难度是越来越大了，最重要的一个原因是效果好的...
- 邮件营销:18种免费的电子邮件营销工具
-
很多人会觉得，给客户发营销邮件没什么意义。他们会说这又贵又费时，而且不一定有回报，我不同意。邮件营销可以通过发送针对性的信息来接触客户，它功能齐全并且价格低廉。这个指南会阐述邮件营销对网店有什么用处...
- 都爱学-一个全国教育培训免费招生推广的网站
-
都爱学简介都爱学是全国教育机构培训机构发布平台，汇聚全国培训机构，培训学校、培训课程等相关信息，为全国培训学校、培训机构提供招生信息发布，为学员打造低价团课秒杀，找课程、找学校、培训机构便利服务。全国...
- 借“免费网课”向学生推广网游?这些平台回应了
-
在过去的这个假期里，上网课是学生们学习的主要方式，但也出现了不少未成年人在网课期间沉迷网游，甚至是高额网络消费的情况。记者调查发现，虎牙、斗鱼等网络平台利用免费提供的上网课渠道，向未成年人推广网络游戏...
- 扒一扒当前最靠谱实用的免费网络推广套路
-
企迪作为为北京地区的权威网站建设公司，也是互联网品牌营销推广的佼佼者，针对免费的网络推广套路那是再收悉不过了。从最简单的开始做起、从最有效率的开始做起、从最不需要花钱的开始做起；下面北京网站建设公司-...
- 借免费网课推广游戏 虎牙斗鱼等直播平台被点名
-
北京商报讯（记者郑蕊实习记者耿文婧）6月8日，央视新闻频道在报道中点名批评虎牙、斗鱼等直播平台，因为后者在免费网课渠道中推广网络游戏。此前2月，为响应教育部“停课不停学”的号召，斗鱼、虎牙等直...
- 借“免费网课”向学生推广网游?!这些平台回应了
-
在过去的这个假期里，上网课是学生们学习的主要方式，但也出现了不少未成年人在网课期间沉迷网游，甚至是高额网络消费的情况。记者调查发现，虎牙、斗鱼等网络平台利用免费提供的上网课渠道，向未成年人推广网络游戏...
- 要想提升宝贝排名，必须做好淘宝SEO
-
相信在网上开店的朋友们对淘宝SEO都不陌生。淘宝SEO对店铺流量的影响是不言而喻的，宝贝的排名能直接决定店铺的流量大小。所以要想提升宝贝排名，淘宝SEO一定好优化好。今天，星密码小默就教各位卖家们淘宝...
- 淘宝SEO应用技巧 让你日访问量大增
-
淘宝搜索引擎优化是指通过研究淘宝排名规则，把自己的产品优化成符合排名规则的产品，从而获取较好的排名。接下来衣联网小编通过研究淘宝最新排名规则，总结出影响淘宝搜索排名的因素，从而提出淘宝搜索引擎优...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 网站建设 (107)
- 网站开发 (47)
- 网络推广哪个平台好 (47)
- 百度收录 (50)
- 搜索引擎排名优化 (49)
- 关键词优化工具 (51)
- 外贸网站建设 (56)
- seo整站优化吧 (50)
- 广州seo (47)
- 苏州网站建设 (59)
- 百度搜索推广 (61)
- 关键词优化公司 (51)
- 网页制作 (47)
- 广州网站建设 (48)
- 电商网站建设 (49)
- 百度站长平台 (48)
- 网站模板 (51)
- 厦门网站建设 (52)
- 百度快照推广 (51)
- 免费网页在线客服系统 (53)
- 雷神代刷网站推广 (53)
- 手机网站建设 (53)
- 网站维护 (53)
- 网页制作教程 (66)
- 百度收录批量查询工具 (48)