How to insert the link taken from the Link Provider to the content editor

From TomatoCMS Documentation

Jump to: navigation, search

At the article adding/editing page, we call all hook which has been applied for a target named News_Article_Add_ShowSidebar to show other elements which user want to have in the right side of these pages.
You can see the following line in /application/modules/news/views/scripts/article/add.phtml and /application/modules/news/views/scripts/article/edit.phtml

Tomato_Hook_Registry::getInstance()->executeAction('News_Article_Add_ShowSidebar');

So, create new hook, and apply it for News_Article_Add_ShowSidebar target.

Contents

Create hook directory

In the /application/modules/news/hooks/ directory, create a sub-directory named internallinks. It is also the hook name.
In the hook directory, I create a file named about.xml which is used for storing the hook information.
Put the following content to this file:

/application/modules/news/hooks/internallinks/about.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hook SYSTEM "http://schemas.tomatocms.com/dtd/hook_about.dtd">
<hook>
   <name>InternalLinks</name>
   <module>news</module>
   <description><![CDATA[Insert the links taken from Link Provider to the editor]]></description>
   <thumbnail></thumbnail>
   <author>TomatoCMS Core Team</author>
   <email>core@tomatocms.com</email>
   <version>2.0.8</version>
   <license>free</license>
</hook>

Also, in the hook directory, we have to create a file named Hook.php and create a class that extends from Tomato_Hook class:

/application/modules/news/hooks/internallinks/Hook.php:

<?php
class News_Hooks_InternalLinks_Hook extends Tomato_Hook
{
   public static function action()
   {
      echo 'Internal Links';
   }
}

There are two kinds of hook:

  • filter, which is used to filter the value.

The filter hooks have to contain the method named public static function filter and this method has to return the value.

  • and action, which is use to process the data and don't need to return the value.

This kind of hook has to implement method named public static function action.
Our hook will be used to show the Link Provider, and it will be the action hook, not the filter hook.

Install hook

In the back-end section, go to the System > Extend > Hook menu, click on the news label from the list of modules and click on the Install button in the internallinks hook section.

You will see that all the hook information here (1, 2, 3, 4) are taken from the hook information file (about.xml).

File:installhook.png

Apply hook

We will apply our hook for a target named News_Article_Add_ShowSidebar.
Go to the System > Extend > Hook Target menu, select the internallink from the list of available hook (1) associating with News_Article_Add_ShowSidebar section, and click on the Add link (2).

File:applyhook.png

Next, if you go to the adding article page, you will see the "Internal Links" message which comes from News_Hooks_InternalLinks_Hook ::action method.

File:hookavailable.png

Implement hook

As you see, the hook works. Now, it is the time to implement the hook feature:

  • Show Link Provider
  • Insert the link to article content editor when user click on the link

In the hook directory, I create a file named show.phtml which will be used as view script.
We can render this script by calling:

/application/modules/news/hooks/internallinks/Hook.php

<?php
class News_Hooks_InternalLinks_Hook extends Tomato_Hook
{
   public static function action()
   { 
      // (1)
      $viewRenderer = Zend_Controller_Action_HelperBroker::getStaticHelper('viewRenderer');
      $view = $viewRenderer->view;
 
      // (2)
      $view->addScriptPath(dirname(__FILE__));      
 
      // (3)
      echo $view->render('show.phtml');
   }
}

I am sure that you are familiar with the lines I used above:

  • (1): Get the view instance
  • (2): Add current hook directory to the list of directories where the view can find the script to render
  • (3): Render the script

In the view script (show.phtml), I use the LinkProvider view helper (provided by core module) to show the Link Provider:

/application/modules/news/hooks/internallinks/show.phtml

<div class="t_a_bottom">
   <div class="t_a_ui_helper_line">
      <h3>Internal Links</h3>
   </div>
   <div>
      <div class="t_a_bottom">
         Click on the link below to insert it to the content editor:
      </div>
      <div class="t_a_bottom">
         <?php echo $this->linkProvider(array('jsCallback' => 'insertLinkToEditor')); ?>
      </div>
   </div>
</div>
<script type="text/javascript">
function insertLinkToEditor(route, href, title) {
   alert('route=' + route + '; href=' + href + '; title=' + title);
};
</script>

Note that I passed insertLinkToEditor to jsCallback parameter.
This is name of callback method used to handle when user click on the link from Link Provider.
The callback method has three parameters which are described as following:

  • route: The route associating with the link
  • href: The link target
  • title: The link title

For example, if you click on the Homepage link from Link Provider, then you will get:
route = core_index_index
href = /tomatocms/index.php/en_US/
title = Homepage

File:click_link_of_linkprovider.png

Now, the remaining task is very simple. Just insert the selected link to TinyMCE Editor by using:

function insertLinkToEditor(route, href, title) {
   tinyMCE.getInstanceById('content').execCommand('mceInsertContent', false, '<a href="' + href + '">' + title + '</a>');
};

The result is great:

File:insertlink.png

Personal tools