mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-29 13:42:38 +00:00
Integrated the markdown editor with the image manager
This commit is contained in:
parent
26965fa08f
commit
efb49019d4
@ -1,6 +1,6 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
var DropZone = require('dropzone');
|
var DropZone = require('dropzone');
|
||||||
var markdown = require( "marked" );
|
var markdown = require('marked');
|
||||||
|
|
||||||
var toggleSwitchTemplate = require('./components/toggle-switch.html');
|
var toggleSwitchTemplate = require('./components/toggle-switch.html');
|
||||||
var imagePickerTemplate = require('./components/image-picker.html');
|
var imagePickerTemplate = require('./components/image-picker.html');
|
||||||
@ -201,9 +201,9 @@ module.exports = function (ngApp, events) {
|
|||||||
tinymce.init(scope.tinymce);
|
tinymce.init(scope.tinymce);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}])
|
}]);
|
||||||
|
|
||||||
ngApp.directive('markdownEditor', ['$timeout', function($timeout) {
|
ngApp.directive('markdownInput', ['$timeout', function($timeout) {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
scope: {
|
scope: {
|
||||||
@ -231,6 +231,50 @@ module.exports = function (ngApp, events) {
|
|||||||
scope.mdChange(markdown(value));
|
scope.mdChange(markdown(value));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}]);
|
||||||
|
|
||||||
|
ngApp.directive('markdownEditor', ['$timeout', function($timeout) {
|
||||||
|
return {
|
||||||
|
restrict: 'A',
|
||||||
|
link: function (scope, element, attrs) {
|
||||||
|
|
||||||
|
// Elements
|
||||||
|
var input = element.find('textarea[markdown-input]');
|
||||||
|
var insertImage = element.find('button[data-action="insertImage"]');
|
||||||
|
|
||||||
|
var currentCaretPos = 0;
|
||||||
|
|
||||||
|
input.blur((event) => {
|
||||||
|
currentCaretPos = input[0].selectionStart;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Insert image shortcut
|
||||||
|
input.keydown((event) => {
|
||||||
|
if (event.which === 73 && event.ctrlKey && event.shiftKey) {
|
||||||
|
event.preventDefault();
|
||||||
|
var caretPos = input[0].selectionStart;
|
||||||
|
var currentContent = input.val();
|
||||||
|
var mdImageText = "![](http://)";
|
||||||
|
input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
|
||||||
|
input.focus();
|
||||||
|
input[0].selectionStart = caretPos + ("![](".length);
|
||||||
|
input[0].selectionEnd = caretPos + ('![](http://'.length);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Insert image from image manager
|
||||||
|
insertImage.click((event) => {
|
||||||
|
window.ImageManager.showExternal((image) => {
|
||||||
|
var caretPos = currentCaretPos;
|
||||||
|
var currentContent = input.val();
|
||||||
|
var mdImageText = "![" + image.name + "](" + image.url + ")";
|
||||||
|
input.val(currentContent.substring(0, caretPos) + mdImageText + currentContent.substring(caretPos));
|
||||||
|
input.change();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}])
|
}])
|
||||||
|
@ -39,45 +39,43 @@
|
|||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
&:focus {
|
&:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.markdown-display, .markdown-editor-wrap {
|
.markdown-display, .markdown-editor-wrap {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-top: 28px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
}
|
||||||
|
.markdown-editor-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
border: 1px solid #DDD;
|
border: 1px solid #DDD;
|
||||||
&:before {
|
}
|
||||||
display: block;
|
.markdown-display {
|
||||||
position: absolute;
|
padding: 0 $-m 0;
|
||||||
top: 0;
|
margin-left: -1px;
|
||||||
left: 0;
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.editor-toolbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: $-xs $-m;
|
padding: $-xs $-m;
|
||||||
font-family: 'Roboto Mono';
|
font-family: 'Roboto Mono';
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
line-height: 1;
|
line-height: 1.6;
|
||||||
border-bottom: 1px solid #DDD;
|
border-bottom: 1px solid #DDD;
|
||||||
background-color: #EEE;
|
background-color: #EEE;
|
||||||
}
|
flex: none;
|
||||||
}
|
&:after {
|
||||||
.markdown-editor-wrap {
|
content: '';
|
||||||
display: flex;
|
display: block;
|
||||||
&:before {
|
clear: both;
|
||||||
content: 'Editor';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.markdown-display {
|
|
||||||
padding: 0 $-m;
|
|
||||||
padding-top: 28px;
|
|
||||||
margin-left: -1px;
|
|
||||||
&:before {
|
|
||||||
content: 'Preview';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: block;
|
display: block;
|
||||||
line-height: 1.4em;
|
line-height: 1.4em;
|
||||||
|
@ -51,16 +51,28 @@
|
|||||||
@endif
|
@endif
|
||||||
|
|
||||||
@if(config('app.editor') === 'markdown')
|
@if(config('app.editor') === 'markdown')
|
||||||
<div id="markdown-editor" class="flex-fill flex">
|
<div id="markdown-editor" markdown-editor class="flex-fill flex">
|
||||||
|
|
||||||
<div class="markdown-editor-wrap">
|
<div class="markdown-editor-wrap">
|
||||||
<textarea markdown-editor md-change="editorChange" md-model="editContent" name="markdown" rows="5"
|
<div class="editor-toolbar">
|
||||||
|
<span class="float left">Editor</span>
|
||||||
|
<div class="float right buttons">
|
||||||
|
<button class="text-button" type="button" data-action="insertImage"><i class="zmdi zmdi-image"></i>Insert Image</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea markdown-input md-change="editorChange" md-model="editContent" name="markdown" rows="5"
|
||||||
@if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
|
@if($errors->has('markdown')) class="neg" @endif>@if(isset($model) || old('markdown')){{htmlspecialchars( old('markdown') ? old('markdown') : ($model->markdown === '' ? $model->html : $model->markdown))}}@endif</textarea>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="markdown-editor-wrap">
|
||||||
|
<div class="editor-toolbar">
|
||||||
|
<div class="">Preview</div>
|
||||||
|
</div>
|
||||||
<div class="markdown-display page-content" ng-bind-html="displayContent"></div>
|
<div class="markdown-display page-content" ng-bind-html="displayContent"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<input type="hidden" name="html" ng-value="displayContent">
|
<input type="hidden" name="html" ng-value="displayContent">
|
||||||
|
|
||||||
@if($errors->has('markdown'))
|
@if($errors->has('markdown'))
|
||||||
|
Loading…
Reference in New Issue
Block a user