CKEditor 4
Tue, 12/06/2011 - 15:07
#1
paul_tanner
paul_tanner's picture
Joined: 05/12/2011
Posts: 12

Custom Tags Plugin

I'm upgrading a custom CMS to use CKEditor and I need to handle custom tags that trigger CMS macro functions. The tags look like HTML but they are additional to that. They need to render as little marker images in WYSIWYG and like standard HTML in source mode. e.g <mytag arg1="an argument" arg2="another arg"... />

My question is which approach would be best to implement this?

The simplest way would be to use the existing placeholder plugin. However, that would look messy when your tag has a lot of attributes. Also, the placeholder approach does not help you to remember the parameters for each custom tag - that would be better done with a dialog.

So I was thinking of possibly using the approach common to the bbcode and mediawiki plugins. I started to look at the code for those and must confess that in my case a lot of study would be needed to fully understand them. So I thought I'd ask for advice.

Any suggestions?

Thx, Paul
Top
Tue, 12/06/2011 - 16:19
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Custom Tags Plugin



viewtopic.php?f=18&t=23606
Top
Tue, 12/06/2011 - 18:08
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: Custom Tags Plugin


viewtopic.php?f=11&t=24144&p=61808#p61808
Top
Wed, 12/07/2011 - 10:08
paul_tanner
paul_tanner's picture
Joined: 05/12/2011
Posts: 12

Re: Custom Tags Plugin

Thx guys, These comments are very helpful. I'll pursue both the above ideas and report back here.
Already tested @malls method of allowing my tags. Works fine. Also allowed it in <p>, otherwise it creates a paragraph where I might not want one.
Now looking at the video plugin code to see if I can convert back and forth from a marker image.
Paul
Top
Wed, 12/07/2011 - 22:36
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: Custom Tags Plugin

To include 'p', add it to the ExtendDtd method. Anyway, I keep working on a fully functional plugin. If successful, I'll post it here.
Top
Thu, 12/08/2011 - 12:10
paul_tanner
paul_tanner's picture
Joined: 05/12/2011
Posts: 12

Re: Custom Tags Plugin

Making some progress myself based on @alfonsomi's video plugin code, most of which is clear. The only part I don't get is htmlFilter. There he references his gmaps plugin and "element.attributes.mapnumber" which does not appear to be initialised anywhere. As I'm injecting html not script I don't need this part of the code except that this reference is how he's detecting the fakeelement. Anyway, I'm going to poke around in the DOM and see if I can see how I would do this. Suggestions welcome and thx guys for getting me off base.
Top
Thu, 12/08/2011 - 14:04
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Custom Tags Plugin

:D

Top
Thu, 12/08/2011 - 15:05
paul_tanner
paul_tanner's picture
Joined: 05/12/2011
Posts: 12

Re: Custom Tags Plugin

Thx @alfonsomi. That sheds some light. Much appreciated.
So if you remove that there will be no conversion from internal data to html output. Is that done by some built-in magic? I have a lot to learn about the CKE core.
I had in mind that: 
<mytag arg1="x" arg2="y">
would transpose to: 
<img src="mytag.png" arg1="x" arg2="y">
for WYSIWYG and vice versa for source mode.
Paul
Top
Thu, 12/08/2011 - 15:46
alfonsoml
alfonsoml's picture
Joined: 31/12/2006
Posts: 3735

Re: Custom Tags Plugin

The key for this plugin is that it's using the "fake elements" used also for Flash, that's the easiest way to use any special code without the need to understand all the details about CKEditor and the browsers.

So on loading data the plugin checks for its <video> tags, marks them as fake elements and then CKEditor reverses that step when generating the output HTML.

Of course, you can follow other approaches or make little adjustments about the way that this works, but explaining all of that requires me to check and debug how the code runs to avoid say something that isn't correct. If you use the plugin as a starting point to test your code it shouldn't be too hard to make it work any way that you like.
Top
Thu, 12/08/2011 - 18:59
paul_tanner
paul_tanner's picture
Joined: 05/12/2011
Posts: 12

Re: Custom Tags Plugin

Many thx @alfonsoml - so we only need to filter it one way.

I got this working with a stripped down plugin after I realised that you have pull in the 'fakeobjects' plugin which I had wrongly supposed to be a core function. Pleased to note that no attributes are lost in the process.

Lots more to do to make an input dialog etc but thx for getting me moving.

Once a dialog is in I'll post the code.

Paul
Top
Tue, 12/20/2011 - 14:18
paul_tanner
paul_tanner's picture
Joined: 05/12/2011
Posts: 12

Re: Custom Tags Plugin

The above suggestion was indeed helpful. Many thx again to @alfonsoml. Studying the code around FakeImages helped me create a first prototype. This is posted on my github (paultanner). I stress that this is early and incomplete, however, it might get you going. If anyone wants to post any enhancements that would be useful.

BTW. I should also note that I wasted a lot of time cutting and pasting .js (which I later rewrote completely). The problem is that when working on a Mac at command line level e.g. with vi, you can get invisible crud in the file. In the end I used od -bc to find and fix the crud. It seems to happen if you view a .js file in the browser and copy from there then paste elsewhere. You then get errors which bear no relation to the code. Anyway, it certainly works a lot better when the files are all clean and in utf-8.
Top
Thu, 02/02/2012 - 16:23
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: Custom Tags Plugin

complete custom tag plugin












// ... here is the original language file
   pubme :
   {
// ... here I have some more language definitions for my cms system
      _pubme_extratags :
      {
         youtube :
         {
            fakeObjectTitle : "Video object (YouTube, Vimeo, Stream.cz)",
            mainMenu : "Video (YouTube, Vimeo, Stream.cz)",
            properties : "Video properties (YouTube, Vimeo, Stream.cz)",
            source : "Video source",
            explainsource : "YouTube: link generated by the 'Share' button<br />Others: url of the website with the video<br />&nbsp;",
            width : 'Video width (px)',
            height : 'Video height (px)',
            title : 'Title (name of the video)'
         }
      }
   }



preg_match_all ("/<youtube([^>]*)>/i",$Article,$Matches);
   if (!empty($Matches[0]))
   {
      $DefaultWidth = 640; // 16/9 default
      $DefaultHeight = 360;      
      $i=0;
      while (isset($Matches[0][$i]))
      {
         $inner = $Matches[1][$i];
         $attributes = Array ();
         while ( strpos($inner,"=") !== false )
         {
            $pos = strpos($inner,"=");
            $attribute = substr ( $inner, 0, $pos );
            if (strpos($inner," ") !== false )
               $attribute = substr($attribute,strrpos($attribute," ")+1);
               
            $attribute = trim ($attribute);

            $pos = false;
            $pos1 =  strpos($inner,"'");
            $pos2 =  strpos($inner,'"');
            $pos3 =  strpos($inner,'>');                  

            if ($pos1 !== false)
               $pos = $pos1;

            if ($pos2 !== false && ($pos2<$pos || $pos === false) )
               $pos = $pos2;

            if ($pos3 !== false && ($pos3<$pos || $pos === false) )
               $inner = "";
               
            $useChar = substr ( $inner, $pos, 1 );
            $inner = substr ( $inner , $pos + 1 );

            if ( strpos ( $inner, $useChar ) !== false )
            {
               $pos = strpos ($inner, $useChar );
               $attributeValue = trim (substr ( $inner, 0, $pos ));
               $inner = substr ( $inner, $pos + 1 );
               $attributes [ $attribute ] = $attributeValue;
            }
            else
               $inner = "";            
         }
         
         if ( empty ($attributes["width"]) && empty ($attributes["height"]) )
         {
            $attributes["width"] = $DefaultWidth;
            $attributes["height"] = $DefaultHeight;
         }
         elseif ( empty ($attributes["width"]) )
            $attributes["width"] = round ( $DefaultWidth / $DefaultHeight * $attributes["height"] );
         elseif ( empty ($attributes["height"]) )
            $attributes["height"] = round ( $DefaultHeight / $DefaultWidth * $attributes["width"] );
            
         $usePlayer = "default";
         
         if ( strpos ( $attributes["src"], "vimeo.com" ) !== false )
            $usePlayer = "vimeo";
         elseif ( strpos ( $attributes["src"], "stream.cz" ) !== false )
            $usePlayer = "stream";
          
         if ( strpos ($attributes["src"],"/") === false )
            $attributes["src"] = "/" . $attributes["src"];
            
         $attributes["src"] = substr ( $attributes["src"], strrpos ( $attributes["src"], "/" ) + 1 );
         
         $title = "";
         if ( !empty ($attributes["title"]) )
            $title = " title = \"" . cms_htmlspecialchars ($attributes["title"]) . "\"";

         switch ( $usePlayer )
         {
            case "vimeo":
               $youtubeTag = "<iframe src=\"http://player.vimeo.com/video/{$attributes["src"]}?title=0&amp;byline=0&amp;portrait=0\" width=\"{$attributes["width"]}\" height=\"{$attributes["height"]}\"{$title}  class=\"pubmevideo pubmevideo_vimeo\" frameborder=\"0\" webkitAllowFullScreen=\"true\" mozallowfullscreen=\"true\" allowFullScreen=\"true\"></iframe>";
               break;
            case "stream":
               $youtubeTag = "<object value=\"http://www.stream.cz/object/{$attributes["src"]}\" width=\"{$attributes["width"]}\" height=\"{$attributes["height"]}\"{$title} class=\"pubmevideo pubmevideo_stream\">"
                  . "<param name=\"movie\" id=\"VideoSpot\">"
                  . "<param name=\"allowfullscreen\" value=\"true\">"
                  . "<param name=\"allowscriptaccess\" value=\"always\">"
                  . "<embed src=\"http://www.stream.cz/object/{$attributes["src"]}\" width=\"{$attributes["width"]}\" height=\"{$attributes["height"]}\" type=\"application/x-shockwave-flash\" allowfullscreen=\"true\" allowscriptaccess=\"always\">"
                  . "</object>"
                  ;
               break;
            default:
               if ( strpos ( $attributes["src"], "watch?" ) === 0 && strpos ( $attributes["src"], "=" ) !== false )
                  $attributes["src"] = substr ( $attributes["src"], strpos ( $attributes["src"], "=" ) + 1 );                  
               $youtubeTag = "<iframe src=\"http://www.youtube.com/embed/{$attributes["src"]}\" width=\"{$attributes["width"]}\" height=\"{$attributes["height"]}\"{$title} frameborder=\"0\" allowfullscreen=\"true\" class=\"pubmevideo pubmevideo_youtube\"></iframe>"; 
               break;
         }

         $Article = str_replace ( $Matches[0][$i], $youtubeTag, $Article );
         $i++;
      }
   }




Malis @ Pub-Me Content Management System

Attachments: 

AttachmentSize
Package icon YouTube8.09 KB
Top
Thu, 02/02/2012 - 16:48
malis
malis's picture
Joined: 25/02/2008
Posts: 22

Re: Custom Tags Plugin

Perhaps an image of what the plugin looks like might also help so here it is (don't mind some Czech texts in the background, it is a development version of a content management system):

Attachments: 

AttachmentSize
Image icon youtube.png73.93 KB
Top
Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check