Editor Use in Flyspray (Page 1 of 2)

I found this code on line 174 of   \templates\details.edit.tpl

{!TextFormatter::textarea('detailed_desc', 30, 100, array('id' => 'details'), Req::val('detailed_desc', $task_details['detailed_desc']))}

I updated the , 30,100 to give me a slightly larger editable area

Can someone help me understand how TextFormatter works and how I can control styles in there, and if I can include HTML, or a wysiwyg editor.

THanks

Lemon Juice, bring it on!!  I'm so ready for this!
Thanks

Ok, let's go on then! I'll explain it in 4 different steps. Please note that I work on PHP 5.2 and mysql, so I don't guarantee this will work on PHP 4. I suspect a different db shouldn't make any differece.

Step 1. We need to first make Flyspray to display html descriptions and comments instead of plain text, in other words get rid of special characters escaping, etc. This is easy and can be done with a simple plugin, let's call it 'richtext'. First make a new folder in the plugins directory and call it 'richtext'. Save the script below in this folder as 'richtext_formattext.inc.php':

<?php
class richtext_TextFormatter
{    
    function render($text, $onyfs = false, $type = null, $id = null, $instructions = null)
    {
        if ($type == 'task' || $type == 'comm' || $type === null) {
            return self::linkalize_html($text);
        }
               
        return htmlspecialchars($text);
    }
    
    function textarea($name, $rows, $cols, $attrs = null, $content = null)
    {
        global $conf;
        
        $rows = round($rows * 1.3);

        $name = htmlspecialchars($name, ENT_QUOTES, 'utf-8');
        $return = sprintf('<textarea name="%s" cols="%d" rows="%d"', $name, $cols, $rows);
        if (is_array($attrs) && count($attrs)) {
            $return .= join_attrs($attrs);
        }
        $return .= '>';
        if (is_string($content) && strlen($content)) {
            $return .= htmlspecialchars($content, ENT_QUOTES, 'utf-8');
        }
        $return .= '</textarea>';
        return $return;
    }


    function make_links_callback($matches) {
        $url = $matches[2].$matches[3].$matches[4];
        
        $url_trimmed = rtrim($url, '.,;:');
        
        if (($len_trimmed = strlen($url_trimmed)) == strlen($url)) {
            $trail = "";
        } else {
            $trail = substr($url, $len_trimmed);
        }
        
        if (strtolower($url_trimmed[0]) == 'w') {
            $full_url = "http://$url_trimmed";
        } else {
            $full_url = $url_trimmed;
        }
        
        return "<a href=\"$full_url\">$url_trimmed</a>$trail";
    }
    
    function linkalize_html($html) {
        $a_segments = preg_split('#(<\s*a\s+.*?>(?:.*?(?:\<!--.*?--\>)*)*?<\s*/a\s*>
            |<\s*script(?:\s+.*?){0,1}?>.*?<\s*/script\s*>
            |<\s*style(?:\s+.*?){0,1}?>.*?<\s*/style\s*>)#smix', $html, -1, PREG_SPLIT_DELIM_CAPTURE);
        
        // we parse only even segments - they don't have <a>, <script> or <style> tags
        foreach ($a_segments as $key=>&$a_segment) {
            if (!($key & 1)) {
                // now we linkalize only text outside any html tags (in even segments)
                $tag_segments = preg_split('#(<.*?>)#sm', $a_segment, -1, PREG_SPLIT_DELIM_CAPTURE);
                
                foreach ($tag_segments as $key2=>&$tag_segment) {
                    if (!($key2 & 1)) {
                        $tag_segment = str_replace('%amp%', '&amp;', preg_replace_callback('`(?<!\w)(((?:http|ftp)(?:s?)://)|(www.))+([a-z0-9_\./&=#@?~%:\(\)$,+-]+)`i', array('self', 'make_links_callback'), str_replace('&amp;', '%amp%', $tag_segment)));
                        
                        // Change FS#123 into hyperlinks to tasks
                        $tag_segment = preg_replace_callback("/\b(?:FS#|bug )(\d+)\b/i", 'tpl_fast_tasklink', $tag_segment);
                    }
                }
                
                $a_segment = implode('', $tag_segments);
            }
        }
        
        return implode('', $a_segments);
    }
}
?>

Now edit 'flyspray.conf.php' and change the value of syntax_plugin to 'richtext' - by default it's set to 'none'. From now on our new syntax plugin will be used for displaying task descriptions and comments.

The syntax plugin must have 2 methods: render and textarea. We need to write the first one for our purpose, the second one is used for outputting textarea html tags and is copied unchanged from the built-in syntax plugin in TextFormatter class (class.tpl.php) - actually, I've made one small change to make the textarea bigger by the factor of 1.3.

In the plugin I've added some intelligent 'linkalizing', which detects URLs and puts them around <a href..></a> tags. This is a bit more tricky than in plain text because we need to make sure that no tags are put inside existing <a> tags created in TinyMCE. We also don't want to linkalize URLs in tag attributes, scripts, styles and html comments. So the original feature of linkalizing URLs is preserved (actually it seems to be better, I got some bad links made by Flyspray on certain URLs). And linkalizing numbers to other tasks FS#xxx works too. I only didn't implement linkalizing email addresses because I don't really need it that much, the code can be modified easily to do that too.

Step 2. Now we put the editor in Flyspray. I used TinyMCE 3.2.2 but it shouldn't be any different for other 3.x.x versions. I also used the 'tinybrowser' plugin for uploading images. Let's put TinyMCE files in the 'javascript' folder in 'tiny_mce' folder so that the path to tiny_mce.js is 'javascript/tiny_mce/tiny_mce.js'.

If you want tinybrowser, then download it from http://www.lunarvis.com/products/tinymc … upload.php and place in the tiny_mce plugins folder in a new folder 'tinybrowser'. We now need to set path to images folder in config_tinybrowser.php, in my case it is:

$tinybrowser['path']['image'] = '/flyspray/useruploads/images/';

And of course I had to create this folder, you may also need to create '/flyspray/useruploads/images/_thumbs/'.

Now we need to turn the editor on in Flysprawy by providing javascript. Open header.tpl in 'templates' folder and just before the closing </head> tag add this code:

<!-- TinyMCE -->
<script type="text/javascript" src="{$baseurl}javascript/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<script type="text/javascript" src="{$baseurl}javascript/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
    tinyMCE.init({
        mode : "exact",
        elements : "comment_text,details",
        theme : "advanced",
        language : 'en',
        content_css : "{$this->themeUrl()}theme.css",
        file_browser_callback : "tinyBrowser",
        
        plugins : "safari,table,contextmenu,inlinepopups,fullscreen,paste",

        // Theme options
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,formatselect,fontsizeselect,|,forecolor,backcolor,|,hr,bullist,numlist,blockquote,|,fullscreen",
        theme_advanced_buttons2 : "link,unlink,image,pastetext,|,cleanup,code,|,removeformat,|,tablecontrols",
        theme_advanced_buttons3 : "",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_statusbar_location : "bottom",
        theme_advanced_resizing : true,
        theme_advanced_resizing_use_cookie : false            
    });
</script>
<!-- /TinyMCE -->

Of course, customize the features of TinyMCE here to whatever you like or remove appropriate lines if you don't want tinybrowser.

Now TinyMCE should be working when editing task descriptions and comments. So most of the work is done!

Step 3. If you already have content in Flyspray you need to convert all text in database to html (escape special characters and insert <br /> for newlines). With MySQL you can run these queries:

UPDATE flyspray_comments SET comment_text = REPLACE( REPLACE( REPLACE (REPLACE (comment_text, '&', '&amp;'), '<', '&lt;'), '>', '&gt;'), '\n', '<br />');
UPDATE flyspray_tasks SET detailed_desc = REPLACE( REPLACE( REPLACE (REPLACE (detailed_desc, '&', '&amp;'), '<', '&lt;'), '>', '&gt;'), '\n', '<br />');

Before doing this always backup these 2 tables! If something goes wrong all your content will be screwed up! Fortunately, nothing went wrong for me .

Step. 4. Now a new problem has come up: task notification emails contain desctiptions and comments with html in plain text view and it's quite inconvenient to read it and looks messy. We need to edit includes/class.notify.php. Let's add a new method at the end of the class (just before the last closing brace) to convert html to plain text:

    function html2text($html)
    {
        // reducing newlines
        $html = preg_replace('~\s+~m'," ",$html);
        // reducing spaces
        $html = preg_replace('~ +~s',' ',$html);
        $html = preg_replace('~^\s+~m','',$html);
        $html = preg_replace('~\s+$~m','',$html);
        $tags = array (
            '~<h[123456][^>]*>\s*~si',
            '~</h[123456][^>]*>\s*~si',
            '~<table[^>]*>\s*~si',
            '~</table[^>]*>\s*~si',
            '~<tr[^>]*>\s*~si',
            '~<li[^>]*>\s*~si',
            '~<br[^>]*>\s*~si',
            '~<ul[^>]*>\s*~si',
            '~</ul[^>]*>\s*~si',
            '~<ol[^>]*>\s*~si',
            '~</ol[^>]*>\s*~si',
            '~<div[^>]*>\s*~si',
            '~<p[^>]*\s*>~si',
            '~</p[^>]*\s*>~si',
        );
        $html = preg_replace($tags,"\n",$html);
        
        $tags = array (
            '~<hr[^>]*>\s*~si',
        );
        $html = preg_replace($tags,"\n---------------------------------------\n",$html);
        
        $html = preg_replace('~</t(d|h)>\s*<t(d|h)[^>]+>~si',' - ',$html);
        $html = preg_replace('~<[^>]+>~s','',$html);
        
        $html = strtr($html, array(
            "&oacute;" => "ó",
            "&amp;" => "&",
            "&gt;" => ">",
            "&lt;" => "<",
            "&nbsp;" => " ",
        ));
        return $html;
    }

And we need to use this method in 3 different places:
Line 434:

$body .= L('details') . ' - ' . $this->html2text($task_details['detailed_desc']) . "\n\n";

Line 476:

$body .= $translation[$change[0]] . ":\n-------\n" . $this->html2text($change[2]) . "\n-------\n";

Line 551:

$body .= $this->html2text($comment['comment_text']) . "\n";

Now that's all that is required. Hope it will work well for you, too!

It would be great if we could make all these changes with plugins without messing with the original code but it looks like there's no other way.

Last edited by Lemon Juice (2009-04-09 15:26:33)

This is parse error so there's something wrong with the syntax, the lines you quoted are perfectly fine so I suspect it could be something in the previous line. Could you quote more code like from 10 lines earlier to 10 lines after this?

I hope this wasn't to me because I don't possess such big powers:) And I'm sure the developers won't implement it in the next release because they are more interested in dokuwiki. Which is fine for me but it would be nice if they extended the plugin system so that such changes could be done with plugins alone.

However, seeing how dormant this project is I wouldn't count on the next release within a year or so. In practice I think it's best to take what is available now and tweak it and modify it without hoping for a new release.

Anyway, glad to hear it works!

Last edited by Lemon Juice (2009-03-25 23:17:30)

This line of code looks perfectly fine. Perhaps you are using PHP4? I haven't tested my code on PHP4 so I don't know how many pitfalls there may be in the older version.

it's amazing !!!

but we don't add an attachment now ...

I recently download TinyMCE, I'm on v3.2.2.3... like you said, perhaps neither is the culprit.  I lean more and more on the host and permission to upload to the specified folder.  I am still researching what changed.

I'll update the thread once I know what is going on!
Thanks for all your help!!!

I have made some changes to the richtext_TextFormatter class - the most important one being in the render() method - when viewing description changes in task history the texts appeared with html tags instead of being properly formatted, the change was to fix that problem. I also did some minor improvements to the linkalizing methods because some links (like those having a colon) were truncated. I updated the class in my original message above so you can grab it if you like. Have fun!

Just carried out the changes - works like a charm!

Will package the modified files (as well as the "nice blue" theme by eeve) and post a link to make it easier for others to "upgrade".

Thanks for taking the time to write this tutorial!

Last edited by gyszilagyi (2010-04-16 12:55:19)

Actually, I'm having some issues with this "mod". My Flyspray database has utf8 collation and we input Hungarian text (with characters like "á", "ö" etc.).

Flyspray returns "garbage" instead of these characters.

Additionally <p> and </p> (as well as other) tags are displayed instead of the formatted text. I did some digging and it appears that some of these issues are not uncommon to TinyMCE.

Lemon Juice, do you have any suggestions?

Thanks for taking the time to answer, will check everything according to your suggestions. I used FCKEditor for a project and had no issues, so I agree that TinyMCE should in theory work fine as well.

Thanks again

Giorgio