Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Bugfixes everywhere

  • Loading branch information...
commit 78c2d5bd4ca2a2f39c2ff755fb9b9453a6bbf248 1 parent 8336cfc
@wolfv authored
View
25 README.md
@@ -7,6 +7,27 @@ A simple, yet versatile field for nice textediting in the Silverstripe CMS. It's
Features:
Suggest Link: `[Testlink](:` leads to an autosuggest-field.
-Suggest Image: `[Image Description](!` opens an image-autosuggest field.
+Suggest Image: `![Image Description](!` opens an image-autosuggest field.
-Credits for Markdown Logo go to Dustin Curtis. All other icons were made by Orman Clark [Premium Pixels](http://www.premiumpixels.com)
+Getting the markdown editor field as a replacement for TinyMCE is easy:
+```php
+public function getCMSFields() {
+ $fields = parent::getCMSFields();
+ $md = new MarkdownField('Content', 'Content');
+ $md->addExtraClass('stacked'); // Little different Layout in CMS
+ $fields->addFieldToTab('Root.Main', $md);
+ return $fields;
+}
+```
+To use the Markdown-Formatted Content on the website, use e.g. instead of `$Content` `$Content.Parse(MarkdownParser)`.
+
+To get the same Syntax Highlighting as in the preview pane inside the Editor, include `markdown/javascript/lib/highlight/src/highlight.pack.js` to your template. Initialization could look like this (with jQuery):
+```javascript
+$(document).ready(function() {
+ $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
+});
+```
+
+More examples are on [http://softwaremaniacs.org/soft/highlight/en/description/](http://softwaremaniacs.org/soft/highlight/en/description/) (All credit to them)
+
+The Markdown Logo was made by Dustin Curtis. All other icons were made by Orman Clark [Premium Pixels](http://www.premiumpixels.com)
View
6 code/MarkdownField.php
@@ -24,7 +24,7 @@ function linksuggest() {
$search = $this->request["search"];
$data = DataList::create('SiteTree')->filter(array("Title:StartsWith" => $search));
- $result;
+ $result = array();
foreach($data as $item) {
$result[] = array("Label" => $item->Title, "Breadcrumbs" => $item->Breadcrumbs(20, true, false, false), "ID" => $item->ID);
@@ -42,12 +42,12 @@ function getlinktoid() {
function imagesuggest() {
$search = $this->request["search"];
$data = DataList::create('Image')->filter(array("Title:PartialMatch" => $search));
- $result;
+
+ $result = array();
foreach($data as $item) {
$result[] = array("ImageLink" => $item->CMSThumbnail()->Link(), "Label" => $item->Title, "ID" => $item->ID);
}
- //$data_array = $data->toNestedArray();
return json_encode($result);
}
View
1  code/MarkdownParser.php
@@ -2,7 +2,6 @@
require_once('lib/markdown/markdown.php');
require_once('lib/markdown/markdown_extended.php');
-require_once('lib/phphyphenator/hyphenation.php');
class MarkdownParser extends TextParser {
function parse() {
View
26 css/md.css
@@ -49,25 +49,27 @@ textarea.markdown { display: none; }
#markdown_PreviewContent { overflow-y: hidden; padding: 5px; background: white; }
/* line 95, ../scss/md.sass */
-.autocomplete { border: none; color: #3875d7; height: 15px; font-size: 12px; font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; background: white; padding: 0px; background: white; width: 200px; position: absolute; top: 10px; right: 100px; display: none; }
-/* line 109, ../scss/md.sass */
+.autocomplete { border: none; color: #3875d7; height: 15px; font-size: 12px; font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; padding: 0px; background: #dddddd; width: 200px; position: absolute; top: 10px; right: 100px; display: none; }
+/* line 108, ../scss/md.sass */
.autocomplete:focus { outline: none; border: none; }
-/* line 112, ../scss/md.sass */
-.ui-autocomplete { list-style-type: none; width: 200px; margin: 0; padding: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; }
+/* line 111, ../scss/md.sass */
+.ui-autocomplete { list-style-type: none; width: 200px; margin: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; border: 2px solid black; padding: 1px; }
/* line 118, ../scss/md.sass */
-.ui-autocomplete .ui-menu-item { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; padding: 2px; display: block; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; font-size: 12px; line-height: 15px; background: #f9f9f9; clear: both; border-bottom: 1px solid #cccccc; }
-/* line 128, ../scss/md.sass */
-.ui-autocomplete .ui-menu-item:last-child { border-bottom: 0; }
+.ui-autocomplete .ui-menu-item { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace; display: block; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; font-size: 12px; line-height: 12px; background: #f9f9f9; clear: both; border-bottom: 1px solid #cccccc; }
+/* line 127, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item a { padding: 3px; display: block; }
/* line 130, ../scss/md.sass */
-.ui-autocomplete .ui-menu-item .image_suggest_item { display: inline-block; }
+.ui-autocomplete .ui-menu-item:last-child { border-bottom: 0; }
/* line 132, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item .image_suggest_item { display: inline-block; }
+/* line 134, ../scss/md.sass */
.ui-autocomplete .ui-menu-item .autosuggest_breadcrumb { display: block; color: #999999; font-size: 10px; line-height: 10px; }
-/* line 137, ../scss/md.sass */
+/* line 139, ../scss/md.sass */
.ui-autocomplete .ui-menu-item .autosuggest_title { display: block; color: black; }
-/* line 140, ../scss/md.sass */
-.ui-autocomplete .ui-menu-item a { display: block; }
/* line 142, ../scss/md.sass */
+.ui-autocomplete .ui-menu-item a { display: block; }
+/* line 144, ../scss/md.sass */
.ui-autocomplete .ui-menu-item .ui-state-hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(20%, #3875d7), color-stop(90%, #2a62bc)); background-image: -webkit-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -moz-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -o-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: -ms-linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-image: linear-gradient(top, #3875d7 20%, #2a62bc 90%); background-color: #3875d7; color: white; }
-/* line 146, ../scss/md.sass */
+/* line 148, ../scss/md.sass */
.ui-autocomplete .ui-menu-item .image_suggest_img { margin-right: 5px; float: left; }
View
87 javascript/markdownEditor.js
@@ -19,26 +19,28 @@ function getContents() {
*/
+window.autocomplete = null;
+
(function($) {
$.entwine('ss', function($){
-
$('#markdown_Editor').entwine({
Editor: null,
AutoCompleteBuffer: null,
onmatch: function() {
- window.editor = ace.edit(this[0]);
+ var editor = window.editor = ace.edit(this[0]);
this.setEditor(window.editor);
var MarkdownMode = require("ace/mode/markdown").Mode;
- this.getEditor().getSession().setUseWrapMode(true);
- this.getEditor().getSession().setValue($('#markdown_Value').text());
- this.getEditor().getSession().setMode(new MarkdownMode());
+ editor.getSession().setUseWrapMode(true);
+ editor.getSession().setValue($('#markdown_Value').text());
+ editor.getSession().setMode(new MarkdownMode());
self = this;
- this.getEditor().on('change', function(arg, ev) {self.editorChange(arg, ev);});
-
+ editor.on('change', function(arg, ev) {
+ self.editorChange(arg);
+ })
},
editorChange: function(arg) {
if(arg.data.text == ':' || arg.data.text == '!') {
@@ -47,9 +49,11 @@ function getContents() {
var s = e.session.getTokenAt(r.end.row);
if(s.value.substring(s.value.length, s.value.length - 3) == '](:') {
$('#markdown_SiteTreeAutocomplete').activate();
+ window.autocomplete = "sitetree";
}
else if(s.value.substring(s.value.length, s.value.length - 3) == '](!') {
$('#markdown_ImageAutocomplete').activate();
+ window.autocomplete = "image"
}
}
},
@@ -59,26 +63,13 @@ function getContents() {
insertText: function(text, clearBefore) {
this.getEditor().remove('left');
this.getEditor().insert(text);
- this.getEditor().focus();
+ //this.getEditor().focus();
},
focusEditor: function() {
this.getEditor().focus();
},
- test: function() {
- var ed = this.getEditor();
-
- if (ed.selection.isEmpty()) {
- ed.insert('test');
- ed.navigateLeft(2);
- }
- else {
- var originalRange = ed.getSelectionRange();
- var range = ed.getSelectionRange();
- var text = ed.session.getTextRange(range);
- ed.session.replace(range, '*test*');
- ed.selection.setSelectionRange(originalRange + 2);
- }
- ed.focus();
+ blurEditor: function() {
+ this.getEditor().blur()
}
});
@@ -93,11 +84,9 @@ function getContents() {
this.bind('forceReload', function() {
console.log('at least.')
});
- //this.startWatching();
},
close: function() {
this.parent().css('opacity', 0);
- //this.stopWatching();
this.setOpen(false);
},
open: function() {
@@ -156,20 +145,6 @@ function getContents() {
}
});
- $('.markdown_italic').entwine({
- onclick: function() {
- $('#markdown_Editor').test();
- }
- });
-
- $('.markdown_ssimage').entwine({
- onmatch: function() {
- console.log('asd');
- },
- onclick: function() {
- console.log('asd');
- }
- });
$('#markdown_SiteTreeAutocomplete').entwine({
onmatch: function() {
var linksuggest = $(this).attr('linksuggest');
@@ -197,8 +172,7 @@ function getContents() {
});
},
minLength: 1,
- select: function( event, ui ) {
-
+ change: function( event, ui ) {
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
@@ -209,15 +183,16 @@ function getContents() {
});
},
activate: function() {
- var pos = $('.ace_cursor').first().position();
- this.appendTo('.ace_content').css({top: pos.top, left: pos.left + 5}).show().focus();
this.val('');
+ var pos = $('.ace_cursor').first().position();
+ this.appendTo('.ace_content').css({top: pos.top, left: pos.left + 5, background: '#CCC', minWidth: '10px'}).show();
},
- onblur: function() {
- this.deactivate();
+ onfocusout: function() {
+ //this.deactivate();
},
deactivate: function() {
this.css('display', 'none');
+ window.autocomplete = null;
$('#markdown_Editor').focusEditor();
},
onkeydown: function(e) {
@@ -227,13 +202,12 @@ function getContents() {
$(this).attr('findlink'),
{ID: $(this).val()},
function(data) {
- $('#markdown_Editor').insertText(data + ')', 1);
- bj}
+ $('#markdown_Editor').insertText(data + ')', 0);
+ }
);
this.deactivate();
}
}
-
});
$('#markdown_ImageAutocomplete').entwine({
@@ -259,7 +233,6 @@ function getContents() {
value: item.ID
}
}));
- return result(responseArray);
},
error: function(data) {
console.log(data);
@@ -283,11 +256,9 @@ function getContents() {
this.appendTo('.ace_content').css({top: pos.top, left: pos.left + 5}).show().focus();
this.val('');
},
- onblur: function() {
- this.deactivate();
- },
deactivate: function() {
this.css('display', 'none');
+ window.autocomplete = null;
$('#markdown_Editor').focusEditor();
},
onkeydown: function(e) {
@@ -298,7 +269,7 @@ function getContents() {
{ID: $(this).val()},
function(data) {
$('#markdown_Editor').insertText(data + ')', 1);
- bj}
+ }
);
this.deactivate();
}
@@ -307,4 +278,14 @@ function getContents() {
});
});
+ $(document).on('keydown', function(e) {
+ if(window.autocomplete != null && window.autocomplete != 'focused') {
+ if(window.autocomplete == 'sitetree') {
+ $('#markdown_SiteTreeAutocomplete').focus();
+ } else {
+ $('#markdown_ImageAutocomplete').focus();
+ }
+ window.autocomplete = 'focused';
+ }
+ })
})(jQuery)
View
8 javascript/markdownField.js
@@ -7,9 +7,10 @@
onmatch: function() {
self = this;
this.setEditorFrame(self[0].contentWindow);
- this.closest('form').bind('beforesave', function() {
- var value = EditorFrame.editor.getSession().getValue();
- self.parent().find('textarea.markdown').val(value);
+ this.closest('form').bind('beforesubmitform',
+ function() {
+ var value = self.getEditorFrame().editor.getSession().getValue();
+ self.parent().find('textarea.markdown').val(value);
});
}
});
@@ -81,6 +82,7 @@
dialog.html($('<iframe>').attr('src', url));
}
+ return false;
}
});
$('#MDEditorQuickPreview').entwine({
View
14 scss/md.sass
@@ -98,9 +98,8 @@ textarea.markdown
height: 15px
font-size: 12px
font-family: $font
- background: #FFF
padding: 0px
- background: #FFF
+ background: #DDD
width: 200px
position: absolute
top: 10px
@@ -113,18 +112,21 @@ textarea.markdown
list-style-type: none
width: 200px
margin: 0
- padding: 2px
- +border-radius(2px)
+ +border-radius(3px)
+ border: 2px solid #000
+ padding: 1px
.ui-menu-item
font-family: $font
- padding: 2px
display: block
+border-radius(0)
font-size: 12px
- line-height: 15px
+ line-height: 12px
background: #F9F9F9
clear: both
border-bottom: 1px solid #CCC
+ a
+ padding: 3px
+ display: block
&:last-child
border-bottom: 0
.image_suggest_item
View
4 templates/MarkdownEditor.ss
@@ -16,8 +16,8 @@
<div class="x"></div>
<div id="markdown_Helper">
- <input id="markdown_SiteTreeAutocomplete" class="autocomplete" linksuggest="$LinkSuggest" findlink="$FindLink">
- <input id="markdown_ImageAutocomplete" class="autocomplete" linksuggest="$ImageSuggest" findlink="$FindImageLink">
+ <input id="markdown_SiteTreeAutocomplete" type="text" class="autocomplete" linksuggest="$LinkSuggest" findlink="$FindLink" />
+ <input id="markdown_ImageAutocomplete" class="autocomplete" linksuggest="$ImageSuggest" findlink="$FindImageLink" type="text" />
</div>
</body>
Please sign in to comment.
Something went wrong with that request. Please try again.