Developer Blog - Inventic.eu
  • Skipper - The ORM Designer
  • VsBuilds - Parallel building
  • Pulpo - Free Skipper CLI

Tag: #customization

Q2A markdown editor with file upload

**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()<br />
{<br />
  var text = unescape(document.location.search.substring(0));<br />
  var imgStart = text.indexOf(&quot;[img]&quot;)+5;<br />
  var imgEnd = text.indexOf(&quot;[/img]&quot;);<br />
  var refStart = text.indexOf(&quot;[url=&quot;)+5;<br />
  var refEnd = text.indexOf(&quot;]&quot;);<br />
  var urlImg = text.substr(imgStart ,imgEnd-imgStart );<br />
  var urlRef = text.substr(refStart ,refEnd-refStart );<br />
  var area_ignore_name = /username_list|search/i;<br />
  var area=opener.document.getElementById('wmd-input-content');<br />
  if ( area==null )<br />
   area=opener.document.getElementById('wmd-input-a_content');<br />
  if ( area==null )<br />
    area=opener.document.getElementById('wmd-input-q_content');<br />
  area.value = area.value + &quot;[![Image caption](&quot; + urlImg + &quot;)](&quot; + urlRef + &quot;)\n&quot;;<br />
  opener.focus();<br />
  area.focus();</p>
<p>  //refresh preview area<br />
  var evt = document.createEvent(&quot;KeyboardEvent&quot;);<br />
  evt.initKeyboardEvent(&quot;keypress&quot;, true, true, null, false, false, false, false, 0, 0);<br />
  area.dispatchEvent(evt);</p>
<p>  window.close();<br />
}<br />
  • 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 .= '&lt;/pre&gt;<br />
&lt;div id=&quot;wmd-button-bar-'.$fieldname.'&quot; class=&quot;wmd-button-bar&quot;&gt;';<br />
$html .= '&lt;a style=&quot;float: right; display: block; background: #CCC; color: #444; padding: .2em 1em; font-weight: bold;&quot; onclick=&quot;window.open(\'http://www.postimage.org/index.php?mode=phpbb&amp;lang=english&amp;forumurl=\' + escape(document.location.href), \'_imagehost\', \'resizable=yes,width=500,height=400\');return false;&quot; href=&quot;javascript:void(0);&quot;&gt;Upload image to post&lt;/a&gt;';<br />
$html .= '&lt;/div&gt;<br />
&lt;pre&gt;';<br />
  • 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 */</p>
<p>.wmd-button-bar {<br />
	width: 604px  !important ;<br />
	padding: 5px 0;<br />
}<br />
.wmd-input {<br />
	/* 604 */<br />
	width: 598px;<br />
	height: 250px;<br />
	margin: 0 0 10px;<br />
	padding: 2px;<br />
	border: 1px solid #ccc;<br />
}<br />
.wmd-preview {<br />
	/* 604 */<br />
	width: 584px;<br />
	margin: 10px 0;<br />
	padding: 8px;<br />
	border: 2px dashed #ccc;<br />
}<br />
.wmd-preview pre,<br />
.qa-a-item-content pre {<br />
	width: 100%;<br />
	max-height: 400px;<br />
	overflow: auto;<br />
}</p>
<p>.wmd-button-row {<br />
	position: relative;<br />
	margin: 0;<br />
	padding: 0;<br />
	height: 20px;<br />
}<br />
#wmd-button-row-content.wmd-button-row { width: 70% !important }<br />
#wmd-button-row-q_content.wmd-button-row { width: 70% !important }<br />
#wmd-button-row-a_content.wmd-button-row { width: 70% !important }</p>
<p>.wmd-spacer {<br />
	width: 1px;<br />
	height: 20px;<br />
	margin-left: 14px;<br />
	position: absolute;<br />
	background-color: Silver;<br />
	display: inline-block;<br />
	list-style: none;<br />
}</p>
<p>.wmd-button {<br />
    width: 20px;<br />
    height: 20px;<br />
    padding-left: 2px;<br />
    padding-right: 3px;<br />
    position: absolute;<br />
    display: inline-block;<br />
    list-style: none;<br />
    cursor: pointer;<br />
}</p>
<p>.wmd-button &gt; span {<br />
	/* note: background-image is set in plugin script */<br />
    background-repeat: no-repeat;<br />
    background-position: 0px 0px;<br />
    width: 20px;<br />
    height: 20px;<br />
    display: inline-block;<br />
}</p>
<p>.wmd-spacer1 {<br />
    left: 50px;<br />
}<br />
.wmd-spacer2 {<br />
    left: 175px;<br />
}<br />
.wmd-spacer3 {<br />
    left: 300px;<br />
}</p>
<p>.wmd-prompt-background {<br />
	background-color: #000;<br />
}<br />
.wmd-prompt-dialog {<br />
	border: 1px solid #999;<br />
	background-color: #f5f5f5;<br />
}<br />
.wmd-prompt-dialog &gt; div {<br />
	font-size: 0.8em;<br />
}<br />
.wmd-prompt-dialog &gt; form &gt; input[type=&quot;text&quot;] {<br />
	border: 1px solid #999;<br />
	color: black;<br />
}<br />
.wmd-prompt-dialog &gt; form &gt; input[type=&quot;button&quot;] {<br />
	border: 1px solid #888;<br />
	font-size: 11px;<br />
	font-weight: bold;<br />
}</p>
<p>/* highlight.js styles */</p>
<p>pre code {<br />
  display: block;<br />
  padding: 0.5em;<br />
  background: #f6f6f6;<br />
}</p>
<p>pre code,<br />
pre .ruby .subst,<br />
pre .tag .title,<br />
pre .lisp .title,<br />
pre .nginx .title {<br />
  color: black;<br />
}</p>
<p>pre .string,<br />
pre .title,<br />
pre .constant,<br />
pre .parent,<br />
pre .tag .value,<br />
pre .rules .value,<br />
pre .rules .value .number,<br />
pre .preprocessor,<br />
pre .ruby .symbol,<br />
pre .ruby .symbol .string,<br />
pre .ruby .symbol .keyword,<br />
pre .ruby .symbol .keymethods,<br />
pre .instancevar,<br />
pre .aggregate,<br />
pre .template_tag,<br />
pre .django .variable,<br />
pre .smalltalk .class,<br />
pre .addition,<br />
pre .flow,<br />
pre .stream,<br />
pre .bash .variable,<br />
pre .apache .tag,<br />
pre .apache .cbracket,<br />
pre .tex .command,<br />
pre .tex .special,<br />
pre .erlang_repl .function_or_atom,<br />
pre .markdown .header {<br />
  color: #800;<br />
}</p>
<p>pre .comment,<br />
pre .annotation,<br />
pre .template_comment,<br />
pre .diff .header,<br />
pre .chunk,<br />
pre .markdown .blockquote {<br />
  color: #888;<br />
}</p>
<p>pre .number,<br />
pre .date,<br />
pre .regexp,<br />
pre .literal,<br />
pre .smalltalk .symbol,<br />
pre .smalltalk .char,<br />
pre .go .constant,<br />
pre .change,<br />
pre .markdown .bullet,<br />
pre .markdown .link_url {<br />
  color: #080;<br />
}</p>
<p>pre .label,<br />
pre .javadoc,<br />
pre .ruby .string,<br />
pre .decorator,<br />
pre .filter .argument,<br />
pre .localvars,<br />
pre .array,<br />
pre .attr_selector,<br />
pre .important,<br />
pre .pseudo,<br />
pre .pi,<br />
pre .doctype,<br />
pre .deletion,<br />
pre .envvar,<br />
pre .shebang,<br />
pre .apache .sqbracket,<br />
pre .nginx .built_in,<br />
pre .tex .formula,<br />
pre .erlang_repl .reserved,<br />
pre .input_number,<br />
pre .markdown .link_label,<br />
pre .vhdl .attribute {<br />
  color: #88f;<br />
}</p>
<p>pre .keyword,<br />
pre .id,<br />
pre .phpdoc,<br />
pre .title,<br />
pre .built_in,<br />
pre .aggregate,<br />
pre .css .tag,<br />
pre .javadoctag,<br />
pre .phpdoc,<br />
pre .yardoctag,<br />
pre .smalltalk .class,<br />
pre .winutils,<br />
pre .bash .variable,<br />
pre .apache .tag,<br />
pre .go .typename,<br />
pre .tex .command,<br />
pre .markdown .strong,<br />
pre .request,<br />
pre .status {<br />
  font-weight: bold;<br />
}</p>
<p>pre .markdown .emphasis {<br />
  font-style: italic;<br />
}</p>
<p>pre .nginx .built_in {<br />
  font-weight: normal;<br />
}</p>
<p>pre .coffeescript .javascript,<br />
pre .xml .css,<br />
pre .xml .javascript,<br />
pre .xml .vbscript,<br />
pre .tex .formula {<br />
  opacity: 0.5;<br />

And that's all. If you want to see it in action, take a look to this site: http://q2a.orm-designer.com/

08 Nov 2012

Posted by: ludek.vodicka

Programming #q2a #customization