Copied to clipboard

Flag this post as spam?

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


  • Rubinho 28 posts 205 karma points
    Dec 16, 2019 @ 15:43
    Rubinho
    0

    Show Rich text editor in Umbraco 8 Custom Dashboard

    Hi,

    I'm working on an Umbraco 8.3.0 website, which has a custom dashboard.

    In this custom dashboard, i have a form with some controls on it. One of them should be an rte editor (i don't care about the toolbar config).

    Does anybody know how i can convert this easily to RTE?

    <textarea class="umb-property-editor umb-text" id="MatchReport" ng-model="detail.MatchReport"></textarea>
    
  • Enrique Capellan 13 posts 103 karma points
    1 week ago
    Enrique Capellan
    0

    Hey, did you find a way to do it?

  • Pasang Tamang 244 posts 350 karma points
    1 week ago
    Pasang Tamang
    0

    Hi,

    Here I am sharing how I used RTE in custom section

    $scope.BodyContent= {
        label: '',
        description: '',
        view: Umbraco.Sys.ServerVariables.umbracoSettings.umbracoPath + '/views/propertyeditors/rte/rte.html',
        config: {
            editor: {
                toolbar: ["ace", "undo", "redo", "cut", "copy", "styleselect", "fontselect", "fontsizeselect", "forecolor", "bold", "italic", "alignleft", "aligncenter", "alignright", "bullist", "numlist", "link", "umbmediapicker", "umbmacro", "table", "umbembeddialog"],
                stylesheets: [],
                style_formats: [{ title: "Heading 1", inline: "h1" }],
                plugins: ["advlist", "autolink", "link", "code", "fullscreen", "textcolor", "colorpicker"],
                dimensions: { height: 300, width: 730 }
            }
        },
        value: ""
    };
    

    After placing above code now you can set or get value like below

    To set value from code:

    $scope.BodyContent.value = "Some value goes here";
    

    And to get value on button click I have done like below

    $scope.save = function (data) {
        var rteContent = $scope.BodyContent.value;
    };
    

    And here is HTML snippet

    <umb-control-group label="Body Content" description="Body content description goes here">
         <umb-property property="property">
              <umb-editor model="BodyContent"></umb-editor>
         </umb-property>
    </umb-control-group>
    

    Hope this helps to anyone looking to use RTE in custom development

    Thanks

Please Sign in or register to post replies

Write your reply to:

Draft