deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2026-03-18 08:29:52 +01:00
Code Issues Projects Releases Wiki Activity

Toolbar, Toolbox, UI (#239)

Browse source 
* Toolbox making

* Add Toolbox buttons click handler

* Toolbar, Toolbox, UI

* Updates

* update css prefix
This commit is contained in:
Peter Savchenko 2017-12-24 15:35:05 +03:00 • committed by GitHub
commit c1afcf0205
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
32 changed files with 2811 additions and 1276 deletions
Download patch file Download diff file Expand all files Collapse all files

35
example/example.html
View file

@ -9,11 +9,6 @@
font-size: 14px;
line-height: 1.5em;
}
#codex-editor {
margin: 0 auto;
max-width: 800px;
}
</style>
</head>
<body>
@ -22,8 +17,8 @@
</body>
<script src="plugins/paragraph/paragraph.js?v=100"></script>
<link rel="stylesheet" href="plugins/paragraph/paragraph.css">
<script src="plugins/text/text.js?v=100"></script>
<link rel="stylesheet" href="plugins/text/text.css">
<!--<script src="plugins/header/header.js"></script>-->
<!--<link rel="stylesheet" href="plugins/header/header.css">-->
@ -65,9 +60,9 @@
codex.editor = 1;
var editor = new CodexEditor({
holderId : 'codex-editor',
initialBlock : 'paragraph',
initialBlock : 'text',
tools: {
paragraph: Paragraph,
text: Text,
},
toolsConfig: {
quote: {
@ -79,13 +74,13 @@
data: {
items: [
{
type : 'paragraph',
type : 'text',
data : {
text : 'Привет от CodeX'
}
},
{
type : 'paragraph',
type : 'text',
data : {
text : 'Пишите нам на team@ifmo.su'
}
@ -100,17 +95,17 @@
// });
// codex.editor.start({
// holderId : "codex-editor",
// initialBlockPlugin : 'paragraph',
// initialBlockPlugin : 'text',
// // placeholder: 'Прошлой ночью мне приснилось...',
// hideToolbar: false,
// tools : {
// paragraph: {
// type: 'paragraph',
// iconClassname: 'ce-icon-paragraph',
// render: paragraph.render,
// validate: paragraph.validate,
// save: paragraph.save,
// destroy: paragraph.destroy,
// text: {
// type: 'text',
// iconClassname: 'ce-icon-text',
// render: text.render,
// validate: text.validate,
// save: text.save,
// destroy: text.destroy,
// allowedToPaste: true,
// showInlineToolbar: true,
// allowRenderOnPaste: true
@ -272,7 +267,7 @@
// }
// },
// {
// type : 'paragraph',
// type : 'text',
// data : {
// text : 'Пишите нам на team@ifmo.su'
// }

7
example/plugins/paragraph/paragraph.css → example/plugins/text/text.css
View file

@ -2,9 +2,10 @@
* Empty paragraph placeholder
*/
.ce-paragraph {
padding: 0.7em 0 !important;
line-height: 1.7em;
.ce-text {
padding: 15px 0 !important;
line-height: 1.6em;
outline: none;
}
.ce-paragraph:empty::before,

37
example/plugins/paragraph/paragraph.js → example/plugins/text/text.js
View file

@ -1,5 +1,5 @@
/**
* @class Paragraph
* @class Text
* @classdesc Paragraph plugin for CodexEditor
*
* @author CodeX Team (team@ifmo.su)
@ -8,33 +8,44 @@
* @version 2.0.0
*
*
* @typedef {Object} ParagraphData
* @property {String} text — HTML content to insert to paragraph element
* @typedef {Object} TextData
* @property {String} text — HTML content to insert to text element
*
*/
class Paragraph {
class Text {
/**
* Get the name of the plugin
* Pass true to display this tool in the Editor's Toolbox
*
* @returns {string} The plugin name
* @returns {boolean}
*/
static get name() {
static get displayInToolbox() {
return 'paragraph';
return true;
}
/**
* Class for the Toolbox icon
*
* @returns {string}
*/
static get iconClassName() {
return 'cdx-text-icon';
}
/**
* Render plugin`s html and set initial content
*
* @param {ParagraphData} data — initial plugin content
* @param {TextData} data — initial plugin content
*/
constructor(data = {}) {
this._CSS = {
wrapper: 'ce-paragraph'
wrapper: 'ce-text'
};
this._data = {};
@ -65,7 +76,7 @@ class Paragraph {
/**
* Check if saved text is empty
*
* @param {ParagraphData} savedData — data received from plugins`s element
* @param {TextData} savedData — data received from plugins`s element
* @returns {boolean} false if saved text is empty, true otherwise
*/
validate(savedData) {
@ -96,7 +107,7 @@ class Paragraph {
*
* @todo sanitize data while saving
*
* @returns {ParagraphData} Current data
* @returns {TextData} Current data
*/
get data() {
@ -111,7 +122,7 @@ class Paragraph {
/**
* Set new data for plugin
*
* @param {ParagraphData} data — data to set
* @param {TextData} data — data to set
*/
set data(data) {