diff options
author | Edgar Zanella Alvarenga | 2018-06-19 16:03:32 +0200 |
---|---|---|
committer | Edgar Zanella Alvarenga | 2018-06-19 16:03:56 +0200 |
commit | a8b664fdb5b425625928d0ce6ae9cdbd78fb3833 (patch) | |
tree | 796556715b880d7d76f27bf3ad38e06fea3fd358 /public/js/lib/editor/index.js | |
parent | 82c7f9d07cfecfc110af8c8fc0e47edf070596b2 (diff) |
Add a toolbar to Codemirror editor
Signed-off-by: Edgar Zanella Alvarenga <e@vaz.io>
Diffstat (limited to '')
-rw-r--r-- | public/js/lib/editor/index.js | 87 |
1 files changed, 87 insertions, 0 deletions
diff --git a/public/js/lib/editor/index.js b/public/js/lib/editor/index.js index bc228b7b..cb9192bc 100644 --- a/public/js/lib/editor/index.js +++ b/public/js/lib/editor/index.js @@ -1,6 +1,7 @@ import * as utils from './utils' import config from './config' import statusBarTemplate from './statusbar.html' +import toolBarTemplate from './toolbar.html' /* config section */ const isMac = CodeMirror.keyMap.default === CodeMirror.keyMap.macDefault @@ -136,6 +137,92 @@ export default class Editor { }) } + addToolBar () { + this.toolBar = $(toolBarTemplate) + //console.log('PLACE', $('#toolbarPlace')) + //$('#toolbarPlace').html(this.toolBar) + this.toolbarPanel = this.editor.addPanel(this.toolBar[0], { + position: 'top' + }) + + var insertDemo = $('#insertDemo') + var makeBold = $('#makeBold') + var makeItalic = $('#makeItalic') + var makeStrike = $('#makeStrike') + var makeHeader = $('#makeHeader') + var makeCode = $('#makeCode') + var makeQuote = $('#makeQuote') + var makeGenericList = $('#makeGenericList') + var makeOrderedList = $('#makeOrderedList') + var makeCheckList = $('#makeCheckList') + var makeLink = $('#makeLink') + var makeImage = $('#makeImage') + var makeTable = $('#makeTable') + var makeLine = $('#makeLine') + var makeComment = $('#makeComment') + + makeBold.click(() => { + utils.wrapTextWith(this.editor, this.editor, '**') + this.editor.focus() + }) + + makeItalic.click(() => { + utils.wrapTextWith(this.editor, this.editor, '*') + this.editor.focus() + }) + + makeStrike.click(() => { + utils.wrapTextWith(this.editor, this.editor, '~~') + this.editor.focus() + }) + + makeHeader.click(() => { + utils.insertHeader(this.editor) + }) + + makeCode.click(() => { + utils.wrapTextWith(this.editor, this.editor, '```') + this.editor.focus() + }) + + makeQuote.click(() => { + utils.insertOnStartOfLines(this.editor, '> ') + }) + + makeGenericList.click(() => { + utils.insertOnStartOfLines(this.editor, '* ') + }) + + makeOrderedList.click(() => { + utils.insertOnStartOfLines(this.editor, '1. ') + }) + + makeCheckList.click(() => { + utils.insertOnStartOfLines(this.editor, '- [ ] ') + }) + + makeLink.click(() => { + utils.insertText(this.editor, '[](https://)', 1) + }) + + makeImage.click(() => { + utils.insertText(this.editor, '![](https://)', 4) + }) + + makeTable.click(() => { + utils.insertText(this.editor, '\n\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |\n') + }) + + makeLine.click(() => { + utils.insertText(this.editor, '\n----\n') + }) + + makeComment.click(() => { + utils.insertText(this.editor, '> []', 4) + }) + + } + addStatusBar () { this.statusBar = $(statusBarTemplate) this.statusCursor = this.statusBar.find('.status-cursor > .status-line-column') |