From 54d51f42d2e76721f1f935f776ba4cf9df3789ca Mon Sep 17 00:00:00 2001 From: Mark Dermanov Date: Sat, 2 Jan 2016 00:01:37 +0300 Subject: [PATCH] auto import textarea content to editor on init --- ce_interface.js | 75 +++++++++++++++++++++++++++++++++++++++++-------- example.html | 19 +++++++++++-- 2 files changed, 80 insertions(+), 14 deletions(-) diff --git a/ce_interface.js b/ce_interface.js index 70d28b4b..2dcf3224 100644 --- a/ce_interface.js +++ b/ce_interface.js @@ -32,6 +32,13 @@ var ce = function(settings) { /** Making a wrapper and interface */ this.makeInterface(); + + /* + * Импорт содержимого textarea в редактор + * */ + this.importHtml(); + + /** Bind all events */ this.bindEvents(); @@ -98,14 +105,67 @@ ce.prototype.exportHtml = function () { }; -/* +/** * Импорт разметки из итоговой текстареа * пока по кнопке "импорт", потом можно сделать на каждое изменение в редакторе (надо ли это?) + * + * TODO + * 1) удалить лишние узлы, работа с которыми не предполагается в рамках редактора + * 2) удалить скрипты, стили + * 3) поочищать содержимое узлов от мусора - должен остаться только текст, теги форматирования (жирность и тд) и переносы строк (или их тоже убираем?) * */ ce.prototype.importHtml = function () { - this.editableWrapper.innerHTML = this.resultTextarea.value; + var node, body, i, nodeType, tmp; + + /* + * Парсим содержимое textarea. + * Создаем новый документ, получаем указатель на контенейр body. + * */ + tmp = new DOMParser().parseFromString( this.resultTextarea.value, "text/html" ); + body = tmp.getElementsByTagName("body")[0]; + + /* + * Обходим корневые узлы. Проставляем им класс и тип узла. + * */ + for(i = 0; i < body.children.length; i++){ + node = body.children.item(i); + + if (!node.classList.contains("node")) + node.classList.add("node"); + + + switch (node.tagName){ + case "P" : + nodeType = "text"; + break; + + case "H1" : + case "H2" : + case "H3" : + case "H4" : + case "H5" : + case "H6" : + nodeType = "header"; + break; + + case "UL" : + nodeType = "list"; + break; + + case "IMG" : + nodeType = "picture"; + break; + + case "CODE" : + nodeType = "code"; + break; + } + + node.dataset["type"] = nodeType; + } + + this.editableWrapper.innerHTML = body.innerHTML; - return false; }; @@ -126,15 +186,6 @@ ce.prototype.bindEvents = function () { }); - /* - * Импорт разметки из итоговой textarea - * пока по кнопке "импорт", потом можно сделать на каждое изменение в редакторе (надо ли это?) - * */ - document.getElementById("import_html").addEventListener('click', function () { - _this.importHtml.apply(_this) - }); - - /** All keydowns on Window */ document.addEventListener('keydown', function (event) { _this.globalKeydownCallback(event); diff --git a/example.html b/example.html index ebf2ecd2..13ed9f46 100644 --- a/example.html +++ b/example.html @@ -11,12 +11,27 @@

CodeX Editor

-

- +