js在一个指定元素前添加内容_不得不佩服,美观小巧的网页内容编辑器——ContentTools...

本文主要是介绍js在一个指定元素前添加内容_不得不佩服,美观小巧的网页内容编辑器——ContentTools...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

介绍

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

a4e82465e3ba1cc891568c2c750b1cc2.gif

Github地址

https://github.com/GetmeUK

特性

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

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

功能简介

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

1、加粗显示

89519d2654c3b02e578b72e561161869.png

2、斜体显示

137453fd4d270e94e56ebcc9778f5722.png

3、超链接

3ad72bfb667985cbda1ebe8982902b08.png

4、H标题

31c1156fa45a580cfdfcfd6802b25501.png

5、正文

7b36137fb422e2762cf2eb16be6f303b.png

6、有序和无序列表

957442fe41cc570ad1e804d8a091ed27.png

7、插入表格

f511c9ee712ff34ee9858bb86b733b1f.png

8、插入图片

c878f2a4f25bcf3619f0a22fa7aaa9ed.png
d4c0473e01483ddcaa706d36cd71b3b0.png

9、视频

df1534ab36442e273eb513976fb5cd15.png

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

使用

  • 第一步是下载JS,CSS和其他关联的项目文件:

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

e981d32cacf3ac6e28a53fcd40a1cfd5.png
  • HTML
 My page ... ...  

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

Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.

John F. Woods

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

Content

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

Content

  • 准备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;});
  • 配置样式

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

c2997b7dc2ddb23dac2544016a7089a5.png

我们将添加可应用于段落

标记的单一样式.author。在var编辑器下方声明添加:

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

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

 ... 
  • 选择可编辑区域

接下来,我们需要初始化编辑器,并让它知道页面上的哪些元素是可编辑的。为此,将以下代码添加到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将每个区域的内容发送到服务器进行保存。在浏览器中打开页面,寻找左上方的蓝色编辑按钮,然后单击它以开始编辑。


532465722a0b94318778eeff660b6a03.png

总结

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

这篇关于js在一个指定元素前添加内容_不得不佩服,美观小巧的网页内容编辑器——ContentTools...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/429504

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque

C++常见容器获取头元素的方法大全

《C++常见容器获取头元素的方法大全》在C++编程中,容器是存储和管理数据集合的重要工具,不同的容器提供了不同的接口来访问和操作其中的元素,获取容器的头元素(即第一个元素)是常见的操作之一,本文将详细... 目录一、std::vector二、std::list三、std::deque四、std::forwa

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

Python实现合并与拆分多个PDF文档中的指定页

《Python实现合并与拆分多个PDF文档中的指定页》这篇文章主要为大家详细介绍了如何使用Python实现将多个PDF文档中的指定页合并生成新的PDF以及拆分PDF,感兴趣的小伙伴可以参考一下... 安装所需要的库pip install PyPDF2 -i https://pypi.tuna.tsingh

Flask解决指定端口无法生效问题

《Flask解决指定端口无法生效问题》文章讲述了在使用PyCharm开发Flask应用时,启动地址与手动指定的IP端口不一致的问题,通过修改PyCharm的运行配置,将Flask项目的运行模式从Fla... 目录android问题重现解决方案问题重现手动指定的IP端口是app.run(host='0.0.

SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)

《SpringBoot使用Jasypt对YML文件配置内容加密的方法(数据库密码加密)》本文介绍了如何在SpringBoot项目中使用Jasypt对application.yml文件中的敏感信息(如数... 目录SpringBoot使用Jasypt对YML文件配置内容进行加密(例:数据库密码加密)前言一、J

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N