diff --git a/ce_interface.js b/ce_interface.js
index 3760bc71..aa098b53 100644
--- a/ce_interface.js
+++ b/ce_interface.js
@@ -45,7 +45,7 @@ var ce = function(settings) {
};
// 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
ce.prototype.defaultSettings = {
diff --git a/codex-editor.js b/codex-editor.js
index af5c2125..c0ea152f 100644
--- a/codex-editor.js
+++ b/codex-editor.js
@@ -1842,7 +1842,7 @@ var paragraphTool = {
/**
* Make initial header block
- * @param {object} JSON to with block data
+ * @param {object} JSON with block data
* @return {Element} element to append
*/
make : function (data) {
@@ -1909,7 +1909,7 @@ var headerTool = {
/**
* Make initial header block
- * @param {object} JSON to with block data
+ * @param {object} JSON with block data
* @return {Element} element to append
*/
make : function (data) {
diff --git a/example.html b/example.html
index c88fbe79..be0eb5d3 100644
--- a/example.html
+++ b/example.html
@@ -20,6 +20,7 @@
font-size: 2em;
}
+
@@ -102,6 +103,15 @@
text : 'На днях я получил очередной проект по разработке личного кабинета.
Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.
Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.'
}
},
+ {
+ 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 : {
type : 'H2',
@@ -161,7 +171,16 @@
paragraph : {
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 @@
})
+
+
diff --git a/plugins/ceditor-tool-link.css b/plugins/ceditor-tool-link.css
new file mode 100644
index 00000000..330dc089
--- /dev/null
+++ b/plugins/ceditor-tool-link.css
@@ -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);
+}
diff --git a/plugins/ceditor-tool-link.js b/plugins/ceditor-tool-link.js
new file mode 100644
index 00000000..c4c26b12
--- /dev/null
+++ b/plugins/ceditor-tool-link.js
@@ -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
+
+};
\ No newline at end of file