bbcode font-size semantics

[kh99]

Yeah, I forgot that you were using vb3, but they just changed the functions into a class, so it's pretty much the same thing. Here's the modified parse_style_attribute function I came up with:

PHP Code:

    function parse_style_attribute($tagoptions, &$prependtags, &$appendtags)
    {
        $searchlist = array(
            array('tag' => 'left', 'option' => false, 'regex' => '#text-align:\s*(left);?#i'),
            array('tag' => 'center', 'option' => false, 'regex' => '#text-align:\s*(center);?#i'),
            array('tag' => 'right', 'option' => false, 'regex' => '#text-align:\s*(right);?#i'),
            array('tag' => 'color', 'option' => true, 'regex' => '#(?<![a-z0-9-])color:\s*([^;]+);?#i', 'match' => 1),
            array('tag' => 'font', 'option' => true, 'regex' => '#font-family:\s*(\'|)([^;,\']+)\\1[^;]*;?#i', 'match' => 2),
            array('tag' => 'b', 'option' => false, 'regex' => '#font-weight:\s*(bold);?#i'),
            array('tag' => 'i', 'option' => false, 'regex' => '#font-style:\s*(italic);?#i'),
            array('tag' => 'u', 'option' => false, 'regex' => '#text-decoration:\s*(underline);?#i'),
         array('tag' => 'size', 'option' => true, 'regex' => '#font-size:\s*([0-9]+px;?)#i', 'match' => 1)
        );

        $style = parse_wysiwyg_tag_attribute('style=', $tagoptions);
        $style = preg_replace(
            '#(?<![a-z0-9-])color:\s*rgb\((\d+),\s*(\d+),\s*(\d+)\)(;?)#ie',
            'sprintf("color: #%02X%02X%02X$4", $1, $2, $3)',
            $style
        );
        foreach ($searchlist AS $searchtag)
        {
            if (!is_bbcode_tag_allowed($searchtag['tag']))
            {
                continue;
            }
              if (preg_match($searchtag['regex'], $style, $matches))
            {
            if (strtoupper($searchtag['tag']) == 'SIZE')
            {
               $sizes = array('12px'=>1, '15px'=>2, '18px'=>3, '21px'=>4, '24px'=>5, '27px'=>6, '30px'=>7);
               if (isset($sizes[$matches[$searchtag['match']]]))
               {
                  $matches[$searchtag['match']] = $sizes[$matches[$searchtag['match']]];  
               }
               else
               {
                  $matches[$searchtag['match']] = 2;
               }
            }
            $prependtags .= '[' . strtoupper($searchtag['tag']) . iif($searchtag['option'] == true, '=' . $matches["$searchtag[match]"]) . ']';
            $appendtags = '[/' . strtoupper($searchtag['tag']) . "]$appendtags";
            }
        }
    } 


It replaces the existing function (which I think is somewhere below the code you posted). I actually tried it on vb4, but I looked at the vb3 function and made a couple changes, so I think it might work (or if not, it's close).

Unfortunately, what doesn't work right is the font dropdown in the editor (at least in vb4). You can use the menu to set the size of selected text, but it won't showthe size of selected text or let you change the size if text already has a size (I think probably because it doesn't recognize the <span... way of doing it, so it just tries to add another on the outside, which does nothing). I don't know what to do about hat, or whether it needs to be fixed in js somewhere, but I don't have time to look at that. (Maybe it will work in vb3, or at least be an easier problem to fix).

Edit: No, same problem in vb3. But you've already looked at the js so maybe you have a head start. It looks like color, font, bold, italics, etc are done with attributes, so maybe you can find where those are handled and add font-size like we did in the php. I think the goal of the Op was to change the sizes associated with the numbers, so if that's true you might be able to go back to using <font> and get everything to work just using the changes to the tag list, but maybe you have a different goal.

[NeutralizeR]

Thank you for your reply. It's working, but as you stated, dropdown problem and extra spans make it unusable at the moment. I'm still searching for the source of <font size="x"> tags (they are added when you select a text and choose a size for the first time, a refresh converts them to span).

I attached my uncompressed vbulletin_textedit.js. Two instances of font tags are converted to span and i really can't find where else <font size and <font face tags are generated.

I also noticed that <font face, <font color and <font size tags are merged into one tag like:

<font color="DeepSkyBlue" face="Franklin Gothic Medium" size="7">test</font>

I guess I'll need a span replacement, too.

[kh99]

I think for the ckeditor it might be in clientscript\ckeplugins\enhancedsourcearea\plugin. js, but I'm not sure if that file is used directly, because I seem to remember that all the ckeditor plugins are combined into one file. But I tried to search for a section of the code and it was only found once, so I could be wrong about that. I suppose I should just try changing something in that file and see if it has any effect.

[NeutralizeR]

vBulletin 3 does not have a clientscript\ckeplugins\ folder It's really weird. I can't figure out what else building the WYSIWYG editor. I made a mass search in all *.js and *.php files but could not find any other <font tags.

[kh99]

Originally Posted by NeutralizeR

vBulletin 3 does not have a clientscript\ckeplugins\ folder It's really weird. I can't figure out what else building the WYSIWYG editor. I made a mass search in all *.js and *.php files but could not find any other <font tags.

Oops, of course you're right. Then it looks like you must be looking in the right place. Maybe I'll look a little if I get a chance later (although I don't know anything about how the editor works).

[kh99]

OK, I think the problem has to do with the section in vbulletin_textedit.js that starts with:

/**
* Set Size Context
*/
this.set_size_context = function(sizestate)

That section tries to call a function queryCommandValue('fontsize'), which I guess returns the numeric value of the font size of the selected text (like you set in a <font> tag), but doesn't know how to return the value if the font size is being set by CSS. A possible solution seem to have something to do with selection ranges, but I couldn't figure it out in the few minutes I spent on it. I figured maybe you know more js and could figure it out.

[NeutralizeR]

Yes, i'd seen that section but could not think of any ways to alternate the code. I posted a question @ stackoverflow and if i get an answer I will post here. Thanks.