花垣县欢宁供销服务有限责任公司_批发农副产品

| by

必须钦佩，功能全面小巧的网站文字编辑工具——Editools智能创作者19-2。作为一名软件开发工程师，同时也是优质科技创作领域的作者，今天我向大家推荐这个集实用与美观于一体的网站文字编辑器——Editools。

Editools是一款专为网页设计的精美小巧的文字编辑工具（一个基于JavaScript的工具库），具备所见即所得的编辑功能。只需简单地几个步骤，就能将Editools集成到任何HTML页面中。

如图所示，通过Editools弹窗层实现实时编辑功能。用“小巧而强大”来形容它再适合不过了！

GitHub地址：https://github.com/GetmeUK

Editools特性

Editools是专门用于HTML页面的精美小巧的文字编辑器。
它被设计为：

  • 与框架无关的库，不依赖任何JavaScript框架（如jQuery），但可以很好地与之配合使用。
  • 灵活的软件包由5个库组成，每个库都可以独立使用。
  • 可扩展的软件包易于扩展。
  • 小巧完整的编辑器（包括JS、CSS、图像和图标字体）仅有41KB（压缩后为49KB）。

功能简介

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

  1. 加粗显示
  2. 斜体显示
  3. 超链接
  4. H标题
  5. 正文
  6. 有序和无序列表
  7. 插入表格
  8. 插入图片
  9. 视频

以上截图中的功能还远不止这些，如果想要体验Editools的更多丰富功能，可以直接访问DEMO页面。在HTML级别上修改元素内容也是可以的。

通过属性对话框的最后一个选项卡，可以查看所选元素的内部HTML代码并进行直接更新。

使用方法如下：

  1. 下载JS、CSS和其他关联的项目文件：下载仓库并打开“bild”文件夹，包括预构建的源文件。
  2. 将文件夹的内容复制到项目适当的位置（例如，“content-tools.min.js”），并将其链接到页面中。
  3. 复制“/images”文件夹和“icons.woff”字体到与“content-tools.min.css”相同的文件夹中，确保文件结构类似：
<head>
  <title>Mypage</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>
  ...
<div data-editable data-name="main-content">
  <blockquote>Always code as if the person reading your code is a psychopath, maintaining your code will be violent psychoopath who knows where you live.</blockquote>
  <p>John F. Woods</p>
</div>
  1. 包含一个名为“editor.js”的附加JS文件，其中包含初识编辑器的代码。
  2. 将data-name属性用于在保存时标识区域（默认情况下使用id属性），在标记可编辑HTML时，常见的误解是将单个元素标记为可编辑。正确的使用方法如下：
<div data-editable data-name="heading">
  <h1>Content</h1>
</div>

注意，必须在特定的容器元素内进行标记。

准备CSS

Editools使用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: .5em;
}
/* 右对齐 */
[data-editable].align-right {
  clear: initial;
  float: right;
  margin-left: .5em;
}
/* 可编辑区域中文本的对齐样式 */
[data-editable].text-center {
  text-align: center;
}
[data-editable].text-left {
  text-align: left;
}
[data-editable].text-right {
  text-align: right;
}

初始化编辑器

Editools提供了一个编辑器，但在初始化之前，我们需要配置一些事宜：

  • 用户能否将CSS样式应用于元素。
  • 页面的区域是否可编辑。
  • 保存内容的机制。

为此，请将以下代码添加到“editor.js”文件中：

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

配置样式

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

在“var editor”下方声明添加以下代码：

ContentTools.StylePalette.add(new ContentTools.Style('thor', 'athor', ['p']));

StylePalette.add方法允许我们向编辑器添加样式列表。每种样式都声明为一个Style实例，该实例使用显示名称、CSS类和可以应用该样式的标签列表。

我们需要添加相关的CSS来支持这种样式， therefore, 在HTML的开头添加以下代码：

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

选择可编辑区域

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

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

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

保存更改

最后，我们希望在用户保存页面时得到通知，以便我们可以将每个区域的更新内容存储在文件或数据库中。为此，我们需要监听由编辑器触发的保存事件。

在“editor.init”语句之后，添加以下代码：

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

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

总结

这样一个精美且功能强大的即时编辑器无疑是如此实用，特别是对于内容丰富的网站，如CMS、静态文档网站、博客等内容型网站尤为有用。希望对您有所帮助，Enjoy it！

Share: Facebook Twitter Linkedin

Comments are closed.