爱分享Coder
介绍
Github地址
https://github.com/GetmeUK
特性
功能简介
ContentTools具有字体加粗、斜体、超链接、对齐、列表、表格、图片、视频、代码、撤销、重做、删除等功能
1、加粗显示
2、斜体显示
3、超链接
4、H标题
5、正文
6、有序和无序列表
7、插入表格
8、插入图片
9、视频
以上截图中的功能还不完整，如果想体验以下完整的功能可以直接去DEMO页面体验，如果需要在HTML级别上更改元素的内容，那也是可以的。通过属性对话框中的最后一个选项卡，可以查看所选元素的内部HTML代码并直接对其进行更新。
使用
下载仓库并打开/ build文件夹，包括预构建的源文件。将文件夹的内容复制到项目的适当位置（例如，content-tools.min.js>
/www/scripts/content-tools.min.js）。但是，/ images文件夹和icons.woff字体需要复制到与content-tools.min.css相同的文件夹中，文件结构应类似于：
<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>
<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>
<h1 data-editable data-name=”heading”>Content</h1>
正确的使用方式如下，也就是说必须要在特定的容器元素内
<div data-editable data-name=heading>
<h1>Content</h1>
</div>
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;
}
- 我们希望用户能够将CSS样式应用于元素。
- 一种保存我们的内容的机制。
- 我们可能还会配置图像处理程序等等
将以下代码添加到我们之前创建的editor.js文件中：
window.addEventListener(‘load’, function() {
var editor;
});
就像文字处理程序一样，可以为内容配置一系列预定义样式。当用户从视口底部的检查器栏中选择标签时，这些标签就会出现。尽管可以将样式设置为适用于所有标签，但是仅显示适用于标签类型的样式。
ContentTools.StylePalette.add([
new ContentTools.Style(‘Author’, ‘author’, [‘p’])
]);
<head>
…
<style>
.author {
font-style: italic;
font-weight: bold;
}
</style>
</head>
editor = ContentTools.EditorApp.get();
editor.init(‘*[data-editable]’, ‘data-name’);
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);
});
总结
1.5万阅读
搜索
专门制作文字特效软件
站制作微信小程序
傻瓜式 页制作软件
站制作软件免费版
一键 站制作app
声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！