Sign in Register
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
    Henrik Vincent
    0

    Simple comment function property editor

    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 2157 posts 14434 karma points MVP 9x c-trib
    Nov 20, 2018 @ 20:55
    Marc Goodson
    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
    Henrik Vincent
    0

    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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies