Copied to clipboard

Flag this post as spam?

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


  • Hans Egil Vaaga 2 posts 22 karma points
    Jan 07, 2021 @ 11:06
    Hans Egil Vaaga
    0

    RichTextEditor as editor in macro parameter not showing right toolbar in production

    Hi!

    I have managed to implement a Rich Text Editor as a parameter in macros following advice from other posts. It's working very well, but I wanted it to have only some tools visible in the toolbar of the editor. enter image description here

    This is also working as expected locally. When deploying it to the production server it still showing the full toolbar.

    enter image description here

    Any idea why it's not working on the production site.

    I'm adding all the source code here. It may be some help for others who is trying to add this to Umbraco.

    First the package.manifest store in App_Plugins\UmbracoForms\package.manifest:

        {
      "propertyEditors": [
        {
          "alias": "RichTextMacro",
          "name": "RichTextMacroEditor",
          "isParameterEditor": true,
          "editor": {
            "view": "~/App_Plugins/UmbracoForms/RichTextMacro/RichTextMacro.html",
            "valueType": "TEXT"
          }
        }
      ],
    
      "css": [
        "~/App_Plugins/UmbracoForms/RichTextMacro/rte.css"
      ],
    
      "javascript": [
    "~/App_Plugins/UmbracoForms/RichTextMacro/RichTextMacro.controller.js"
      ]
    }
    

    Made a new folder: App_Plugins/UmbracoForms/RichtextMacro and added three files: RichTextMacro.controller.js

    angular.module("umbraco")
        .controller("Macro.RichTextMacro",
            function ($scope) {
                $scope.textInput = {
                    label: 'bodyText',
                    description: '...',
                    view: '/umbraco/views/propertyeditors/rte/rte.html',
                    value: $scope.model.value,
                    config: {
                        editor: {
                            toolbar: ["ace", "undo", "redo", "cut", "link" ],
                            stylesheets: [],
                            dimensions: {
                                height: 200
                            },
                            mode: "classic"
                        }
                    }
                };
                $scope.$watch('textInput.value', function (newValue, oldValue) {
                    $scope.model.value = newValue;
                });
            });
    

    and RichTextMacro.html:

    <div ng-controller="Macro.RichTextMacro">
        <div class="macroRte" style="border: 1px solid #ccc">
            <ng-form>
                <umb-editor model="textInput"></umb-editor>
            </ng-form>
        </div>
    </div>
    

    rte.css:

    .macroRte .umb-editor {
    position: relative;}
    
  • Patrick van Kemenade 64 posts 258 karma points
    Jan 07, 2021 @ 14:27
    Patrick van Kemenade
    0

    If the same code is on both enviroments. I kind of suspect caching, did you clear out cache via settings, emptied the temp folder, ....

  • Hans Egil Vaaga 2 posts 22 karma points
    Jan 07, 2021 @ 17:34
    Hans Egil Vaaga
    0

    Yes, it was obvious. It fixed the problem :-) Thanks.

    Hope the source code can help others trying to use the Rich Text editor as a property editor.

Please Sign in or register to post replies

Write your reply to:

Draft