Note: After first excitement I find out that service returns only thumbnails without possibility to get link to full image ;-(. Right now I’m searching another way.
Note:I figured out how to show image together with point to original image as link. Only drawback of this solution is that inserted image is only thumbnail.
This is a short tutorial how to configure your Q2A site to use markdown editor together with file upload feature.
function add_code()
{
var text = unescape(document.location.search.substring(0));
var imgStart = text.indexOf("[img]")+5;
var imgEnd = text.indexOf("[/img]");
var refStart = text.indexOf("[url=")+5;
var refEnd = text.indexOf("]");
var urlImg = text.substr(imgStart ,imgEnd-imgStart );
var urlRef = text.substr(refStart ,refEnd-refStart );
var area_ignore_name = /username_list|search/i;
var area=opener.document.getElementById('wmd-input-content');
if ( area==null )
area=opener.document.getElementById('wmd-input-a_content');
if ( area==null )
area=opener.document.getElementById('wmd-input-q_content');
area.value = area.value + "[![Image caption](" + urlImg + ")](" + urlRef + ")\n";
opener.focus();
area.focus();
//refresh preview area
var evt = document.createEvent("KeyboardEvent");
evt.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 0, 0);
area.dispatchEvent(evt);
window.close();
}
- Now upload updated file addform.html to the root of your q2a site.
- Now it’s need to update qa-markdown-editor.php file located in qa-plugin/q2a-markdown-editor-master. Insert [a style=”….”] line after [div id=”wmd-button-bar-“] line.
$html .= '</pre>
<div id="wmd-button-bar-'.$fieldname.'" class="wmd-button-bar">';
$html .= '<a style="float: right; display: block; background: #CCC; color: #444; padding: .2em 1em; font-weight: bold;" onclick="window.open(\'http://www.postimage.org/index.php?mode=phpbb&lang=english&forumurl=\' + escape(document.location.href), \'_imagehost\', \'resizable=yes,width=500,height=400\');return false;" href="javascript:void(0);">Upload image to post</a>';
$html .= '</div>
<pre>';
- And finally, insert following fragment of css (it’s slightly updated) to your theme file. In my case it’s qa-theme/Snow/qa-styles.css
/* Markdown editor plugin */
.wmd-button-bar {
width: 604px !important ;
padding: 5px 0;
}
.wmd-input {
/* 604 */
width: 598px;
height: 250px;
margin: 0 0 10px;
padding: 2px;
border: 1px solid #ccc;
}
.wmd-preview {
/* 604 */
width: 584px;
margin: 10px 0;
padding: 8px;
border: 2px dashed #ccc;
}
.wmd-preview pre,
.qa-a-item-content pre {
width: 100%;
max-height: 400px;
overflow: auto;
}
.wmd-button-row {
position: relative;
margin: 0;
padding: 0;
height: 20px;
}
#wmd-button-row-content.wmd-button-row { width: 70% !important }
#wmd-button-row-q_content.wmd-button-row { width: 70% !important }
#wmd-button-row-a_content.wmd-button-row { width: 70% !important }
.wmd-spacer {
width: 1px;
height: 20px;
margin-left: 14px;
position: absolute;
background-color: Silver;
display: inline-block;
list-style: none;
}
.wmd-button {
width: 20px;
height: 20px;
padding-left: 2px;
padding-right: 3px;
position: absolute;
display: inline-block;
list-style: none;
cursor: pointer;
}
.wmd-button > span {
/* note: background-image is set in plugin script */
background-repeat: no-repeat;
background-position: 0px 0px;
width: 20px;
height: 20px;
display: inline-block;
}
.wmd-spacer1 {
left: 50px;
}
.wmd-spacer2 {
left: 175px;
}
.wmd-spacer3 {
left: 300px;
}
.wmd-prompt-background {
background-color: #000;
}
.wmd-prompt-dialog {
border: 1px solid #999;
background-color: #f5f5f5;
}
.wmd-prompt-dialog > div {
font-size: 0.8em;
}
.wmd-prompt-dialog > form > input[type="text"] {
border: 1px solid #999;
color: black;
}
.wmd-prompt-dialog > form > input[type="button"] {
border: 1px solid #888;
font-size: 11px;
font-weight: bold;
}
/* highlight.js styles */
pre code {
display: block;
padding: 0.5em;
background: #f6f6f6;
}
pre code,
pre .ruby .subst,
pre .tag .title,
pre .lisp .title,
pre .nginx .title {
color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .symbol .keyword,
pre .ruby .symbol .keymethods,
pre .instancevar,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .markdown .header {
color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .markdown .blockquote {
color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .markdown .bullet,
pre .markdown .link_url {
color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .input_number,
pre .markdown .link_label,
pre .vhdl .attribute {
color: #88f;
}
pre .keyword,
pre .id,
pre .phpdoc,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .markdown .strong,
pre .request,
pre .status {
font-weight: bold;
}
pre .markdown .emphasis {
font-style: italic;
}
pre .nginx .built_in {
font-weight: normal;
}
pre .coffeescript .javascript,
pre .xml .css,
pre .xml .javascript,
pre .xml .vbscript,
pre .tex .formula {
opacity: 0.5;
And that’s all. If you want to see it in action, take a look to this site: http://q2a.orm-designer.com/
