Custom Plugin for JCE

Need help with a WYSIWYG-editor in Joomla! 1.0.x? This is the place to be.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Locked
Vitrivius
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Mon Mar 13, 2006 2:05 pm

Custom Plugin for JCE

Post by Vitrivius » Tue Mar 28, 2006 1:48 pm

I am using a special icon at the end of most of the content om my site, and I want to make a button i JCE that automatically places this icon. Basically I want to insert this HTML code:

Code: Select all

<a href="/index.php"><img src="/images/stories/imagonem_i_.png" border="0" alt="imagonem_i_" title="imagonem_i_" hspace="5" vspace="0" width="16" height="16" align="middle" /></a>
How do I do this?

User avatar
happy_noodle_boy
Joomla! Guru
Joomla! Guru
Posts: 692
Joined: Thu Aug 18, 2005 10:32 am
Location: United Kingdom
Contact:

Re: Custom Plugin for JCE

Post by happy_noodle_boy » Tue Mar 28, 2006 2:17 pm

Create a new folder in the plugins folder with the name of the plugin example: myplugin

Using some kind of editor, you need to create a javascript file called editor_plugin.js with these contents:

Code: Select all

/* Import plugin specific language pack */
tinyMCE.importPluginLanguagePack('myplugin', tinyMCE.getParam('lang_list'));

var TinyMCE_MyPlugin = {
    getControlHTML : function(cn) {
		switch (cn) {
			case "myplugin":
				return tinyMCE.getButtonHTML(cn, 'lang_myplugin_desc', '{$pluginurl}/images/myplugin.gif', 'mceMyPlugin');
		}

		return "";
	},
    execCommand : function(editor_id, element, command, user_interface, value) {
		// Handle commands
		switch (command) {
			case "mceMyPlugin":
                var html = '<a href="/index.php"><img src="/images/stories/imagonem_i_.png" border="0" alt="imagonem_i_" title="imagonem_i_" hspace="5" vspace="0" width="16" height="16" align="middle" /></a>';
                tinyMCE.execCommand(mceInsertContent, false, html);
			return true;
	   }
        return false;
    }
};

tinyMCE.addPlugin("myplugin", TinyMCE_MyPlugin);
Then you need an images folder containing the plugin icon, with the same name as the plugin itself, and a langs folder containing at least an en.js file with the following contents:

Code: Select all

tinyMCE.addToLang('myplugin',{
desc : 'My new plugin'
});
For it to be install by JCE, it must have an xml file, which for this plugin would look like this:

Code: Select all

<?xml version="1.0" ?>
<mosinstall version="1.0.0" type="jceplugin" plugin="myplugin">
	<name>My Plugin</name>
	<version>1.0.0</version>
	<creationDate>2006</creationDate>
	<author>Joe Schmo</author>
	<authorEmail>joe@schmo.com</authorEmail>
	<authorUrl>http://someurl.com</authorUrl>
	<copyright>Joe Schmo</copyright>
	<license>GPL</license>
	<description></description>
	<icon>myplugin</icon>
	<layout_icon>myplugin</layout_icon>
	<elements></elements>
	<files>
        <filename plugin="myplugin">editor_plugin.js</filename>
        <filename>langs/en.js</filename>
        <filename>images/myplugin.gif</filename>
    </files>
</mosinstall>
Zip it all up to create an install package.

Hope that helps. Take a look at other plugins for more info.
Last edited by happy_noodle_boy on Tue Mar 28, 2006 2:19 pm, edited 1 time in total.
just because you're not paranoid, doesn't mean everybody isn't out to get you.
http://www.maketradefair.org

Vitrivius
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Mon Mar 13, 2006 2:05 pm

Re: Custom Plugin for JCE

Post by Vitrivius » Tue Mar 28, 2006 3:10 pm

Thanks a lot for the quick reply.

I've done exactly like you said, and I managed to install the plugin and put it on the toolbar, but nothing happens when I press the button.

The javascript console in Firefox 1.5 gives this error:
Error: mceInsertContent is not defined
editor_plugin.js
Line: 18
I copied and pasted the exact code in your post ( I dont know any javascript ) and I made a custom 16 x 16 gif for the button. Any Idea what might be wrong?

I'm using version 1.0.4 of JCE Editor Mambot
Last edited by Vitrivius on Tue Mar 28, 2006 4:35 pm, edited 1 time in total.

Vitrivius
Joomla! Apprentice
Joomla! Apprentice
Posts: 29
Joined: Mon Mar 13, 2006 2:05 pm

FIXED

Post by Vitrivius » Tue Mar 28, 2006 4:22 pm

I googled for similar scripts and found out what was wrong.
I have to change line 18 in editor_plugin.js from

Code: Select all

                tinyMCE.execCommand(mceInsertContent, false, html);
to

Code: Select all

                tinyMCE.execCommand("mceInsertContent", false, html);
Now it's working!

I've included the working plugin zip if anyone wants to make a similar custom plugin.
You do not have the required permissions to view the files attached to this post.
Last edited by Vitrivius on Tue Mar 28, 2006 4:36 pm, edited 1 time in total.

User avatar
happy_noodle_boy
Joomla! Guru
Joomla! Guru
Posts: 692
Joined: Thu Aug 18, 2005 10:32 am
Location: United Kingdom
Contact:

Re: Custom Plugin for JCE

Post by happy_noodle_boy » Wed Mar 29, 2006 6:21 am

Sorry, I rushed throught this yesterday afternoon before leaving work. On the way home I had a feeling I had left something out, turns out I was right!  :-[
just because you're not paranoid, doesn't mean everybody isn't out to get you.
http://www.maketradefair.org

fca07
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Apr 10, 2006 8:52 am

Re: Custom Plugin for JCE

Post by fca07 » Fri Jul 07, 2006 5:52 pm

hi!

i nee a plugin that inserts before and after a marked text.
can someone tell me how this gets impemented???

mfg
Markus

fca07
Joomla! Apprentice
Joomla! Apprentice
Posts: 15
Joined: Mon Apr 10, 2006 8:52 am

Re: Custom Plugin for JCE

Post by fca07 » Mon Jul 10, 2006 9:29 pm

i have the following code:

Code: Select all

/* Import plugin specific language pack */
tinyMCE.importPluginLanguagePack('marquee', tinyMCE.getParam('lang_list'));

var TinyMCE_MyPlugin = {
    getControlHTML : function(cn) {
		switch (cn) {
			case "marquee":
				return tinyMCE.getButtonHTML(cn, 'lang_marquee_desc', '{$pluginurl}/images/marquee.gif', 'marquee');
		}

		return "";
	},
    execCommand : function(editor_id, element, command, user_interface, value) {
		// Handle commands
		switch (command) {
			case "marquee":
                var html = '<marquee>{$selection}</marquee>';
                tinyMCE.execInstanceCommand(editor_id, 'mceReplaceContent', false, html);
			return true;
	   }
        return false;
    }
};

tinyMCE.addPlugin("marquee", TinyMCE_MyPlugin);
in tiny_mce.js i added marquee to valid_elements.

problem 1: if  i for example mark a text with testtext
the text gets replaced by testtext
but it should look like: testtext

problem 2: preview does not work

problem 3: there should be the function to remove marquee if it is added to a text.

Markus  :( ??? :-[ :'(

rohanspf
Joomla! Apprentice
Joomla! Apprentice
Posts: 23
Joined: Sun Mar 21, 2010 10:00 pm

Re: Custom Plugin for JCE

Post by rohanspf » Mon Aug 30, 2010 9:02 pm

Hi guys. I'm trying to do something similar with my own custom JCE plugin - but I can't seem to install it.
An error displays:

* Incorrect version!
* Unable to detect manifest file

But I'm unsure where to go to from here. Could anyone point me in the right direction?

My directory is as follows:

myplugin
editor_plugin.js
myplugin.xml
index.html
img (folder) - myplugin.gif, index.html
langs (folder) - en.js, index.html

My files:

myplugin.xml

Code: Select all

<?xml version="1.0" ?>
<install version="1.5" type="jceplugin" plugin="myplugin">
   <name>My Plugin</name>
   <version>1.0.0</version>
   <creationDate>2010</creationDate>
   <author>Rohan Weston</author>
   <authorEmail>rohan@spfmultimedia.co.nz</authorEmail>
   <authorUrl>http://www.spfmultimedia.co.nz/</authorUrl>
   <copyright>Rohan Weston</copyright>
   <license>GPL</license>
   <description><![CDATA[
   <p>My Plugin 1.0.0</p>
   <p>An easy way to insert Te Reo Maori macrons into an article.</p>
   ]]></description>
   <icon>myplugin</icon>
   <layout_icon>myplugin</layout_icon>
   <elements></elements>
   <files>
        <filename>editor_plugin.js</filename>
		<filename>index.html</filename>
        <filename>langs/en.js</filename>
		<filename>lang/index.html</filename>
        <filename>img/myplugin.gif</filename>
		<filename>img/index.html</filename>
    </files>
</install>
editor_plugin.js

Code: Select all

/* Import plugin specific language pack */
tinyMCE.importPluginLanguagePack('myplugin', tinyMCE.getParam('lang_list'));

var TinyMCE_MyPlugin = {
    getControlHTML : function(cn) {
      switch (cn) {
         case "myplugin":
            return tinyMCE.getButtonHTML(cn, 'lang_myplugin_desc', '{$pluginurl}/img/myplugin.gif', 'mceMyPlugin');
      }

      return "";
   },
    execCommand : function(editor_id, element, command, user_interface, value) {
      // Handle commands
      switch (command) {
         case "mceMyPlugin":
                var html = '<p>Why hello there, world.</p>';
                tinyMCE.execCommand("mceInsertContent", false, html);
         return true;
      }
        return false;
    }
};

tinyMCE.addPlugin("myplugin", TinyMCE_MyPlugin);
en.js

Code: Select all

tinyMCE.addToLang('myplugin',{
desc : 'My new plugin'
});
Looking forward to any replies, and thanks in advance!

Note: I get the same error when installing Vitrivius' working plugin too :(


Locked

Return to “WYSIWYG Editors - 1.0.x”