CMS Link editor window

Mari Jørgensen

Vote:

I want to load the new hyperlink window (same as loaded from tinymce) in my custom plugin.
See "New link dialogue" in this article:
http://world.episerver.com/Articles/Items/EPiServer-75-CMS--starting-to-show-its-full-potential/.

I want to open the dialog using the good old EPi.CreateDialog().

I'm hoping for an answer that do not involve dojo... ;)

#90580

Sep 12, 2014 13:37

Linus Ekström

Vote:

Hi!

Currently, the link editor needs the editing UI in order to work, so there is no magic JavaScript to just include on a stand alone page to get this working. We are starting to take on some stories that will make it easier to extend the user interface without JavaScript coding withing the near future. This is not part of the currently planned work but it would be nice to get more information about the need you have to discuss how it can be solved in the future.

#90615

Sep 15, 2014 10:45

Ha Bui

Vote:

Hi Mari,
AFAIK, no way that suitable for your want and your hope!

(I) EPi.CreateDialog: Create a window popup that point to your .aspx page.
(II) "New link dialogue" : dojo widget that include:

1. Dialog widget : Create dialog ui cover.

2. LinkEditor widget: The content inside the dialog, base on FormContainer that will create a form edit for a link model (LinkModel.cs in this case).

Create a new method extend EPi static object is just wrap dojo stuff inside! If you want I can try create one!

// Ha Bui

#90618

Sep 15, 2014 11:02

Vote:

@Linus: I'm currently upgrading an imagemap tinmce plugin to EPiServer 7.5 (or older).

How the imagemap works inside tinymce, see screenshots here: http://tech-fellow.net/2013/04/23/episerver-imagemap-revisited/

So even if I'm inside my custom .aspx, I would assume that I have access to editing UI?

#90624

Edited, Sep 15, 2014 11:21

Ha Bui

Vote:

Hi Mari,

No, in this case you run in a separate .aspx file. To intialize Editing UI functionalities you can:

<%@ page language="C#" %>
<%@ import namespace="EPiServer.Framework.Serialization" %>
<%@ import namespace="EPiServer.Framework.Web.Resources" %>
<%@ import namespace="EPiServer.ServiceLocation" %>
<%@ import namespace="EPiServer.Shell" %>
<%@ import namespace="EPiServer.Shell.Modules" %>






    EPiServer Dojo widgets outside the shell

<%-- the default theme "sleek" requires this class on body --%>

    <%-- begin example --%>

    EPiServer Dojo widgets outside the shell

    Select an image

    

    

    Or a page

    

    

    

    <%-- begin example --%>

    <%-- sets up the dojoconfig variable which contains module load paths and aliases. parseonload is set to false so that the parser can be run later after everything is loaded. --%>
    <%= page.configuredojo(false, true, true) %>

    <%-- loads dojo itself and a small collection of bundled epi-specific classes --%>
    
    

    <%-- this mainly loads epijquery and can be removed if it's not needed --%>
    <%= page.clientresources("dojodashboardcompatibility", new[] { clientresourcetype.script }) %>

P.S: I remember that this is code stuff from: http://world.episerver.com/Modules/Forum/Pages/Thread.aspx?id=85047&epslanguage=en

// Ha Bui

#90637

Edited, Sep 15, 2014 12:59

Vote:

@Habu: I tried loading your code into a test .aspx file, but it does not seem to work. EPiServer scripts are loaded into the page, but nothing shows up except the headings. There are no errors in console.

#90673

Sep 16, 2014 9:34

Ha Bui

Vote:

Hi Mari,

Do you try in separate .aspx file or inside your TinyMCE's plugin?

Here is my result: Run CMS Outside Shell

Could you debug more (add debugger or output log) for detail?

// Ha Bui

#90675

Edited, Sep 16, 2014 9:51

Vote:

I just grabbed your code and added it to a separate .aspx file.

Actually, now I got it working using a different site running latest EPiServer patch - the one I tested on yesterday was 7.5.

Ok, thanks you for help, I will play some more with your code to see if it can be used inside my plugin.

Btw: Do you know what I use for data-dojo-type and data-dojo-props If I want to select commerce catalog content?

#90676

Sep 16, 2014 10:12

Ha Bui

Vote:

Hi Mari,

Sorry for answer late, I had too many meetings yesterday!

Regarding to you question, I think you can try:

I uploaded my evidence here, incase you have some problems with it ;) : Catalog Selector

Hope that help!

Ha Bui

#90730

Edited, Sep 17, 2014 4:18

Vote:

Thanks, Ha Bui!

#90735

Sep 17, 2014 9:02

Linus Ekström

Vote:

Hi!

I took some more time to look a bit further into this and the general need to create your own UI and to be able to instantiate well known EPiServer widgets like the link and content selectors. The best way would be to create an inline dialog (compared to an iframed dialog) since you then have access to the main application. In this specific need the inline dialog should just create a link selector which should be pretty simple (though I understand that someone needs to provide a sample on how to do this).

Unfortunately, the link editor requires quite a lot of configuration to be able to dynamically populate the link dialog depending on the system. For instance, Commerce catalog support is added dynamically as well as other linkable system types. I have reported a bug to move this configuration from the editor descriptor to a globally accessable object since this is not only making your task harder, but also affects performance. I have no idea of the timing of these improvements and samples, so if you have a solution right now, go with that for now. Here is the bug if you want to track it:

Bug #117517: Link provider settings should be moved from the editor descriptor to application settings

#90750

Sep 17, 2014 11:54

Vote:

Ok, thanks for the feedback, Linus!

#90751

Sep 17, 2014 11:58