百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

很有用的网页内容编辑器,自己收藏

myzbx 2024-12-01 18:30 40 浏览

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


爱分享Coder

2019-12-03 · 软件开发工程师 优质科技领域创作者

介绍

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!

1.5万阅读

搜索

专门制作文字特效软件

网站制作微信小程序

html5编辑软件排行榜

傻瓜式网页制作软件

网站制作软件免费版

一键网站制作app

相关推荐

防潮密闭门GJB2805B-2021的气密性8级和水密性6级具体是怎么测试

依据GJB2805B-2021及配套试验规范,防潮密闭门在取得“气密8级、水密6级”证书前,必须按下列标准工况和步骤完成测试:一、气密性8级测试(GB/T7106-2019)测试项...

中老铁路第五组“澜沧号”动车组抵达老挝

人民网曼谷6月14日电(记者杨一)万象消息:13日,中老铁路第五组“澜沧号”CR200J型动车组列车顺利抵达老挝,标志着中老铁路运输保障能力迈上新台阶。该动车组外观延续“澜沧号”标志性的老挝国旗红、...

建筑施工承插型盘扣式钢管支架新旧规范对比分析报告

承插型盘扣式钢管支架新旧规范差异对比分析报告前言本文档旨在对比《建筑施工承插型盘扣式钢管支架安全技术规程》(JGJ231-2010)与《建筑施工承插型盘扣式钢管脚手架安全技术标准》(JGJT231...

3 秒就有用!这可能是最高效的运动(不是提肛

各位「收藏夹吃灰」运动员们,无奖竞猜:一次有效的运动最短需要多久?半小时?20分钟?再短也不能短于5分钟吧……?不不不,只需要3秒别怀疑,你没有看错。研究发现,每天进行3秒的力量训练就可以...

一加携《原神》限定礼盒亮相CJ,回顾双方深度联动成果

【ZOL中关村在线原创新闻】今年的ChinaJoy展会上,一加在展台上陈列出与《原神》的系列合作定制机型。作为多年来深度联动的伙伴,一加与《原神》始终以游戏角色为核心,将科技产品与游戏文化巧妙结合,推...

最新歼20S和歼35亮相

近日出现了大量隐身战机彩排的最新新图片。除了看到了采用更深的黑色涂装的歼20S双座版本之外,还出现了歼35舰载型和354A陆基隐形战斗机。歼20S此时出现,似乎也标志着即将或者已经入列服役了呢?不过在...

2天就猝死!医生提示:冠心病患者若常出现4个异常,立即就医

那个失控的夜晚,藏着多少“未被察觉”的信号?陈伯是一位60岁的退休工人,平时生活规律,偶尔感到胸口有些“不太对劲”,但总觉得是工作累了,或者天气热导致的“普通不适”。前两天晚上,陈伯躺在床上,心跳忽然...

美军5代机又栽了:F-35C战机在加州坠毁,飞行员成功弹射逃生

【军武次位面】作者:太白根据外国媒体的相关报道,7月31日,美国海军的一架F-35C战斗机,在加利福尼亚州弗雷斯诺县勒莫尔海军航空站附近,因发生事故而坠毁。好在飞行员成功弹射跳伞逃生,没有出现人员伤亡...

呼吸道炎症的“隐形警报”:一氧化氮呼气检测解析

呼出气一氧化氮经常也是临床是常见的检查项目,在临床上怀疑哪些疾病时需要做呼出气一氧化氮检查?呼出气一氧化氮增高常见于哪些疾病?有哪些因素会影响呼出气一氧化氮检查结果?等等。本文将为你全面解析呼出气一氧...

首次被击毁!低调但先进的S-350,为何活得比韩国仿版差这么多?

【军武次位面】作者:乐乐2月18日,乌克兰军方网站发布了其前线炮兵侦察旅,在顿涅茨克地区攻击俄军S-350防空系统的现场视频。这也是这款地位独特的先进防空系统,第一次确认在战场上被摧毁——考虑到近三年...

Windows 10 LTSC 2021 vs 2019:哪个更适合你?

本内容来源于@什么值得买APP,观点仅代表作者本人|作者:闪电神龙微软近日发布了2024年11月份ISO镜像,包括Windows1124H2、Windows1022H2以及Server2025...

叛变投敌?俄军最先进隐身无人机S-70,在乌东上空被苏-57击落!

【军武次位面】作者:天狼2024年10月5日,乌克兰东部战区传来一条令人震惊的消息:一架俄罗斯最先进的隐身无人机S-70“猎人-B”在乌东上空被击落,令人意外的是,击落它的竟然是俄罗斯自己的战斗机。这...

自动驾驶车祸致1死1伤!特斯拉被判赔偿2.43亿美元

当地时间8月1日,美国佛罗里达州一个陪审团裁定,美国电动汽车制造商特斯拉应为2019年一辆配备自动驾驶系统的ModelS所致的致命车祸承担部分责任,并判令该公司向一名遇难女性的家属及一名伤者支付约2...

HP488DZ 无绳电锤钻(18V)牧田DTD156SFJ

HP488DZ无绳电锤钻(18V)牧田DTD156SFJHP488DZ无绳电锤钻(18V)HP488DZ特征HP488D是一款基于HP457D开发的无绳电锤,采用18V锂离子电池供电。其...

FJK-SJRFPZS防爆阀位行程开关级

解答常见误区在工业自动化和安全控制领域,FJK-SJRFPZS防爆阀位行程开关等级是一个关乎设备安全与运行效率的重要参数。许多用户在选择和应用这类开关时,可能对其等级分类存在一些误解。本文将通过通俗易...