mirror of
https://github.com/codex-team/editor.js
synced 2026-03-16 15:45:47 +01:00
402 lines
22 KiB
HTML
402 lines
22 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>CodeX Editor</title>
|
||
<link rel="stylesheet" href="editor.css" />
|
||
<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>
|
||
<link href='https://fonts.googleapis.com/css?family=Lora:400,400italic,700,700italic&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
|
||
<style>
|
||
body{
|
||
font-family: 'Open Sans';
|
||
/*font-family: 'Lora';*/
|
||
font-size: 14px;
|
||
}
|
||
.article{
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
h1{
|
||
font-size: 2em;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
<body style="padding: 100px">
|
||
|
||
<article class="article">
|
||
|
||
<h1>CodeX Editor</h1>
|
||
|
||
<button id="codex_editor_export_btn">Сохранить</button>
|
||
<br>
|
||
<br>
|
||
<form action="">
|
||
|
||
<textarea hidden name="" id="codex_editor" cols="30" rows="10" style="width: 100%;height: 300px;"></textarea>
|
||
|
||
</form>
|
||
|
||
</article>
|
||
|
||
<!--
|
||
<div class="ce_wrapper">
|
||
|
||
<div class="ce_toolbar">
|
||
|
||
<span class="toggler"><i class="ce_icon-plus-circled-1"></i></span>
|
||
|
||
<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>
|
||
|
||
</div>
|
||
|
||
<div class="ce_redactor" contenteditable="true">
|
||
<h2>Введение</h2>
|
||
<p>На днях я получил очередной проект по разработке личного кабинета.<br> Как обычно, я открыл консоль, чтобы посмотреть историю проекта, ветки и все ли правки закомичены (от слова commit - фиксировать). Однако ничего из этого я не узнал — проект не содержал .git репозитория.<br> Эта ситуация в очередной раз заставила задуматься о том, как много разработчиков до сих пор не понимают необходимость контролировать изменения в файлах с исходным кодом. А многие и вовсе не знают что это такое, и как этим пользоваться.</p>
|
||
|
||
<h2>Почему нужно использовать систему контроля версий</h2>
|
||
<p>Основные преимущества:</p>
|
||
<ul>
|
||
<li>одновременная работа нескольких человек над проектом</li>
|
||
<li>возможность быстро обнаружить и откатить, все не зафиксированные изменения</li>
|
||
<li>возможность быстро откатить ошибочные, уже зафиксированные, изменения</li>
|
||
<li>история всех изменений в проекте, с указанием даты и авторов</li>
|
||
<li>возможность изучить процесс развития проекта</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
-->
|
||
|
||
|
||
</body>
|
||
</html>
|
||
|
||
<!-- <script src="ce_interface.js"></script> -->
|
||
<script src="codex-editor.js"></script>
|
||
<script>
|
||
|
||
var INPUT = {
|
||
items : [],
|
||
count : 10,
|
||
};
|
||
|
||
/** Fill with example data */
|
||
INPUT.items = [
|
||
{
|
||
paragraph : {
|
||
text : '<p>Ladies and gentlemen, prepare yourself for a pivotal moment in the history of web development…</p>'
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : '<p><i>[Drumroll begins]</i></p><p>Promises have arrived natively in JavaScript!</p><p><i>[Fireworks explode, glittery paper rains from above, the crowd goes wild]</i></p>'
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : 'At this point you fall into one of these categories:'
|
||
}
|
||
},
|
||
{
|
||
list : {
|
||
type : 'unordered',
|
||
items : [
|
||
`People are cheering around you, but you're not sure what all the fuss is about. Maybe you're not even sure what a "promise" is. You'd shrug, but the weight of glittery paper is weighing down on your shoulders. If so, don't worry about it, it took me ages to work out why I should care about this stuff. You probably want to begin here`,
|
||
`You punch the air! About time right? You've used these Promise things before but it bothers you that all implementations have a slightly different API. What's the API for the official JavaScript version? You probably want to begin here`,
|
||
`You knew about this already and you scoff at those who are jumping up and down like it's news to them. Take a moment to bask in your own superiority, then head straight to the API reference`
|
||
]
|
||
}
|
||
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : 'What\'s all the fuss about?',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : 'JavaScript is single threaded, meaning that two bits of script cannot run at the same time, they have to run one after another. In browsers, JavaScript shares a thread with a load of other stuff. What that stuff is differs from browser to browser, but typically JavaScript is in the same queue as painting, updating styles, and handling user actions (such as highlighting text and interacting with form controls). Activity in one of these things delays the others.'
|
||
}
|
||
},
|
||
{
|
||
link : {
|
||
'linkUrl' : 'http://yandex.ru',
|
||
'linkText' : 'yandex.ru',
|
||
'image' : 'https://yastatic.net/morda-logo/i/apple-touch-icon/ru-76x76.png',
|
||
'title' : 'Яндекс',
|
||
'description' : 'Russian largest Search Engine'
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H3',
|
||
text : 'Promises arrive in JavaScript!',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : 'Promises have been around for a while in the form of libraries, such as:',
|
||
}
|
||
},
|
||
{
|
||
list : {
|
||
type : 'unordered',
|
||
items : [
|
||
'Q',
|
||
'when',
|
||
'WinJS',
|
||
'RSVP.js',
|
||
]
|
||
}
|
||
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "The above and JavaScript promises share a common, standardised behaviour called Promises/A+. If you're a jQuery user, they have something similar called Deferreds. However, Deferreds aren't compliant, which makes them subtly different and less useful, so beware. jQuery also has a Promise type, but this is just a subset of Deferred and has the same issues. Although promise implementations follow a standardised behaviour, their overall APIs differ. JavaScript promises are similar in API to RSVP.js. Here's how you create a promise:",
|
||
}
|
||
},
|
||
{
|
||
code : {
|
||
text : "var promise = new Promise(function(resolve, reject) { // do a thing, possibly async, then… if (/* everything turned out fine */) { resolve('Stuff worked!''); } else reject(Error('It broke')); } });",
|
||
}
|
||
},
|
||
{
|
||
quote : {
|
||
type : 'withCaption',
|
||
text : "But what does this mean for promises? Well, you can use this return/resume behaviour to write async code that looks like (and is as easy to follow as) synchronous code. Don't worry too much about understanding it line-for-line, but here's a helper function that lets us use 'yield' to wait for promises to settle:",
|
||
photo : '',
|
||
author : '— Jake Archibald',
|
||
job : 'CEO Mozilla Firefox',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "The promise constructor takes one argument, a callback with two parameters, resolve and reject. Do something within the callback, perhaps async, then call resolve if everything worked, otherwise call reject.Like 'throw' in plain old JavaScript, it's customary, but not required, to reject with an Error object. The benefit of Error objects is they capture a stack trace, making debugging tools more helpful. Here's how you use that promise:",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : 'Browser support & polyfill',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "There are already implementations of promises in browsers today. As of Chrome 32, Opera 19, Firefox 29, Safari 8 & Microsoft Edge, promises are enabled by default. To bring browsers that lack a complete promises implementation up to spec compliance, or add promises to other browsers and Node.js, check out the polyfill (2k gzipped).",
|
||
}
|
||
},
|
||
{
|
||
link : {
|
||
'linkUrl' : 'http://google.com',
|
||
'linkText' : 'google.com',
|
||
'image' : 'https://2.bp.blogspot.com/-7bZ5EziliZQ/VynIS9F7OAI/AAAAAAAASQ0/BJFntXCAntstZe6hQuo5KTrhi5Dyz9yHgCK4B/s1600/googlelogo_color_200x200.png',
|
||
'title' : 'Google',
|
||
'description' : 'The largest US Search Engine',
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : 'Compatibility with other libraries',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "The JavaScript promises API will treat anything with a then method as promise-like (or thenable in promise-speak *sigh*), so if you use a library that returns a Q promise, that's fine, it'll play nice with the new JavaScript promises. Although, as I mentioned, jQuery's Deferreds are a bit… unhelpful. Thankfully you can cast them to standard promises, which is worth doing as soon as possible:",
|
||
}
|
||
},
|
||
{
|
||
code : {
|
||
text : "var jsPromise = Promise.resolve($.ajax('/whatever.json'));",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : "Complex async code made easier",
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "Right, let's code some things. Say we want to:",
|
||
}
|
||
},
|
||
{
|
||
list : {
|
||
type : 'ordered',
|
||
items : [
|
||
'Start a spinner to indicate loading',
|
||
'Fetch some JSON for a story, which gives us the title, and urls for each chapter',
|
||
'Add title to the page',
|
||
'Fetch each chapter',
|
||
'Add the story to the page',
|
||
'Stop the spinner',
|
||
]
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "…but also tell the user if something went wrong along the way. We'll want to stop the spinner at that point too, else it'll keep on spinning, get dizzy, and crash into some other UI. Of course, you wouldn't use JavaScript to deliver a story, serving as HTML is faster, but this pattern is pretty common when dealing with APIs: Multiple data fetches, then do something when it's all done.",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : "Queuing asynchronous actions",
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "You can also chain 'thens' to run async actions in sequence.When you return something from a 'then' callback, it's a bit magic. If you return a value, the next 'then' is called with that value. However, if you return something promise-like, the next 'then' waits on it, and is only called when that promise settles (succeeds/fails). For example:",
|
||
}
|
||
},
|
||
{
|
||
quote : {
|
||
type : 'simple',
|
||
text : "This is the first time we've seen Promise.resolve, which creates a promise that resolves to whatever value you give it. If you pass it an instance of Promise it'll simply return it (note: this is a change to the spec that some implementations don't yet follow). If you pass it something promise-like (has a 'then' method), it creates a genuine Promise that fulfills/rejects in the same way. If you pass in any other value, eg Promise.resolve('Hello'), it creates a promise that fulfills with that value. If you call it with no value, as above, it fulfills with 'ndefined'",
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "There's also Promise.reject(val), which creates a promise that rejects with the value you give it (or undefined). We can tidy up the above code using array.reduce:",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : "Promise API Reference",
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "All methods work in Chrome, Opera, Firefox, Microsoft Edge, and Safari unless otherwise noted. The polyfill provides the below for all browers.",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : "Static Methods",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H3',
|
||
text : 'Promise.resolve(promise);',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "Returns promise (only if promise.constructor == Promise)",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H3',
|
||
text : 'Promise.resolve(thenable);',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "Make a new promise from the thenable. A thenable is promise-like in as far as it has a 'then' method.",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H3',
|
||
text : 'Promise.resolve(obj);',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "Make a promise that fulfills to obj. in this situation.",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H3',
|
||
text : 'Promise.all(array);',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "Make a promise that rejects to obj. For consistency and debugging (e.g. stack traces), obj should be an instanceof Error.",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H3',
|
||
text : 'Promise.race(array);',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "Make a Promise that fulfills as soon as any item fulfills, or rejects as soon as any item rejects, whichever happens first.",
|
||
}
|
||
},
|
||
{
|
||
header : {
|
||
type : 'H2',
|
||
text : 'Conclution',
|
||
}
|
||
},
|
||
{
|
||
paragraph : {
|
||
text : "promise.then(onFulfilled, onRejected)'onFulfilled is called when/if 'promise' resolves. onRejected is called when/if 'promise' rejects. Both are optional, if either/both are omitted the next <b>onFulfilled/onRejected</b> in the chain is called. Both callbacks have a single parameter, the fulfillment value or rejection reason. 'then' returns a new promise equivalent to the value you return from <b>onFulfilled/onRejected</b> after being passed through Promise.resolve. If an error is thrown in the callback, the returned promise rejects with that <b>error.promise.catch(onRejected)</b> Sugar for promise.then(undefined, onRejected). Many thanks to Anne van Kesteren, Domenic Denicola, Tom Ashworth, Remy Sharp, Addy Osmani, Arthur Evans, and Yutaka Hirano who proofread this and made <b>corrections/recommendations</b>. Also, thanks to Mathias Bynens for updating various parts of the article.",
|
||
}
|
||
}
|
||
|
||
];
|
||
|
||
/**
|
||
* @todo uncomment and append all text to items
|
||
* .....
|
||
*
|
||
* <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>Будьте внимательны, эта команда не добавит новые файлы в индекс. Добавятся только модифицированные старые файлы и удаленные. Новые файлы можно добавить явно указав имя. </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>Теперь зафиксируйте изменения добавленные в индекс:</p> <p><code>$ <span class="sc_keyword">git</span> commit</code></p> <p>Откроется текстовый редактор по-умолчанию для того, чтобы добавить комментарий к коммиту. Распишите, что и зачем вы меняли. Но не перечисляйте список измененных файлов — гит сделает это за вас. Комментарий должен коротким и понятным, например:</p> <p><code>fix| order price</code></p> <p><code>now price includes vat</code></p> <p>Комментарии лучше писать на английском языке, в первую очередь потому, консоль может не поддерживать кириллицу и вместо описания будут кракозяблики.</p> <p>Первая строка самая важная и должна включать суть коммита в нескольких словах. Дальше можете не жалеть строк и расписать подробно что, зачем и почему было изменено (речь про логику, а не про файлы).</p> <p>Теперь можно посмотреть историю изменений, ваш коммит должен в ней отобразиться:</p> <p><code>$ <span class="sc_keyword">git</span> log</code></p> <h2>Заключение</h2> <p>Как видите, ничего сложного.</p> <p>Конечно это далеко не все, что может гит, но именно этого мне не хватало в свое время для того, чтобы начать пользоваться системой контроля версий.</p> </div>
|
||
*/
|
||
|
||
|
||
function ready(f){
|
||
/in/.test(document.readyState) ? setTimeout(ready,9,f) : f();
|
||
};
|
||
|
||
/** Document is ready */
|
||
ready(function() {
|
||
|
||
cEditor.start({
|
||
textareaId: 'codex_editor',
|
||
// tools : ['header', 'list', 'quote', 'code'],
|
||
data : INPUT
|
||
});
|
||
|
||
})
|
||
|
||
</script>
|
||
|
||
<script src="plugins/paragraph/paragraph.js"></script>
|
||
<link rel="stylesheet" href="plugins/paragraph/paragraph.css" />
|
||
|
||
<script src="plugins/header/header.js"></script>
|
||
<link rel="stylesheet" href="plugins/header/header.css" />
|
||
|
||
<script src="plugins/link/link.js"></script>
|
||
<link rel="stylesheet" href="plugins/link/link.css" />
|
||
|
||
<script src="plugins/code/code.js"></script>
|
||
<link rel="stylesheet" href="plugins/code/code.css" />
|
||
|
||
<script src="plugins/quote/quote.js"></script>
|
||
<link rel="stylesheet" href="plugins/quote/quote.css" />
|
||
|
||
<script src="plugins/list/list.js"></script>
|
||
<link rel="stylesheet" href="plugins/list/list.css" />
|
||
|
||
<script src="plugins/images/plugin.js"></script>
|
||
<link rel="stylesheet" href="plugins/images/plugin.css" />
|