This part is for those who want to add inline editing, using your template to add the inline editable regions. This is, in fact, similar to Approach 2. But you will use Joomla’s layout override system.

Okay before we start, we are going to create a directory structure as follows, if you have not already done so:

+files_inlinemycck   [FILES_INLINE + COMPONENT NAME]
|
------+contexts
|
---+mycck            [COMPONENT NAME]
|
-----category.php  	[TYPE NAME as explained in XML]
|
-----item.php        [TYPE NAME as explained in XML]
|
-----blog.php        [TYPE NAME as explained in XML]
|
index.html
|
inlinemyck.xml  [INLINE +  COMPONENT NAME].xml

Do not worry about the content you need to put into the files for now, that will be explained in detail later, for now just create the folders and files for your component.

Now, in your site’s template folder for your default template, you should make a copy of the existing view for your extension you want inline editing support.

So, the file system structure will be as follows:

TEMPLATE_NAME/html/EXTENSION_NAME/VIEW_NAME/LAYOUT_NAME.php

If you are using a template from a well know template club, there is a good chance they are probably doing this already.

So, for our MyCCK component, we will need to copy the item and category layout files and place them in the html folder as follows:

1.    TEMPLATE_NAME/html/com_mycck/item/default.php

2.    TEMPLATE_NAME/html/com_mycck/category/blog_item.php

3.    TEMPLATE_NAME/html/com_mycck/category/blog.php

Now, let's see how to adjust the layouts to add inline editing support.

Let us start with the default layout for the item view.

Please note: This is an oversimplified version of the actual layout file, so that we keep things simple and remove any unnecessary stuff that is only specific to our component, and may have no relevance for your component.

<?php
	$dispatcher = JEventDispatcher::getInstance();
	JPluginHelper::importPlugin('inline');
?>
<?php if ($params->get('show_title') || $params->get('show_author')) : ?>
<div class="page-header">
	<h2 class="name">
		<?php if ($params->get('show_title')) : ?>
			<?php 
				$title= $this->escape($this->item->title);
				$dispatcher->trigger('editable',array(&$title, array('id'=>$this->item->id,'context'=>'mycck','itemtype'=>'item','type'=>'title')));
				echo $title;	
			?>	
		<?php endif; ?>
	</h2>
</div>
<?php endif; ?>
<div class="item-body">
	<?php 
		$dispatcher->trigger('editable',array(&$this->item->text, array('id'=>$this->item->id,'context'=>'mycck','itemtype'=>'item')));
		echo $this->item->text; 
	?>	
</div>

So in our example, just as in Approach 2, we call the inline editing 'inline' plugin via Joomla’s event dispatcher class. And here, we fire off the plugin twice: Once to draw the editable region for the item title, and secondly for the item’s main body text.

The parameters passed into the inline plugin I will explain again, in case you skipped the previous section.

The plugin just requires two parameters.

•    The text to add editable reason

•    Configuration settings

 

Inline plugin configuration settings are as follows:

1.    Id of current item

2.    Component name

3.    Item Type (Item, Category, and  Blog)

4.    Type (Possible values are 'body' and 'title'. This defaults to body and can be omitted. The value ‘title’ means no HTML will be allowed, and any found in the content will be stripped out)

Now, let us look at what we do, to add inline editing support, to the category blog view:

<?php if ($params->get('show_title') || $this->item->publish == 0 || $this->item->params->get('show_author') ) : ?>
	<div class="page-header">

		<?php if ($this->item->params->get('show_title')) : ?>
			<h2 class="name">
				<?php if ($this->item->params->get('link_titles') && $this->item->params->get('access-view')) : ?>
					
					<a href="/<?php echo JRoute::_($this->item->link); ?>">
					<?php 
						$title= $this->escape($this->item->title);
						$dispatcher->trigger('editable',array(&$title, array('id'=>$this->item->id,'context'=>'mycck','itemtype'=>'item','type'=>'title')));
						echo $title;	
					?>	
					</a>
				<?php else : ?>
					<?php 
						$title= $this->escape($this->item->title);
						$dispatcher->trigger('editable',array(&$title, array('id'=>$this->item->id,'context'=>'mycck','itemtype'=>'item','type'=>'title')));
						echo $title;	
					?>	
				<?php endif; ?>
			</h2>
		<?php endif; ?>
	</div>
<?php endif; ?>
<?php 
	$dispatcher->trigger('editable',array(&$this->item->text, array('id'=>$this->item->id,'context'=>'mycck','itemtype'=>'item')));
	echo $this->item->text; 
?>

As you can see, this code implementation for the category is very similar to the item one. So, again we fire off the inline plugin, to add the editable region when we output the title and text properties from the blog item.

Please note: If you are going to override how the inline editing framework draws the editable region on the page, you will need to disable the ‘Auto draw editable regions in the components’ option, in the Ark Editor global configuration, under the inline tab, for the component you want to do this for.

Lastly, for completeness, we shall show you the code for the leading Category item in the blog view:

<div class="blog<?php echo $this->pageclass_sfx; ?>" itemscope itemtype="http://schema.org/Blog">
	<?php if ($this->params->get('show_category_title', 1) : ?>
		<h2>
			<?php if ($this->params->get('show_category_title')) : ?>
				<span class="category-title">
					<?php
						$title= $this->escape($this->item->title);
						$dispatcher->trigger('editable',array(&$title, array('id'=>$this->item->id,'context'=>'mycck','itemtype'=>'category','type'=>'title')));
						echo $title; 
					?>
				</span>
			<?php endif; ?>
		</h2>
	<?php endif; ?>
	<?php if ($this->params->get('show_description', 1) : ?>
	<div class="category-description">
		<?php if ($this->params->get('show_description') && $this->category->description) : ?>
			<?php 
					$text = JHtml::_('content.prepare', $this->category->description, '', 'com_content.category'); 
					$dispatcher->trigger('editable',array(&$text, array('id'=>$this->item->id,'context'=>'mycck','itemtype'=>'item')));
					echo $text;
			?>
		<?php endif; ?>
	</div>
.......

</div>