How to integrate external *Editor*?

Question

Hello.

I'd like to known, how I can add external markup editor into Q&A, such as wmd, NicEdit, TinyMCE...
I've tried do it by myself, but Q&A ignoring installed Editors markup.

I've read about "H" value in column "format" in table "_posts", tried it, but nothing happens.

Please, help me integrate external *Editor*...

Sorry for my sometimes-bad-English, thanks.

Comments

I want to implement wmd(Light weight mark down editor). I do not understand whether I can do it, but I want to challenge a little too.

---

Installing external Editor isn't a problem.
But Q&A ignores all HTML markup in posts :(

---

Mark down language is not HTML..
Have a look: http://www.question2answer.org/qa/1525/any-plan-to-add-markdown-editor-in-future-release

You can try.. Lets us know if it fits fine with Q2A.. :)

Answer 1

Please see http://www.question2answer.org/qa/1209/can-you-break-my-wysiwyg-q2a
We all can petition user shrewdies http://www.question2answer.org/qa/user/shrewdies to share it!

Comments

Yeah, I've already seen that topic.

Answer 2

I try WMD. But... The completeness is low.
Perhaps my javascript code is wrong, only FF move definitely.


Step1)
download package << http://wmd-editor.com/download
"wmd" folder move under qa-content.

Step2)
Update qa-include/qa-app.format.php

(L258-264: replace to 1-line)
---
/*
            if (isset($blockwordspreg))
                $post['content']=qa_block_words_replace($post['content'], $blockwordspreg);
           
            $fields['content']=qa_html($post['content'], true); // also used for rendering content when asking follow-on q
           
            if ($showurllinks)
                $fields['content']=qa_html_convert_urls($fields['content']);
*/
            $fields['content']=$post['content'];
---

(L267: SPAN tag -> DIV tag)
---
                //$fields['content']='<SPAN CLASS="entry-content">'.$fields['content'].'</SPAN>';
                $fields['content']='<DIV CLASS="entry-content">'.$fields['content'].'</DIV>';
---

(L269: commnent out)
---
//            $fields['content']='<A NAME="'.qa_html($postid).'"></A>'.$fields['content'];
---


Step3)
Update qa-include/qa-theme-base.php (Please warn the person customizing theme.)

(L167: add line to head_custom())
---
            switch ($this->template) {
                case 'ask':
                case 'question':
                    $this->output('
                        <script type="text/javascript" src="qa-content/wmd/showdown.js"></script>
                        <script type="text/javascript">
                        window.onload=function(){
                        var converter = new Showdown.converter();
                        var tags=document.getElementsByTagName("DIV");
                        var tag;
                        for(var i=0;i<tags.length;i++){
                          tag = tags.item(i);
                          if(tag.className=="entry-content") {
                            tag.innerHTML = converter.makeHtml(tag.innerHTML);
                          }
                        }
                        }
                        </script>
                    ');
                    break;
                default:
                    NULL;
            }
---

(L778: add line to form_text_multi_row())
---
            switch ($this->template) {
                case 'ask':
                case 'question':
                    //if (preg_match('/qcontent/', $field['tags'])) $name='qcontent';
                    //if (preg_match('/acontent/', $field['tags'])) $name='acontent';
                    //if (preg_match('/comment/', $field['tags'])) $name='comment';
                    //if ($name!='comment') {
                        $this->output('<div class="wmd-preview"></div>');
                        $this->output('<script type="text/javascript" src="qa-content/wmd/wmd.js"></script>');
                    //}
                    break;
                default:
                    NULL;
            }
---

My environment test)

FF(V3.6) : move definitely
IE(V8) : CSS of bar is strange?
Opera(10.6) : Don't display bar...
Safari-win(V5) : Don't display bar...

Another problem)
It is sequrity-problem that we can input raw HTML. I seem not to be able to input it at StackOverflow.

Comments

i've done one with tiny MCE at http://hoidap.lamtheo.com. Please take a look at there

Answer 3

Finally I've figured it out :) I know, it is a littlebit to late, as in 1.3 there is Wysiwyg Editor implemented, but for those of you, that would like to use for example NicEdit, here's how to do it:

1. Open qa_page.php and change:

    if (!empty($qa_content['keywords']))
        $themeclass->output('<META NAME="keywords" CONTENT="'.$qa_content['keywords'].'"/>');
            // as far as I know, META keywords have zero effect on search rankings or listings
    
    $themeclass->output('<SCRIPT TYPE="text/javascript"><!--');

to

    if (!empty($qa_content['keywords']))
        $themeclass->output('<META NAME="keywords" CONTENT="'.$qa_content['keywords'].'"/>');
            // as far as I know, META keywords have zero effect on search rankings or listings
    
    $nicEdithtml = "";
          $nicEdithtml .= ("\n<script type=\"text/javascript\" src=\"http://js.nicedit.com/nicEdit-latest.js\"></script>\n");
          $nicEdithtml .= ("<script type=\"text/javascript\">");
          $nicEdithtml .= ("/*<![CDATA[*/");
          $nicEdithtml .= ("bkLib.onDomLoaded(function() { ");
          $nicEdithtml .= ("nicEditors.allTextAreas({fullPanel : true});");
          $nicEdithtml .= ("});");
          $nicEdithtml .= ("/*]]>*/");
          $nicEdithtml .= ("</script>");
       
    $themeclass->output($nicEdithtml);
    $themeclass->output('<SCRIPT TYPE="text/javascript"><!--');

2. Open qa-app-format.php and change:

    //    Post content
       
        if (!empty($post['content'])) {
            if (isset($blockwordspreg))
                $post['content']=qa_block_words_replace($post['content'], $blockwordspreg);
           
$fields['content']=qa_html($post['content'], true); // also used for rendering content when asking follow-on q

               
if ($showurllinks)
         $fields['content']=qa_html_convert_urls($fields['content']);
           
if ($microformats)
$fields['content']='<SPAN CLASS="entry-content">'.$fields['content'].'</SPAN>';
           
            $fields['content']='<A NAME="'.qa_html($postid).'"></A>'.$fields['content'];
                // this is for backwards compatibility with any existing links using the old style of anchor
                // that contained the post id only (changed to be valid under W3C specifications)
        }

to

    //    Post content
       
        if (!empty($post['content'])) {
            if (isset($blockwordspreg))
                $post['content']=qa_block_words_replace($post['content'], $blockwordspreg);
           
$fields['content']=$post['content'];
               
            $fields['content']='<A NAME="'.qa_html($postid).'"></A>'.$fields['content'];
                // this is for backwards compatibility with any existing links using the old style of anchor
                // that contained the post id only (changed to be valid under W3C specifications)
        }

Please let me know if it works in your sites :)

Here's mine: http://quanda.pl

Thanks

PS. I've just added tables functionality and integrated lightbox script thanks to http://scottjarvis.com as well as SyntaxHighlighting
 

Comments

Finally I decided to change SyntaxHighlighter to Googles prettify, cause it better manage new lines and br tags