mirror of
https://github.com/codex-team/editor.js
synced 2024-06-17 13:15:20 +02:00
auto import textarea content to editor on init
This commit is contained in:
parent
3b546ad322
commit
54d51f42d2
|
@ -32,6 +32,13 @@ var ce = function(settings) {
|
||||||
/** Making a wrapper and interface */
|
/** Making a wrapper and interface */
|
||||||
this.makeInterface();
|
this.makeInterface();
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Импорт содержимого textarea в редактор
|
||||||
|
* */
|
||||||
|
this.importHtml();
|
||||||
|
|
||||||
|
|
||||||
/** Bind all events */
|
/** Bind all events */
|
||||||
this.bindEvents();
|
this.bindEvents();
|
||||||
|
|
||||||
|
@ -98,14 +105,67 @@ ce.prototype.exportHtml = function () {
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
/*
|
/**
|
||||||
* Импорт разметки из итоговой текстареа
|
* Импорт разметки из итоговой текстареа
|
||||||
* пока по кнопке "импорт", потом можно сделать на каждое изменение в редакторе (надо ли это?)
|
* пока по кнопке "импорт", потом можно сделать на каждое изменение в редакторе (надо ли это?)
|
||||||
|
*
|
||||||
|
* TODO
|
||||||
|
* 1) удалить лишние узлы, работа с которыми не предполагается в рамках редактора
|
||||||
|
* 2) удалить скрипты, стили
|
||||||
|
* 3) поочищать содержимое узлов от мусора - должен остаться только текст, теги форматирования (жирность и тд) и переносы строк (или их тоже убираем?)
|
||||||
* */
|
* */
|
||||||
ce.prototype.importHtml = function () {
|
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 */
|
/** All keydowns on Window */
|
||||||
document.addEventListener('keydown', function (event) {
|
document.addEventListener('keydown', function (event) {
|
||||||
_this.globalKeydownCallback(event);
|
_this.globalKeydownCallback(event);
|
||||||
|
|
19
example.html
19
example.html
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue