editor.js/example.html

180 lines
19 KiB
HTML
Raw Normal View History

2015-11-28 23:10:25 +01:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodeX Editor</title>
<link rel="stylesheet" href="editor.css" />
2016-06-04 19:25:03 +02:00
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700,800&subset=latin,cyrillic' rel='stylesheet' type='text/css' async=true>
2016-02-02 13:45:43 +01:00
<style>
body{
font-family: 'Open Sans';
2016-02-05 16:29:29 +01:00
font-size: 14px;
2016-02-02 13:45:43 +01:00
}
</style>
2015-11-28 23:10:25 +01:00
</head>
<body style="padding: 100px">
<h1>CodeX Editor</h1>
<button id="codex_editor_export_btn">Сохранить</button>
2015-12-29 19:44:32 +01:00
<br>
<br>
2015-11-28 23:10:25 +01:00
<form action="">
2016-06-24 20:36:25 +02:00
<textarea hidden name="" id="codex_editor" cols="30" rows="10" style="width: 100%;height: 300px;"></textarea>
2015-11-28 23:10:25 +01:00
</form>
2016-02-05 09:25:52 +01:00
<!--
<div class="ce_wrapper">
2015-11-28 23:10:25 +01:00
2016-02-05 09:25:52 +01:00
<div class="ce_toolbar">
2015-11-28 23:10:25 +01:00
2016-02-05 09:25:52 +01:00
<span class="toggler"><i class="ce_icon-plus-circled-1"></i></span>
2015-11-28 23:10:25 +01:00
2016-02-05 09:25:52 +01:00
<li data-type="header"><i class="ce_icon-header"></i></li>
<li data-type="picture"><i class="ce_icon-picture"></i></li>
<li data-type="list"><i class="ce_icon-list"></i></li>
<li data-type="quote"><i class="ce_icon-quote"></i></li>
<li data-type="code"><i class="ce_icon-code"></i></li>
<li data-type="twitter"><i class="ce_icon-twitter"></i></li>
<li data-type="instagram"><i class="ce_icon-instagram"></i></li>
<li data-type="smile"><i class="ce_icon-smile"></i></li>
2015-11-28 23:10:25 +01:00
2016-02-05 09:25:52 +01:00
</div>
2015-11-28 23:10:25 +01:00
2016-02-05 09:25:52 +01:00
<div class="ce_redactor" contenteditable="true">
<h2>Введение</h2>
<p>На днях я получил очередной проект по разработке личного кабинета.<br> Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.<br> Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.</p>
2015-11-28 23:10:25 +01:00
2016-02-05 09:25:52 +01:00
<h2>Почему нужно использовать систему контроля версий</h2>
<p>Основные преимущества:</p>
<ul>
<li>одновременная работа нескольких человек над проектом</li>
<li>возможность быстро обнаружить и откатить, все не зафиксированные изменения</li>
<li>возможность быстро откатить ошибочные, уже зафиксированные, изменения</li>
<li>история всех изменений в проекте, с указанием даты и авторов</li>
<li>возможность изучить процесс развития проекта</li>
</ul>
2015-11-28 23:10:25 +01:00
</div>
2016-02-05 09:25:52 +01:00
</div>
-->
2015-11-28 23:10:25 +01:00
</body>
</html>
2016-02-02 13:45:43 +01:00
<!-- <script src="ce_interface.js"></script> -->
<script src="codex-editor.js"></script>
2015-11-28 23:10:25 +01:00
<script>
2016-06-24 20:36:25 +02:00
/**
* Input JSON style
*/
var INPUT = {
items : [],
count : 10,
};
/** Fill with example data */
INPUT.items = [
{
header : {
type : 'H2',
2016-06-24 20:36:25 +02:00
text : 'Введение',
},
},
{
paragraph : {
text : 'На днях я получил очередной проект по разработке личного кабинета.<br> Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.<br> Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.'
}
},
{
header : {
type : 'H2',
2016-06-24 20:36:25 +02:00
text : 'Почему нужно использовать систему контроля версий',
}
},
{
header : {
type : 'H3',
2016-06-24 20:36:25 +02:00
text : 'Основные преимущества',
}
},
{
list : {
type : 'unordered',
2016-06-24 20:36:25 +02:00
items : [
'одновременная работа нескольких человек над проектом',
'возможность быстро обнаружить и откатить, все не зафиксированные изменения',
'возможность быстро откатить ошибочные, уже зафиксированные, изменения',
'история всех изменений в проекте, с указанием даты и авторов',
'возможность изучить процесс развития проекта',
]
}
},
{
header : {
type : 'H2',
2016-06-24 20:36:25 +02:00
text : 'Что такое git',
}
},
{
quote : {
type : 'simple',
text : 'git — распределенная система контроля версий файлов.<br> «Распределенная» значит, что каждый репозиторий содержит всю историю изменений, и из него можно развернуть полноценную рабочую копию проекта.',
photo : '',
2016-07-01 18:54:57 +02:00
author : '',
2016-06-24 20:36:25 +02:00
}
},
{
header : {
type : 'H2',
2016-06-24 20:36:25 +02:00
text : 'Что такое git',
}
},
{
paragraph : {
text : '<strong>Репозиторий </strong>— дерево изменений проекта.',
2016-06-24 20:36:25 +02:00
}
},
{
paragraph : {
text : '<strong>Репозиторий </strong>— дерево изменений проекта.',
2016-06-24 20:36:25 +02:00
}
},
{
paragraph : {
text : 'После создания нового репозитория дерево содержит только одну ветку — master. Ветка состоит из коммитов, расположенных в хронологическом порядке.&nbsp;Как правило, в ветке master находятся проверенные и протестированные изменения.'
2016-06-24 20:36:25 +02:00
}
}
];
/**
* @todo uncomment and append all text to items
2016-06-24 20:36:25 +02:00
* .....
* <p><strong>Ветка </strong>— указатель на коммит.&nbsp;&nbsp;<br> На один коммит может указывать несколько веток. Как правило это случается при создании новой ветки из текущей. Например для реализации в ней новой задачи. По мере добавления коммитов — ветки будут расходится в разные стороны.</p> <p><strong>Коммит</strong> (от слова commit - фиксировать) — логическая единица изменений.<br> Каждый из них имеет историю уникальный ID и цепочку предшествующих коммитов. Можно «откатить» (отменить) изменения любого из коммитов. Для любого коммита из истории можно создать указатель, то есть ветку.&nbsp;</p> <p><strong>Индекс</strong> — изменения, которые будут зафиксированы при следующем коммите.<br> При этом, во время коммита, могут быть изменения, не добавленные в индекс — они не будут закоммичены. Их надо будет отдельно добавить в индекс и зафиксировать. Таким образом, можно вносить разом, все необходимые по мере работы, правки и фиксировать их логическими группами.</p> <p>В первое время вам понадобятся только основные команды. Давайте рассмотрим их:</p> <ul> <li>init — создает новый репозиторий</li> <li>status — отображает список измененных, добавленных и удаленных файлов</li> <li>branch — отображает список веток и активную среди них&nbsp;</li> <li>add — добавляет указанные файлы в индекс</li> <li>reset — удаляет указанные файлы из индекса</li> <li>commit — фиксирует добавленнные в индекс изменения</li> <li>checkout — переключает активную ветку; отменяет не добавленные в индекс изменения</li> <li>merge — объединяет указанную ветку с активной&nbsp;</li> <li>log — выводит список последних коммитов (можно указать количество и формат)</li> </ul> <h2>Примеры команд для работы с Git</h2> <p>Создайте новую папку для тестового проекта.</p> <p>Чтобы начать работу с гитом, надо его инициализировать — открыть консоль, перейти в корневую папку проекта и выполнить команду:</p>
* <code>$ <span class="sc_keyword">git</span> init</code> <p>Эта команда создаст новый пустой репозиторий. Проще говоря, появится папка .git с какими-то непонятными файлами.&nbsp;Причем такой репозиторий, который находится в папке проекта, файлы которого вы можете менять — называется «рабочей копией». Существуют еще «внешние копии» или bare-репозитории.</p> <p>Все остальные команды можно вызывать в корневой папке или в одной из вложенных.</p> <p>Теперь можно вносить изменения.</p> <p>Список изменений можно увидеть выполнив команду:</p> <p><code>$ <span class="sc_keyword">git</span> status</code></p> <p>В консоли появится список измененных файлов.</p> <p>Добавьте файлы, изменения в которых вы хотите зафиксировать:</p> <p><code>$ <span class="sc_keyword">git</span> add file_name_a.php</code></p> <p>Файлы можно указывать через пробел. Все файлы в данной папке и ее подпаках можно добавить командой:</p> <p><code>$ <span class="sc_keyword">git</span> add .</code></p> <p>Будьте внимательны, эта команда не добавит новые файлы в индекс. Добавятся только модифицированные старые файлы и удаленные. Новые файлы можно добавить явно указав имя.&nbsp;</p> <p>Добавить все новые и измененные файлы можно командой:</p> <p><code>$ <span class="sc_keyword">git</span> add -A</code></p> <p>Изменения стоит фиксировать логическими блоками, то есть в одном коммите должны быть файлы связанные с решением одной конкретной ошибки или одной конкретной новой задачи.</p> <p>Если вы добавили файл из другого логического блока, удалите его из индекса командой:</p> <p><code>$ <span class="sc_keyword">git</span> reset file_name_b.php</code></p> <p>Зафиксируйте эти изменения в другом коммите. Так будет удобнее при просмотре истории изменений и отмене изменений.</p> <p>Если вы случайно изменили не тот файл - верните его к последнему зафиксированному состоянию командой:</p> <p><code>$ <span class="sc_keyword">git</span> checkout file_name_c.php</code></p> <p>Отменить изменения всех, ранее существующих, файлах в данной и вложенных папках можно командой:</p> <p><code>$ <span class="sc_keyword">git</span> checkout -- .</code></p> <p>Ненужные новые файлы достаточно просто удалить. Или это можно сделать командой:</p> <p><code>$ <span class="sc_keyword">git</span> reset --hard HEAD</code></p> <p>Проект будет полностью приведен к последнему зафиксированному состоянию.</p> <p>Теперь зафиксируйте изменения до
*/
function ready(f){
/in/.test(document.readyState) ? setTimeout(ready,9,f) : f();
2016-06-24 20:36:25 +02:00
};
2015-11-28 23:10:25 +01:00
/** Document is ready */
ready(function() {
2016-02-02 13:45:43 +01:00
2016-02-05 16:29:29 +01:00
cEditor.start({
2016-03-29 20:55:28 +02:00
textareaId: 'codex_editor',
2016-06-24 20:36:25 +02:00
// tools : ['header', 'list', 'quote', 'code'],
data : INPUT
2016-02-05 16:29:29 +01:00
});
2016-02-02 13:45:43 +01:00
2015-11-28 23:10:25 +01:00
})
</script>