Permalink
Browse files

codemirror editing of blog posts

  • Loading branch information...
peterbe committed Apr 16, 2012
1 parent 44aaffe commit 712e37976c6fc3ecccfc3ad8f72845f772842296
@@ -2,17 +2,32 @@
{% block title_prefix %}{{ page_title }}{% endblock %}
{% block extrahead %}
+<link rel="stylesheet" href="{{ static("libs/codemirror/codemirror.css") }}">
+<!--<link rel="stylesheet" href="{{ static("libs/codemirror/docs.css") }}">-->
<style>
#id_oid, #id_title { width:50%; }
#id_text, #id_summary, #id_url { width:100%; }
#thumbnails {height:180px;
overflow-y:scroll;}
#thumbnails input { font-size:80%; height:11px; }
+
+/* override what bootstrap set */
+pre { line-height: 15px; }
+#id_text { height: 600px; }
+#id_summary { height: 85px; }
+/* override CodeMirror */
+.CodeMirror-scroll { height: 400px; }
+.CodeMirror { border-top: 1px solid #999; border-bottom: 1px solid #999; }
</style>
{% endblock %}
{% block extrajs %}
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+<script src="{{ static("libs/codemirror/codemirror.js") }}"></script>
+<script src="{{ static("libs/codemirror/modes/xml.js") }}"></script>
+<script src="{{ static("libs/codemirror/modes/markdown.js") }}"></script>
+<script src="{{ static("libs/codemirror/modes/gfm.js") }}"></script>
+<script src="{{ static("libs/codemirror/modes/rst.js") }}"></script>
<script src="{{ static("js/editpost.js") }}"></script>
{% endblock %}
@@ -75,4 +75,25 @@ $(function() {
Thumbnails();
+ var display_format = $('#id_display_format').val();
+ if (display_format === 'markdown' || display_format === 'structuredtext') {
+ var mode;
+ if (display_format == 'markdown')
+ mode = 'gfm'; // github flavoured markdown
+ else if (display_format == 'structuredtext')
+ mode = 'rst'; // reStructuredText
+
+ var editor = CodeMirror.fromTextArea(document.getElementById("id_text"), {
+ mode: mode,
+ lineWrapping: true,
+ lineNumbers: true,
+ matchBrackets: true,
+ onBlur: function() {
+ $('#id_text').val(editor.getValue());
+ Preview.update();
+ }//,
+ //theme: "default"
+ });
+ }
+
});
@@ -0,0 +1,112 @@
+.CodeMirror {
+ line-height: 1em;
+ font-family: monospace;
+}
+
+.CodeMirror-scroll {
+ overflow: auto;
+ height: 300px;
+ /* This is needed to prevent an IE[67] bug where the scrolled content
+ is visible outside of the scrolling box. */
+ position: relative;
+ outline: none;
+}
+
+.CodeMirror-gutter {
+ position: absolute; left: 0; top: 0;
+ z-index: 10;
+ background-color: #f7f7f7;
+ border-right: 1px solid #eee;
+ min-width: 2em;
+ height: 100%;
+}
+.CodeMirror-gutter-text {
+ color: #aaa;
+ text-align: right;
+ padding: .4em .2em .4em .4em;
+ white-space: pre !important;
+}
+.CodeMirror-lines {
+ padding: .4em;
+ white-space: pre;
+}
+
+.CodeMirror pre {
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+ border-width: 0; margin: 0; padding: 0; background: transparent;
+ font-family: inherit;
+ font-size: inherit;
+ padding: 0; margin: 0;
+ white-space: pre;
+ word-wrap: normal;
+}
+
+.CodeMirror-wrap pre {
+ word-wrap: break-word;
+ white-space: pre-wrap;
+}
+.CodeMirror-wrap .CodeMirror-scroll {
+ overflow-x: hidden;
+}
+
+.CodeMirror textarea {
+ outline: none !important;
+}
+
+.CodeMirror pre.CodeMirror-cursor {
+ z-index: 10;
+ position: absolute;
+ visibility: hidden;
+ border-left: 1px solid black;
+ border-right:none;
+ width:0;
+}
+.CodeMirror pre.CodeMirror-cursor.CodeMirror-overwrite {}
+.CodeMirror-focused pre.CodeMirror-cursor {
+ visibility: visible;
+}
+
+div.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; }
+
+.CodeMirror-searching {
+ background: #ffa;
+ background: rgba(255, 255, 0, .4);
+}
+
+/* Default theme */
+
+.cm-s-default span.cm-keyword {color: #708;}
+.cm-s-default span.cm-atom {color: #219;}
+.cm-s-default span.cm-number {color: #164;}
+.cm-s-default span.cm-def {color: #00f;}
+.cm-s-default span.cm-variable {color: black;}
+.cm-s-default span.cm-variable-2 {color: #05a;}
+.cm-s-default span.cm-variable-3 {color: #085;}
+.cm-s-default span.cm-property {color: black;}
+.cm-s-default span.cm-operator {color: black;}
+.cm-s-default span.cm-comment {color: #a50;}
+.cm-s-default span.cm-string {color: #a11;}
+.cm-s-default span.cm-string-2 {color: #f50;}
+.cm-s-default span.cm-meta {color: #555;}
+.cm-s-default span.cm-error {color: #f00;}
+.cm-s-default span.cm-qualifier {color: #555;}
+.cm-s-default span.cm-builtin {color: #30a;}
+.cm-s-default span.cm-bracket {color: #cc7;}
+.cm-s-default span.cm-tag {color: #170;}
+.cm-s-default span.cm-attribute {color: #00c;}
+.cm-s-default span.cm-header {color: #a0a;}
+.cm-s-default span.cm-quote {color: #090;}
+.cm-s-default span.cm-hr {color: #999;}
+.cm-s-default span.cm-link {color: #00c;}
+
+span.cm-header, span.cm-strong {font-weight: bold;}
+span.cm-em {font-style: italic;}
+span.cm-emstrong {font-style: italic; font-weight: bold;}
+span.cm-link {text-decoration: underline;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
Oops, something went wrong.

0 comments on commit 712e379

Please sign in to comment.