simple comment function property editor

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Henrik Vincent 122 posts 616 karma points

Nov 20, 2018 @ 12:59

Extending Umbraco and using the API

Umbraco 7

Edit: Added final code after solution for anyone interested

Hi guys.

I'm trying to create a simple comment property editor, to use in backoffice.

The idea with it, is that I want to use this property editor, to add comments in the backoffice using a string, from the editors settings, like the image below.

enter image description here

HTML

<h1>Comment</h1>
<div ng-controller="commentscontroller">
  <div ng-show="model.comment" class="wmd-panel wmd-preview">$scope.model.comment</div>
</div>

Controller

angular.module("umbraco").controller("commentscontroller",
    function ($scope) {
        $scope.model.value = $scope.model.config.comment;
    });

package.manifest

{
    propertyEditors: [
        {
            /*this must be a unique alias*/
            alias: "Comments",
            /*the name*/
            name: "Comments",
            /*the icon*/
            icon: "icon-conversation-alt",
            /*grouping for "Select editor" dialog*/
            group: "Rich Content",
            /*the HTML file we will load for the editor*/
            editor: {
                view: "~/App_Plugins/Comments/comments.html"
            },
            prevalues: {
                fields: [
                    {
                        label: "Kommentar",
                        description: "Indtast kommentaren",
                        key: "comment",
                        view: "textarea"
                    }
                ]
        }
        }
    ],
    javascript:
    [
        "~/App_Plugins/Comments/comments.controller.js"
    ]
}

I cant seem to get the typed in value from the editors settings, into the page enter image description here

Hope you guys can help me ouy.

Best

Henrik

Copy Link

Marc Goodson 2141 posts 14324 karma points MVP 8x c-trib

Nov 20, 2018 @ 20:55

101

Hi Henrik

Have you seen the uEditorNotes package? https://our.umbraco.com/packages/backoffice-extensions/ueditornotes/

it looks like it is similar to what you are trying to do, so you could see from the github repository: https://github.com/marcemarc/EditorNotes/tree/master/tooorangey.EditorNotes

how this works!

From what you post above, it looks like you have a value determining whether to show the comment or not

ng-show="model.comment"

so try setting model.comment to true in the controller to ensure this appears...

and then I think you are reading correctly the config item via the controller:

$scope.model.value = $scope.model.config.comment;

but you seem to be writing out a different property in the view

$scope.model.comment instead of either $scope.mode.value or $scope.model.config.comment

but hopefully the existing uEditorNote package will give you something to compare with.

regards

marc

Copy Link

Henrik Vincent 122 posts 616 karma points

Nov 21, 2018 @ 08:28

Hi Marc

Thanks alot for your help!

I took a look at the uEditorNotes, and ended up with the following:

HTML

<div ng-controller="commentscontroller" class="umb-editor umb-rte tooorangey-editornote">
    <div class="panel-body">
        <div ng-bind-html-unsafe="comment"></div>
    </div>
</div>

Controller

angular.module("umbraco").controller("commentscontroller",function ($scope) {
    if (typeof $scope.model.config.comment != "undefined") {
           $scope.comment = $scope.model.config.comment;
       }
});

I'm able to use HTML in the textbox, so kept it at that, instead of adding an RTE.

Might go forward with that later :)

Once again, thanks a bunch for your quick and great advice :)

Best

Henrik

Copy Link

is working on a reply...

Please Sign in or register to post replies