show rich text editor in umbraco 8 custom dashboard

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

Rubinho 30 posts 218 karma points

Dec 16, 2019 @ 15:43
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>
```
Copy Link
Enrique Capellan 40 posts 173 karma points

Feb 14, 2020 @ 02:52

0

Hey, did you find a way to do it?

Copy Link

Pasang Tamang 258 posts 458 karma points

Feb 14, 2020 @ 04:09

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

Copy Link

Thomas 319 posts 606 karma points c-trib

Sep 29, 2020 @ 06:59

0

Is there a way to set a no-dirty on the rich text editor value ??

Copy Link

Thomas 319 posts 606 karma points c-trib

Sep 28, 2020 @ 16:24

Umbraco 8.6.4

$scope.rte = {
    view: 'rte',
    value: "",
    config: {
        editor: {
            toolbar: ["code", "undo", "redo", "bold", "italic", "bullist"]
        }
    }
};

template:

<umb-property-editor model="rte"></umb-property-editor>

Works for me :)

Copy Link

is working on a reply...

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

Flag this post as spam?

Show Rich text editor in Umbraco 8 Custom Dashboard