Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Leonard Sorgdrager 7 posts 87 karma points
    Sep 21, 2017 @ 16:18
    Leonard Sorgdrager
    0

    Custom Grid Editor with rich text editor Link dialog not displaying

    Hi all. I am not sure why this isn't working, but I am hoping somebody can help.

    I am using Umbraco 7.7.1 and I have a custom grid editor, with a cutom renderer, that I created that when you click on the link button in the RTE, the Link dialog does not open. This was working in an older version of Umbraco (7.5.13), but does not work in the newer versions.

    I have slimmed down the editor to only the RTE, but I still can't seem to get it to work. I am hoping this is something simple that I am overlooking.

    Here is my manifest file. I am not using the built in view because the editor will ultimately be comprised of 2 dropdowns, a text area, and this RTE.

    {
        "gridEditors": [
            {
              "name": "CFTest",
              "alias": "my.grid.cftest",
              "view": "~/app_plugins/cftest/cftesteditor.html",
              "icon": "icon-layout",
              "render": "~/app_plugins/cftest/cftestRenderer.cshtml"
            }
          ],
          "javascript": [
            "~/App_Plugins/cftest/cftest.controller.js"
          ] 
        }
    

    Here is the Editor (cftesteditor.html)

    <div ng-controller="my.grid.cftestController">
    
        <div unique-id="control.$uniqueId"
             value="control.value.content"
             grid-rte 
             configuration="rteconfig"
             ng-attr-style="{{control.editor.config.panelBody}}"></div>
    </div>
    

    The controller (cftest.controller.js):

    angular.module("umbraco").controller("my.grid.cftestController",
        function ($scope) {
            $scope.rteconfig = {
                "toolbar": ["code", "bold", "alignleft", "aligncenter", "bullist", "numlist", "link", "unlink", "table"],
                "stylesheets": ["rte"],
                "dimensions":
                    {
                        "height": 500
                    }
            }
        });
    

    And the renderer (cfTestRenderer.cshtml)

    @inherits Umbraco.Web.Mvc.UmbracoViewPage<dynamic>
    
    @*<pre>@Model</pre>*@
    
    
        <div >
            <p>@Html.Raw(Model.value.content)</p>
        </div>
    

    I am hoping somebody can tell me why, when I click the Link button in the RTE, nothing happens. Thanks.

  • blackhawk 313 posts 1368 karma points
    Sep 22, 2017 @ 22:15
    blackhawk
    0

    Try touching the web.config file, saving that file, and then see if your editor shows up as a data type in Umbraco.

  • Leonard Sorgdrager 7 posts 87 karma points
    Sep 25, 2017 @ 15:04
    Leonard Sorgdrager
    0

    I apologize, I did not explain the problem well enough.

    The problem isn't that the editor doesn't show up, it is that any button in the editor that needs to display an Umbraco dialog no longer functions. My example was the Link button, but it is the same for the Embed and Media buttons as well.

    Thank you.

  • Anders Bjerner 487 posts 2989 karma points MVP 7x admin c-trib
    Sep 25, 2017 @ 15:50
    Anders Bjerner
    101

    Umbraco changed their own implementation of the richtext editor for the grid (since 7.6 I think), so you can use that for inspiration - these two files in particular:

    https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.controller.js

    https://github.com/umbraco/Umbraco-CMS/blob/dev-v7/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html

    Rather than using the Angular dialog service, Umbraco have started switching to the umb-overlay directive instead, which now also applies to the RTE.

  • Leonard Sorgdrager 7 posts 87 karma points
    Sep 25, 2017 @ 21:54
    Leonard Sorgdrager
    0

    Thank you. This looks promising. I will need to research further.

    Leonard

  • Leonard Sorgdrager 7 posts 87 karma points
    Sep 26, 2017 @ 19:29
    Leonard Sorgdrager
    0

    Thank you so very much. That was it. I added the umb-overlay code to my editor and controller and I am back in business. Awesome. I can't thank you enough.

  • Rasmus Fjord 675 posts 1566 karma points c-trib
    Nov 14, 2018 @ 10:36
    Rasmus Fjord
    0

    Just to simplify i did this in the top of my controller:

        angular.module('umbraco').controller('SkybrudGridEditors.Facts.Controller', function ($scope, tinyMceService, editorState) {
    
        var vm = this;
        vm.openLinkPicker = openLinkPicker;
    
    
        function openLinkPicker(editor, currentTarget, anchorElement) {
    
            vm.linkPickerOverlay = {
                view: "linkpicker",
                currentTarget: currentTarget,
                anchors: tinyMceService.getAnchorNames(JSON.stringify(editorState.current.properties)),
                show: true,
                submit: function (model) {
                    tinyMceService.insertLinkInEditor(editor, model.target, anchorElement);
                    vm.linkPickerOverlay.show = false;
                    vm.linkPickerOverlay = null;
                }
            };
        }
    }
    

    And in my view I added this:

    <div unique-id="control.$uniqueId + $index"
                         value="item.text"
                         grid-rte configuration="control.value.rte"
                         on-link-picker-click="vm.openLinkPicker">
                    </div>
    
     <umb-overlay
            ng-if="vm.linkPickerOverlay.show"
            model="vm.linkPickerOverlay"
            position="right"
            view="vm.linkPickerOverlay.view">
        </umb-overlay>
    

    Just oversimplified for others who come looking for a quick solution :)

Please Sign in or register to post replies

Write your reply to:

Draft