tinymce

I am on 6.7.1 on Win. I have this issue to include an additional image on the toolbar after the link,unlink buttons. I could able to change the functionalit or image of any button, but some how couldn't add a single button on tinymce.

can anyone please let me know if they have added an additional button on the toolbar if so please share me the initial procedure.

Thank You

Find more posts tagged with

Comments

tanguyr

can anyone please let me know if they have added an additional button on the toolbar if so please share me the initial procedure.

I don't think you can "just" add an extra button to the standard tinyMCE toolbars, i think you have to go all the way and define custom toolbars. If i am wrong, somebody please correct me, but this is what works for me:

1) in your datacapture.cfg file, you need to add an attribute external-editor-config to your textarea tag. Here's mine:


<textarea external-editor="tinymce" external-editor-config="sdc_config" rows="25" cols="125"/>

2) in the file $IW-HOME/httpd/iw/tinymce/config/custom_config.js, you need to define the toolbars for your custom configuration:


IWTinyMCECustomConfig("sdc_config", "toolbarRow", "link,unlink,anchor,code");

Note that the first parameter to IWTinyMCECustomConfig is the same as the value of the external-editor-config attribute. You can have up to three instances of this toolbarRow call to define the first, second, and third row of buttons - they're all called "toolbarRow":


IWTinyMCECustomConfig("[config_name]", "toolbarRow", "[row1 buttons]");
IWTinyMCECustomConfig("[config_name]", "toolbarRow", "[row2 buttons]");
IWTinyMCECustomConfig("[config_name]", "toolbarRow", "[row3 buttons]");

3) if the button you are trying to add is a non-standard plugin button, you may need to first enable that plugin. For example, IW ships tinymce with the flash plugin, but it isn't enabled by default. If you want to enable it, you need to do:


IWTinyMCECustomConfig("[config_name]","plugins","flash");

then


IWTinyMCECustomConfig("[config_name]", "toolbarRow", "link,unlink,anchor,code,flash");

Note that i'm on 6.7.2, and i think that there were some tinymce-related bugs fixed between 6.7.1 (and the various service packs) and 6.7.2

Hope this helps,
/t

TommyWillB

Excellent straightforward answer tanguyr!

Is there any way to override the location of the custom_config.js file?

$IW-HOME/httpd/iw/tinymce/config/custom_config.js

TommyWillB

I am trying to implment a custom buttons/menus for the FormsPublisher TinyMCE Editors. Unfortunatly these new buttons are not showing up in the editor.

We are using TeamSite 6.7.1 (not yet SP1).

The changes made were based on this DevNet posting:
* http://devnet.interwoven.com/forums_vb/showthread.php?t=26504&forumid=13&highlight=TinyMCE+6.7.1

Changes made:

1) custom_config.js

* /cust/iw-home/httpd/iw/tinymce/config/custom_config.js
** Added out of box "flash" and custom "help_variables" plugins and toolbar additions

[php]
IWTinyMCECustomConfig("HelpAndSupport","plugins","flash,help_variables");

IWTinyMCECustomConfig("HelpAndSupport", "toolbarRow",
"whitespace,styleselect,formatselect,|,bold,bullist,numlist,|,help_variables,|");

IWTinyMCECustomConfig("HelpAndSupport", "toolbarRow",
"cut,copy,paste,pasteword,search,|,undo,\
redo,|,iespell,anchor,link,unlink");

IWTinyMCECustomConfig("HelpAndSupport", "toolbarRow",
"removeformat,visualaid,|,charmap,|,image,table,|,help,|,code");

IWTinyMCECustomConfig("HelpAndSupport", "tableStyles",
"Table Header 1=header1;Table Header 2=header2;Table Header 3=header3");

IWTinyMCECustomConfig("HelpAndSupport", "tableCellStyles",
"Cell Header 1=header1;Cell Header 2=header2;Cell Header 3=header3;Cell Highlight=tablerow1");

IWTinyMCECustomConfig("HelpAndSupport", "tableRowStyles",
"Row Header 1=header1;Row Header 2=header2;Row Header 3=header3;Table Row=tablerow1");

IWTinyMCECustomConfig("HelpAndSupport", "styles",
"Nova Bold=novaBold;Nova Red=novaRed;NovaTableRow=novaTableRow");
[/php]

2) help_variables/editor_plugin.js
* /cust/iw-home/httpd/iw/tinymce/jscripts/tiny_mce/plugins/help_variables/editor_plugin.js
** copied _template directory to help_variables and followed text find/replace instructions
** updated gif icon

3) datacaputure.cfg
* ...WORKAREA\templatedata\help\content\datacapture.cfg
** configured external-editor-config to match custom_config.js

[html]

Content "Blob"
<br />
[/html]

4) DCR > Edit
* I opened the DCR for editing and see the removed/moved buttons
* ... BUT, both the "flash" and "help_variables" are not showing up

5) I cleared browser cache, etc to make sure it wasn't client-side, but I'm seeing the new |'s, etc, so I know the config is loading.

What am I forgetting?

jbonifaci

Tom,

I ran into similar issues creating a custom plugin. The only way I was able to resolve it was by renaming editor_plugin.js to editor_plugin_src.js.

Also, make sure when you are calling addPlugin that you are passing "help_variables" and not "_help_variables" because if you simply did a search and replace on template, that would be the case.

As far as using the flash one, it should work OOTB. Your example doesn't have you adding flash as a button, I'm not sure if that is your problem or if you simply didn't include it.

Let me know if you're still having issues.

~Jeff

TommyWillB

...editor_plugn_src.js...
...passing "help_variables" and not "_help_variables"...

Good points Jeff.

It seems like some of the function names should still have _ prefixes... But the buttons are still not showing up.

Does this editor_plugn_src.js look right?

[php]
/* Import plugin specific language pack */
tinyMCE.importPluginLanguagePack('help_variables', 'en'); // <- Add a comma separated list of all supported languages

/****
* Steps for creating a plugin from this template:
*
* 1. Change all "template" to the name of your plugin.
* 2. Remove all the callbacks in this file that you don't need.
* 3. Remove the popup.htm file if you don't need any popups.
* 4. Add your custom logic to the callbacks you needed.
* 5. Write documentation in a readme.txt file on how to use the plugin.
* 6. Upload it under the "Plugins" section at sourceforge.
*
****/

/**
* Gets executed when a editor instance is initialized
*/
function TinyMCE_help_variables_initInstance(inst) {
// You can take out plugin specific parameters
alert("Initialization parameter:" + tinyMCE.getParam("help_variables_someparam", false));
}

/**
* Gets executed when a editor needs to generate a button.
*/
function TinyMCE_help_variables_getControlHTML(control_name) {
switch (control_name) {
case "help_variables":
return ' ${$lang_help_variables_desc}$ ';
}

return "";
}

/**
* Gets executed when a command is called.
*/
function TinyMCE_help_variables_execCommand(editor_id, element, command, user_interface, value) {
// Handle commands
switch (command) {
// Remember to have the "mce" prefix for commands so they don't intersect with built in ones in the browser.
case "mcehelp_variables":
// Show UI/Popup
if (user_interface) {
// Open a popup window and send in some custom data in a window argument
var help_variables = new Array();

help_variables['file'] = '../../plugins/help_variables/popup.htm'; // Relative to theme
help_variables['width'] = 150;
help_variables['height'] = 180;

tinyMCE.openWindow(help_variables, {editor_id : editor_id, some_custom_arg : "somecustomdata"});

// Let TinyMCE know that something was modified
tinyMCE.triggerNodeChange(false);
} else {
// Do a command this gets called from the help_variables popup
alert("execCommand: mcehelp_variables gets called from popup.");
}

return true;
}

// Pass to next handler in chain
return false;
}

/**
* Gets executed when the selection/cursor position was changed.
*/
function TinyMCE_help_variables_handleNodeChange(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
// Deselect help_variables button
tinyMCE.switchClassSticky(editor_id + 'help_variables', 'mceButtonNormal');

// Select help_variables button if parent node is a strong or b
if (node.parentNode.nodeName == "STRONG" || node.parentNode.nodeName == "B")
tinyMCE.switchClassSticky(editor_id + 'help_variables', 'mceButtonSelected');

return true;
}

/**
* Gets executed when contents is inserted / retrived.
*/
function TinyMCE_help_variables_cleanup(type, content) {
switch (type) {
case "get_from_editor":
alert("[FROM] Value HTML string: " + content);

// Do custom cleanup code here

break;

case "insert_to_editor":
alert("[TO] Value HTML string: " + content);

// Do custom cleanup code here

break;

case "get_from_editor_dom":
alert("[FROM] Value DOM Element " + content.innerHTML);

// Do custom cleanup code here

break;

case "insert_to_editor_dom":
alert("[TO] Value DOM Element: " + content.innerHTML);

// Do custom cleanup code here

break;
}

return content;
}

tinyMCE.addPlugin("help_variables", true);
[/php]

Looking at the form HTML source, it seems it seems like this JS is not even being included (Nor is the flash one, which is in my custom_config.js):
[html]
// Include all javascript editor js files
ExternalEditorFactory.enableEditors = function(html) {
// TinyMCE
if (getDcrMainWindowRef().isValidEditor("tinymce")){
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
html.append('\n');
}
[/html]

TommyWillB

BTW, IWOV support finally concluded this is not possible without moving to 6.7.1 SP1.

LooseCannon

I realize that this thread is over a year old but I have a ticket opened with support on issues with enabling a custom TinyMCE plugin and they said that custom plugins are not yet supported. I'm running TS 672 SP2.

Maybe TS 8 Smiley Sad

Crsb

I realize that this thread is over a year old but I have a ticket opened with support on issues with enabling a custom TinyMCE plugin and they said that custom plugins are not yet supported. I'm running TS 672 SP2.

Maybe TS 8

How familiar are you with TinyMCE code?
If you can get your custom plugin to work outside TS, it is easy to integrate it with TS.

LooseCannon

How familiar are you with TinyMCE code?
If you can get your custom plugin to work outside TS, it is easy to integrate it with TS.

Yea, I got the plugin to work outside of TS, ie, http://ts_server/iw/tinymce/examples/ but it doesn't display in a DCT. I followed the instructions as outlined in the FormsPublisher Guide under Configuring TinyMCE > Customizing TinyMCE > Creating Custom Plugins and the TinyMCE docs but to avail.

Have you successfully enabled custom plugins in TS for inline TinyMCE editors? I have no interest in doing callouts and opening the editor in a second window.

namithapai

I have been able to use certain but not all plugins.

I could not use : Template, image, file
I did you table extras to give additional functionality to create table. I can share my code if anyone is interested.

LooseCannon

I have been able to use certain but not all plugins.

I could not use : Template, image, file
I did you table extras to give additional functionality to create table. I can share my code if anyone is interested.

I do not want to enable or modify existing plugins, but rather build a new one to insert html, eg. wrap selected text in a class or insert a copyright character, etc...

Have you successfully achieved this?

namithapai

You will get better support on building new plugins at the tinymce support site.

I have only used plugins from there. Not created my own.

LooseCannon

You will get better support on building new plugins at the tinymce support site.

I have only used plugins from there. Not created my own.

Custom plugins are not supported for use with Forms Publisher.

kgrimm

Are you saying that the directions from the 7.1 Forms Developer Guide under the heading: Creating Custom Plug-ins will not work? I'm trying to get a custom plugin to load under TinyMCE using those exact steps. I have no problems using the custom plugin in a standalone TinyMCE instance, it is only when attempting to configure it through TeamSite that it fails to load.

kgrimm

I was able to get a custom plugin to load, once properly configured clearing the cache did the trick.

LooseCannon

Are you saying that the directions from the 7.1 Forms Developer Guide under the heading: Creating Custom Plug-ins will not work?

Yup, according to support and my experiences.

I'm trying to get a custom plugin to load under TinyMCE using those exact steps. I have no problems using the custom plugin in a standalone TinyMCE instance, it is only when attempting to configure it through TeamSite that it fails to load.

Same issue I had. I have a project coming down the pike with a flash plugin requirement that I'm still uncertain how to handle. I like TinyMCE over VF but this custom plugin / Forms Publisher integration issue needs resolved.

retesh

Hi Guys,
Creating custom plugins work in TS 7.3.2 as mentioned in Formspub/sitedev guide.
Initially it did not appear for us. Eventually 2 point solved the problem :
1. Browser Cache Clear
2. Reusing an icon provided in icon.gif by adding one line in UI.css for our plugin.

Now am looking out for 2 activities. Please help with your suggestions:
1. How to customize formatselect to add mor attribute in the dropdown (example cite, abbr, small, dfn, ins etc.)
2. To add one icon image to be recognized for new plugin added, whats the best approcah - (a.) Modify existing sprite icon.gif (b.) Add one single image in teamsite.

Thanks,
Retesh

retesh

Hi Guys,
Creating custom plugins work in TS 7.3.2 as mentioned in Formspub/sitedev guide.
Initially it did not appear for us. Eventually 2 point solved the problem :
1. Browser Cache Clear
2. Reusing an icon provided in icon.gif by adding one line in UI.css for our plugin.

Now am looking out for 2 activities. Please help with your suggestions:
1. How to customize formatselect to add mor attribute in the dropdown (example cite, abbr, small, dfn, ins etc.)
2. To add one icon image to be recognized for new plugin added, whats the best approcah - (a.) Modify existing sprite icon.gif (b.) Add one single image in teamsite.

Thanks,
Retesh

Am now able to populate formatselect dropown with custom tags (INS, DFN etc) With the help of this post - http://devnet.interwoven.com/forums_vb/showthread.php?t=30788&forumid=66&highlight=tinymce+formatselect

Now, my problem is on selecting INS in the drop down my selected text is not being wrapped in start and close tags.

I have tried modifying isBlock() and Format Block function in tinymce_src.js but even that doesnt worked. Any pointer guys, how should I wrap the selected text in editor by the chose tag in Format Dropdown.
This is required in DCT and not Sitepublisher.

retesh

Am now able to populate formatselect dropown with custom tags (INS, DFN etc) With the help of this post - http://devnet.interwoven.com/forums_vb/showthread.php?t=30788&forumid=66&highlight=tinymce+formatselect

Now, my problem is on selecting INS in the drop down my selected text is not being wrapped in start and close tags.

I have tried modifying isBlock() and Format Block function in tinymce_src.js but even that doesnt worked. Any pointer guys, how should I wrap the selected text in editor by the chose tag in Format Dropdown.
This is required in DCT and not Sitepublisher.

One correction to earlier post, I need to support following tags instead of ins in the dropdown. INS is already supported in insertdatetime plugin.
small, dfn, ins, mark