mirror of
https://github.com/codex-team/editor.js
synced 2024-06-29 02:40:23 +02:00
Tool link plugin (#58)
* Finish core functionality of the tool link * Some css beauty * Fix css border: 0 * Change to className.add() * Remove 'to' in comments * Use this where it is real Remove default type setting in Input * Code refactoring * Implement save() method * Optimise variable usage * Add UI maker * Clearfix Objects clone Css in tool-link plugin * Fix * Fix CSS
This commit is contained in:
parent
f7e4d3393c
commit
b72593041e
|
@ -45,7 +45,7 @@ var ce = function(settings) {
|
||||||
};
|
};
|
||||||
|
|
||||||
// All posible tools
|
// All posible tools
|
||||||
ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'twitter', 'instagram', 'smile'];
|
ce.prototype.allTools = ['header', 'picture', 'list', 'quote', 'code', 'link', 'twitter', 'instagram', 'smile'];
|
||||||
|
|
||||||
// Default settings configuration
|
// Default settings configuration
|
||||||
ce.prototype.defaultSettings = {
|
ce.prototype.defaultSettings = {
|
||||||
|
|
|
@ -1842,7 +1842,7 @@ var paragraphTool = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make initial header block
|
* Make initial header block
|
||||||
* @param {object} JSON to with block data
|
* @param {object} JSON with block data
|
||||||
* @return {Element} element to append
|
* @return {Element} element to append
|
||||||
*/
|
*/
|
||||||
make : function (data) {
|
make : function (data) {
|
||||||
|
@ -1909,7 +1909,7 @@ var headerTool = {
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Make initial header block
|
* Make initial header block
|
||||||
* @param {object} JSON to with block data
|
* @param {object} JSON with block data
|
||||||
* @return {Element} element to append
|
* @return {Element} element to append
|
||||||
*/
|
*/
|
||||||
make : function (data) {
|
make : function (data) {
|
||||||
|
|
21
example.html
21
example.html
|
@ -20,6 +20,7 @@
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
|
||||||
</head>
|
</head>
|
||||||
<body style="padding: 100px">
|
<body style="padding: 100px">
|
||||||
|
|
||||||
|
@ -102,6 +103,15 @@
|
||||||
text : 'На днях я получил очередной проект по разработке личного кабинета.<br> Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.<br> Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.'
|
text : 'На днях я получил очередной проект по разработке личного кабинета.<br> Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.<br> Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
link : {
|
||||||
|
'linkUrl' : 'http://google.com',
|
||||||
|
'linkText' : 'google.com',
|
||||||
|
'image' : 'http://i1.kym-cdn.com/photos/images/facebook/000/002/110/longcat.jpg',
|
||||||
|
'title' : 'Google',
|
||||||
|
'description' : 'Поисковик, поисковик, проч.'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
header : {
|
header : {
|
||||||
type : 'H2',
|
type : 'H2',
|
||||||
|
@ -161,7 +171,16 @@
|
||||||
paragraph : {
|
paragraph : {
|
||||||
text : 'После создания нового репозитория дерево содержит только одну ветку — master. Ветка состоит из коммитов, расположенных в хронологическом порядке. Как правило, в ветке master находятся проверенные и протестированные изменения.'
|
text : 'После создания нового репозитория дерево содержит только одну ветку — master. Ветка состоит из коммитов, расположенных в хронологическом порядке. Как правило, в ветке master находятся проверенные и протестированные изменения.'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
link : {
|
||||||
|
'linkUrl' : 'http://yandex.ru',
|
||||||
|
'linkText' : 'yandex.ru',
|
||||||
|
'image' : 'https://yastatic.net/morda-logo/i/apple-touch-icon/ru-76x76.png',
|
||||||
|
'title' : 'Яндекс',
|
||||||
|
'description' : 'Сайт, поисковик, проч.'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
];
|
];
|
||||||
|
|
||||||
|
@ -189,3 +208,5 @@
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<script src="plugins/ceditor-tool-link.js"></script>
|
||||||
|
|
59
plugins/ceditor-tool-link.css
Normal file
59
plugins/ceditor-tool-link.css
Normal file
|
@ -0,0 +1,59 @@
|
||||||
|
.clearfix:after {
|
||||||
|
visibility: hidden;
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
content: " ";
|
||||||
|
clear: both;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link-input {
|
||||||
|
outline: none;
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-link-panel {
|
||||||
|
width: 50%;
|
||||||
|
position: relative;
|
||||||
|
margin: 25px auto;
|
||||||
|
background: #f8f7ef;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 25px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-image {
|
||||||
|
float:right;
|
||||||
|
width: 75px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-title {
|
||||||
|
display: block;
|
||||||
|
width: 340px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
line-height: 1.2em;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-description {
|
||||||
|
display: block;
|
||||||
|
width: 400px;
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ceditor-tool-link .tool-link-link {
|
||||||
|
display: block;
|
||||||
|
width: 360px;
|
||||||
|
font-size: 10px;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-transform: uppercase;
|
||||||
|
text-decoration: none;
|
||||||
|
color: rgba(165,156,86,.8);
|
||||||
|
}
|
277
plugins/ceditor-tool-link.js
Normal file
277
plugins/ceditor-tool-link.js
Normal file
|
@ -0,0 +1,277 @@
|
||||||
|
/**
|
||||||
|
* Created by nostr on 29.06.16.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Link tool plugin
|
||||||
|
*/
|
||||||
|
var linkTool = {
|
||||||
|
|
||||||
|
defaultText : 'Insert link here ...',
|
||||||
|
currentBlock : null,
|
||||||
|
currentInput : null,
|
||||||
|
elementClasses : {
|
||||||
|
link : "tool-link-link",
|
||||||
|
image : "tool-link-image",
|
||||||
|
title : "tool-link-title",
|
||||||
|
description : "tool-link-description"
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Make initial header block
|
||||||
|
* @param {object} JSON with block data
|
||||||
|
* @return {Element} element to append
|
||||||
|
*/
|
||||||
|
makeNewBlock : function (data) {
|
||||||
|
|
||||||
|
var wrapper = linkTool.ui.mainBlock();
|
||||||
|
|
||||||
|
var tag = linkTool.ui.input();
|
||||||
|
|
||||||
|
linkTool.currentInput = tag;
|
||||||
|
|
||||||
|
wrapper.appendChild(tag);
|
||||||
|
|
||||||
|
/* Bind callbacks **/
|
||||||
|
|
||||||
|
tag.addEventListener('paste', linkTool.blockPasteCallback, false);
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to render HTML block from JSON
|
||||||
|
*/
|
||||||
|
render : function (json) {
|
||||||
|
|
||||||
|
var block = linkTool.ui.mainBlock();
|
||||||
|
|
||||||
|
var tag = linkTool.ui.make(json);
|
||||||
|
|
||||||
|
block.appendChild(tag);
|
||||||
|
|
||||||
|
return block;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Method to extract JSON data from HTML block
|
||||||
|
*/
|
||||||
|
save : function (block){
|
||||||
|
|
||||||
|
var linkElement = linkTool.elementClasses.link;
|
||||||
|
|
||||||
|
var data = {
|
||||||
|
fullLink : block.querySelector("." + linkElement).href,
|
||||||
|
shortLink : block.querySelector("." + linkElement).textContent,
|
||||||
|
image : block.querySelector("." + linkTool.elementClasses.image).src,
|
||||||
|
title : block.querySelector("." + linkTool.elementClasses.title).textContent,
|
||||||
|
description : block.querySelector("." + linkTool.elementClasses.description).textContent
|
||||||
|
};
|
||||||
|
|
||||||
|
return data;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
appendCallback : function () {
|
||||||
|
|
||||||
|
console.log('link callback is appended...');
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
blockPasteCallback : function (event) {
|
||||||
|
|
||||||
|
clipboardData = event.clipboardData || window.clipboardData;
|
||||||
|
|
||||||
|
pastedData = clipboardData.getData('Text');
|
||||||
|
|
||||||
|
var block = event.target.parentNode;
|
||||||
|
|
||||||
|
Promise.resolve()
|
||||||
|
|
||||||
|
.then(function () {
|
||||||
|
return linkTool.urlify(pastedData)
|
||||||
|
})
|
||||||
|
|
||||||
|
.then(fetch('http://ajax.ru/link'))
|
||||||
|
|
||||||
|
.then(function (response) {
|
||||||
|
|
||||||
|
if (response.status == "200"){
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
return {
|
||||||
|
'linkUrl' : 'http://yandex.ru',
|
||||||
|
'linkText' : 'yandex.ru',
|
||||||
|
'image' : 'https://yastatic.net/morda-logo/i/apple-touch-icon/ru-76x76.png',
|
||||||
|
'title' : 'Яндекс',
|
||||||
|
'description' : 'Сайт, поисковик, проч.'
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
.then(function (json) {
|
||||||
|
linkTool.composeLinkPreview(json, block)
|
||||||
|
})
|
||||||
|
|
||||||
|
.catch(function(error) {
|
||||||
|
cEditor.core.log('Error while doing things with link paste: %o', 'error', error);
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
urlify : function (text) {
|
||||||
|
|
||||||
|
var urlRegex = /(https?:\/\/\S+)/g;
|
||||||
|
|
||||||
|
var links = text.match(urlRegex);
|
||||||
|
|
||||||
|
if (links) {
|
||||||
|
return links[0];
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
composeLinkPreview : function (json, currentBlock) {
|
||||||
|
|
||||||
|
if (json == {}) {
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
var previewBlock = linkTool.ui.make(json);
|
||||||
|
|
||||||
|
linkTool.currentInput.remove();
|
||||||
|
|
||||||
|
currentBlock.appendChild(previewBlock);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
linkTool.ui = {
|
||||||
|
|
||||||
|
make : function (json) {
|
||||||
|
|
||||||
|
var wrapper = this.wrapper(),
|
||||||
|
siteImage = this.image(json.image),
|
||||||
|
siteTitle = this.title(json.title),
|
||||||
|
siteDescription = this.description(json.description),
|
||||||
|
siteLink = this.link(json.linkUrl, json.linkText);
|
||||||
|
|
||||||
|
wrapper.appendChild(siteImage);
|
||||||
|
wrapper.appendChild(siteTitle);
|
||||||
|
wrapper.appendChild(siteLink);
|
||||||
|
wrapper.appendChild(siteDescription);
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mainBlock : function () {
|
||||||
|
|
||||||
|
var wrapper = document.createElement('div');
|
||||||
|
|
||||||
|
wrapper.classList += "ceditor-tool-link";
|
||||||
|
|
||||||
|
return wrapper
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
input : function () {
|
||||||
|
|
||||||
|
var inpitTag = document.createElement('input');
|
||||||
|
|
||||||
|
inpitTag.classList += "ceditor-tool-link-input";
|
||||||
|
|
||||||
|
inpitTag.placeholder = linkTool.defaultText;
|
||||||
|
|
||||||
|
inpitTag.contentEditable = false;
|
||||||
|
|
||||||
|
return inpitTag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
wrapper : function () {
|
||||||
|
|
||||||
|
var wrapper = document.createElement('div');
|
||||||
|
|
||||||
|
wrapper.className += 'tool-link-panel clearfix';
|
||||||
|
|
||||||
|
return wrapper;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
image : function (imageSrc) {
|
||||||
|
|
||||||
|
var imageTag = document.createElement('img');
|
||||||
|
|
||||||
|
imageTag.classList += linkTool.elementClasses.image;
|
||||||
|
|
||||||
|
imageTag.setAttribute('src', imageSrc);
|
||||||
|
|
||||||
|
return imageTag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
link : function (linkUrl, linkText) {
|
||||||
|
|
||||||
|
var linkTag = document.createElement('a');
|
||||||
|
|
||||||
|
linkTag.classList += linkTool.elementClasses.link;
|
||||||
|
|
||||||
|
linkTag.href = linkUrl;
|
||||||
|
|
||||||
|
linkTag.target = "_blank";
|
||||||
|
|
||||||
|
linkTag.innerText = linkText;
|
||||||
|
|
||||||
|
return linkTag;
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
title : function (titleText) {
|
||||||
|
|
||||||
|
var titleTag = document.createElement('div');
|
||||||
|
|
||||||
|
titleTag.classList.add("tool-link-content", linkTool.elementClasses.title);
|
||||||
|
|
||||||
|
titleTag.innerHTML = titleText;
|
||||||
|
|
||||||
|
return titleTag;
|
||||||
|
},
|
||||||
|
|
||||||
|
description : function (descriptionText) {
|
||||||
|
|
||||||
|
var descriptionTag = document.createElement('div');
|
||||||
|
|
||||||
|
descriptionTag.classList.add("tool-link-content", linkTool.elementClasses.description);
|
||||||
|
|
||||||
|
descriptionTag.innerHTML = descriptionText;
|
||||||
|
|
||||||
|
return descriptionTag;
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
cEditor.tools.link = {
|
||||||
|
|
||||||
|
type : 'link',
|
||||||
|
iconClassname : 'ce-icon-link',
|
||||||
|
make : linkTool.makeNewBlock,
|
||||||
|
appendCallback : linkTool.appendCallback,
|
||||||
|
render : linkTool.render
|
||||||
|
// settings : linkTool.makeSettings(),
|
||||||
|
// save : linkTool.save
|
||||||
|
|
||||||
|
};
|
Loading…
Reference in a new issue