added a new item content type: markdown
- emacs editor has an option to select markdown, now it has two planes: one for content editing and the other to show preview - CodeMirror editor updated to 5.64.0 - to convert markdown to html we use showdown https://github.com/showdownjs/showdown (conversion is done on the client side)
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
|
||||
<div class="uk-margin">
|
||||
|
||||
[if false]
|
||||
[if winix_function_is "upload"]
|
||||
<label class="uk-form-label" for="winix_content_id">{upload_content}</label>
|
||||
[else]
|
||||
@@ -8,10 +9,56 @@
|
||||
[if mount_type_is "thread"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_thread}</label>[end]
|
||||
[if mount_type_is "ticket"]<label class="uk-form-label" for="winix_content_id">{form_emacs_content_ticket}</label>[end]
|
||||
[end]
|
||||
[end]
|
||||
|
||||
<div class="uk-form-controls">
|
||||
[# CodeMirror doesn't work correctly inside fieldset tag -- horizontal scroll is broken]
|
||||
<textarea class="uk-textarea" [if request.is_item]autofocus [end]id="winix_content_id" rows="[if winix_function_is "upload"]7[else][if mount_type_is "cms"]30[else]10[end][end]" cols="60" name="itemcontent">[item.content.content_raw]</textarea>
|
||||
|
||||
|
||||
<div class="uk-flex uk-child-width-1-2">
|
||||
|
||||
<textarea
|
||||
style="height: 1000px"
|
||||
class="uk-textareaa"
|
||||
[if request.is_item]autofocus [end]
|
||||
id="winix_content_id"
|
||||
rows="[if winix_function_is "upload"]7[else][if mount_type_is "cms"]300[else]300[end][end]"
|
||||
cols="60" name="itemcontent">[item.content.content_raw]</textarea>
|
||||
|
||||
<div class="uk-margin-left" id="winix_output_preview">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
[if false]
|
||||
<ul uk-tab>
|
||||
<li><a href="#">{upload_content_edit}</a></li>
|
||||
<li><a href="#">{upload_content_preview}</a></li>
|
||||
</ul>
|
||||
|
||||
<ul class="uk-switcher">
|
||||
|
||||
<li>
|
||||
<textarea
|
||||
style="height: 1000px"
|
||||
class="uk-textarea"
|
||||
[if request.is_item]autofocus [end]
|
||||
id="winix_content_id"
|
||||
rows="[if winix_function_is "upload"]7[else][if mount_type_is "cms"]300[else]300[end][end]"
|
||||
cols="60" name="itemcontent">[item.content.content_raw]</textarea>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="uk-margin-left" id="winix_output_preview">
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
[end]
|
||||
|
||||
<input type="hidden" id="winix_content_parsed_id" value="" name="itemcontent_parsed">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -22,9 +69,16 @@
|
||||
<option[if item.content.type_is "text"] selected[end] value="0">{form_emacs_content_type_text}</option>
|
||||
<option[if item.content.type_is "formatted text"] selected[end] value="1">{form_emacs_content_type_formatted_text}</option>
|
||||
[if user_can_use_html]<option[if item.content.type_is "html"] selected[end] value="2">{form_emacs_content_type_html}</option>[end]
|
||||
[if user_can_use_bbcode]<option[if item.content.type_is "bbcode"] selected[end] value="3">{form_emacs_content_type_bbcode}</option>[end]
|
||||
[if user_can_use_html]<option[if item.content.type_is "markdown"] selected[end] value="5">{form_emacs_content_type_markdown}</option>[end]
|
||||
[if user_can_use_other]<option[if item.content.type_is "other"] selected[end] value="4">{form_emacs_content_type_other}</option>[end]
|
||||
</select>
|
||||
|
||||
|
||||
[if false]
|
||||
[if user_can_use_bbcode]<option[if item.content.type_is "bbcode"] selected[end] value="3">{form_emacs_content_type_bbcode}</option>[end]
|
||||
[end]
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@@ -69,28 +69,36 @@
|
||||
|
||||
|
||||
[if or [winix_function_is "emacs"] [winix_function_is "env"] [winix_function_is "meta"]]
|
||||
<script type="text/javascript" src="[doc_base_url_common]/codemirror/5.59.2/lib/codemirror.js"></script>
|
||||
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.59.2/lib/codemirror.css" type="text/css">
|
||||
<script type="text/javascript" src="[doc_base_url_common]/codemirror/5.64.0/lib/codemirror.js"></script>
|
||||
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/lib/codemirror.css" type="text/css">
|
||||
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/mode/css/css.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/mode/javascript/javascript.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/mode/xml/xml.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/mode/htmlmixed/htmlmixed.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/css/css.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/javascript/javascript.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/xml/xml.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/htmlmixed/htmlmixed.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/mode/markdown/markdown.js"></script>
|
||||
|
||||
<!--<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.59.2/theme/base16-light.css" type="text/css">-->
|
||||
<!--<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/theme/base16-light.css" type="text/css">-->
|
||||
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/addon/display/fullscreen.js"></script>
|
||||
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.59.2/addon/display/fullscreen.css" type="text/css">
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/display/fullscreen.js"></script>
|
||||
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/addon/display/fullscreen.css" type="text/css">
|
||||
|
||||
[if false]
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/addon/search/search.js"></script>
|
||||
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.59.2/addon/search/matchesonscrollbar.css" type="text/css">
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/search/search.js"></script>
|
||||
<link rel="stylesheet" href="[doc_base_url_common]/codemirror/5.64.0/addon/search/matchesonscrollbar.css" type="text/css">
|
||||
[end]
|
||||
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/addon/fold/xml-fold.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/addon/edit/matchtags.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/fold/xml-fold.js"></script>
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/edit/matchtags.js"></script>
|
||||
|
||||
<script src="[doc_base_url_common]/codemirror/5.64.0/addon/selection/active-line.js"></script>
|
||||
|
||||
|
||||
[# markdown to html converter]
|
||||
[# https://github.com/showdownjs/showdown ]
|
||||
<script src="[doc_base_url_common]/showdown/1.9.1/dist/showdown.min.js"></script>
|
||||
|
||||
|
||||
<script src="[doc_base_url_common]/codemirror/5.59.2/addon/selection/active-line.js"></script>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -112,14 +120,27 @@
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var winix_code_mirror_editor;
|
||||
var winix_code_mirror_editor = null;
|
||||
var winix_showdown_converter = null;
|
||||
var winix_converter_output = null;
|
||||
var winix_content_parsed = null;
|
||||
var winix_emacs_mode = 0;
|
||||
|
||||
function winix_initialize_editor()
|
||||
\{
|
||||
var text_area = document.getElementById("winix_content_id");
|
||||
var winix_contenttype = document.getElementById("winix_contenttype_id");
|
||||
var onchange_delay = null;
|
||||
|
||||
winix_content_parsed = document.getElementById("winix_content_parsed_id");
|
||||
|
||||
if( text_area )
|
||||
\{
|
||||
winix_showdown_converter = new showdown.Converter();
|
||||
winix_converter_output = document.getElementById("winix_output_preview");
|
||||
|
||||
winix_code_mirror_editor = CodeMirror.fromTextArea(text_area, \{
|
||||
mode: "htmlmixed",
|
||||
mode: winix_get_codemirror_mode(winix_emacs_mode),
|
||||
theme: "default",
|
||||
indentUnit: 4,
|
||||
smartIndent: true,
|
||||
@@ -135,8 +156,98 @@
|
||||
matchTags: true,
|
||||
styleActiveLine: true
|
||||
\});
|
||||
|
||||
winix_codemirror_preview();
|
||||
|
||||
winix_code_mirror_editor.on("change", function(instance) \{
|
||||
if( onchange_delay !== null )
|
||||
clearTimeout(onchange_delay);
|
||||
|
||||
onchange_delay = setTimeout(winix_codemirror_preview, 300);
|
||||
\});
|
||||
\}
|
||||
|
||||
if( winix_contenttype )
|
||||
\{
|
||||
winix_emacs_mode = parseInt(winix_contenttype.value);
|
||||
winix_set_codemirror_mode();
|
||||
|
||||
winix_contenttype.addEventListener("change", function(e) \{
|
||||
winix_emacs_mode = parseInt(this.value);
|
||||
winix_set_codemirror_mode();
|
||||
\});
|
||||
\}
|
||||
|
||||
\}
|
||||
|
||||
function winix_codemirror_preview()
|
||||
\{
|
||||
if( winix_code_mirror_editor !== null )
|
||||
\{
|
||||
if( winix_emacs_mode == 2 )
|
||||
\{
|
||||
let sourceMarkup = winix_code_mirror_editor.getValue();
|
||||
winix_converter_output.innerHTML = sourceMarkup;
|
||||
|
||||
if( winix_content_parsed !== null )
|
||||
winix_content_parsed.value = "";
|
||||
\}
|
||||
else
|
||||
if( winix_emacs_mode == 5 )
|
||||
\{
|
||||
let sourceMarkup = winix_code_mirror_editor.getValue();
|
||||
let htmlMarkup = winix_showdown_converter.makeHtml(sourceMarkup);
|
||||
|
||||
if( winix_converter_output !== null )
|
||||
winix_converter_output.innerHTML = htmlMarkup;
|
||||
|
||||
if( winix_content_parsed !== null )
|
||||
winix_content_parsed.value = htmlMarkup;
|
||||
\}
|
||||
else
|
||||
\{
|
||||
[# IMPROVEME add support for text and formated text ]
|
||||
|
||||
winix_converter_output.innerHTML = "";
|
||||
|
||||
if( winix_content_parsed !== null )
|
||||
winix_content_parsed.value = "";
|
||||
\}
|
||||
\}
|
||||
\}
|
||||
|
||||
|
||||
function winix_get_codemirror_mode(mode)
|
||||
\{
|
||||
switch(mode)
|
||||
\{
|
||||
case 5:
|
||||
return "markdown";
|
||||
|
||||
case 2: // html
|
||||
return "htmlmixed";
|
||||
|
||||
case 0: // text
|
||||
case 1: // formatted text
|
||||
case 3: // bbcode
|
||||
case 4: // other
|
||||
default:
|
||||
return "text/plain";
|
||||
\}
|
||||
\}
|
||||
|
||||
function winix_set_codemirror_mode()
|
||||
\{
|
||||
if( winix_code_mirror_editor !== null )
|
||||
\{
|
||||
let codeMirrorMode = winix_get_codemirror_mode(winix_emacs_mode);
|
||||
console.log("changing mode to: " + codeMirrorMode);
|
||||
winix_code_mirror_editor.setOption("mode", codeMirrorMode);
|
||||
winix_codemirror_preview();
|
||||
\}
|
||||
\}
|
||||
|
||||
|
||||
|
||||
[if false]
|
||||
this will probably be used to change the mode in the fly
|
||||
@@ -147,11 +258,8 @@ cm.save()
|
||||
Copy the content of the editor into the textarea.
|
||||
[end]
|
||||
|
||||
if( window.addEventListener )
|
||||
window.addEventListener("load", winix_initialize_editor, false);
|
||||
else
|
||||
if( window.attachEvent )
|
||||
window.attachEvent("onload", winix_initialize_editor);
|
||||
window.addEventListener("load", winix_initialize_editor, false);
|
||||
|
||||
</script>
|
||||
|
||||
[end]
|
||||
|
||||
Reference in New Issue
Block a user