Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Episerver TinyMCE plugin

Vote:
 

I'm newer of Episerver I must to add a plugin of TinyMCE editor


my versions:Episerver version 8.3.0TinyMce version 3.9.3 (release of 2010-12-20)


I have a plugin that works on TinyMce 3 (release of 2011-03-10) on umbraco system i want to use same plugin on Episerver
I do all the steps in the article here http://world.episerver.com/documentation/Items/Developers-Guide/EPiServer-CMS/7/Editing/Customizing-the-TinyMCE-Editor/
it not work completly,
when I edit the page in CMS->Administrator -> "kind of content" -> page ->field Work (i can see the button and i can drag and add to the menu)

When i try to edit the page i cannot see the button

Somebody can help me? 

#131890
Aug 07, 2015 16:38
Vote:
 

Can you please provide us with your code?

#131895
Aug 08, 2015 20:53
Vote:
 

#episerver CMS is into folder:
#/ROOT_PROJECT/modules/_protected/CMS/EPiServer.Cms.Shell.UI.zip

#ROOT_PROJECT/Web.config
...
<episerver>
<workflowSettings disable="true" />
<applicationSettings httpCacheability="Public" pageValidateTemplate="false" uiShowGlobalizationUserInterface="true" uiUrl="~/EPiServer/CMS/" urlRebaseKind="ToRootRelative" uiEditorCssPaths="~/Static/css/Editor.css" uiSafeHtmlTags="b,i,u,br,em,strong,p,a,img,ol,ul,li" />
<imageEditor windowWidth="900" windowHeight="600" enabled="true">
<sizePresets>
<preset name="320*240" width="320" height="240" />
<preset name="640*480" width="640" height="480" />
</sizePresets>
</imageEditor>
<!--tinyMCE -->
<tinyMCE mergedConfigurationProperties="valid_elements, extended_valid_elements, invalid_elements, valid_child_elements"/>
</episerver>
...
<virtualPathProviders>
<clear />
<!-- virtual Path per tinyMCE -->
<add name="TinyMCEPlugins" virtualPath="~/Util/Editor/tinymce/plugins" physicalPath="Util/Editor/tinymce/plugins" type="EPiServer.Web.Hosting.VirtualPathNonUnifiedProvider, EPiServer.Framework" />
<!-- end -->
<add name="ProtectedModules" virtualPath="~/EPiServer/" physicalPath="Modules\_Protected" type="EPiServer.Web.Hosting.VirtualPathNonUnifiedProvider, EPiServer.Framework" />
</virtualPathProviders>
...


using EPiServer.Editor.TinyMCE;
using EPiServer.Editor.TinyMCE.Plugins;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace myproject
{

[TinyMCEPluginButton(PlugInName = "myplugin",
ButtonName = "myplugin_name",
GroupName = "myplugin_group",
LanguagePath = "Editor/tinymce/plugins/myplugin",
IconUrl = "Editor/tinymce/plugins/myplugin/icon.gif"
,EditorInitConfigurationOptions = "{ extended_valid_elements:'p', plugins:'myplugin'}"
//, DefaultEnabled = true
)
]
public class Myplugin: IDynamicConfigurationOptions
{
public IDictionary<string, object> GetConfigurationOptions()
{
Dictionary<string, object> customSettings = new
Dictionary<string, object>();
// Nothing added
return customSettings;
}
}

}

#All Plugin files are located into his folder
#ROOT_PROJECT/Util/Editor/tinymce/plugins/myplugin


#editor_plugin.js
(function () {
tinymce.create('tinymce.plugins.myplugin', {
init: function (ed, url) {
this.editor = ed;

// Register commands
ed.addCommand('mcemyplugin', function () {
var se = ed.selection;
ed.windowManager.open({
file: '/Util/Editor/tinymce/plugins/myplugin/dialog.htm',
width: 480,
height: 150,
inline: 1
}, {
plugin_url: url
});
});

// Register buttons
ed.addButton('myplugin', {
title: 'myplugin title',
image: '/Util/Editor/tinymce/plugins/myplugin/legge.gif',
cmd: 'mcemyplugin'
});

},

getInfo: function () {
return {
longname: 'myplugin name',
author: 'Author',
authorurl: 'http://www.notexits.com',
version: tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});

// Register plugin
tinymce.PluginManager.add('myplugin', tinymce.plugins.myplugin);

})();

#131912
Edited, Aug 10, 2015 10:13
Vote:
 

Hi, 

Can you check if you have any errors in the console?

BR,

Marija

#132710
Aug 17, 2015 17:43
Vote:
 
#133469
Sep 07, 2015 11:48
Vote:
 

Hi there, 

I try to recap after we went trough again the issue. 

  • Our goal is to add a custom plugin to TinyMCE. 
  • We are trying this on a standard fresh and empty Alloy demo.
  • We are following step by step the tutorial: http://world.episerver.com/documentation/Items/Developers-Guide/EPiServer-CMS/7/Editing/Customizing-the-TinyMCE-Editor/
  • The custom plugin shows up in the admin page, we can drag&drop it as aspected and for this test, we put it between 2 other buttons. It shows up in the markup as well.  





  • After saving and switching to the edit view, the button does not appear and no errors are present, as there is no evidence of the markup in the code. 

So this is it. We can't really figure out whats wrong, mostly because in the admin page it shows up correctly but not in the edit view. 

Thanks. 

Daniele.

#133491
Sep 07, 2015 15:55
Vote:
 

Please check this forum post to see if it's something for you.

http://world.episerver.com/forum/developer-forum/Developer-to-developer/Thread-Container/2012/12/TinyMCE-button-plugin-will-not-appear-in-the-editor/

#139495
Oct 05, 2015 9:45
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.