umbraco 8 custom rte with a vorto structure

L P 13 posts 123 karma points

Jan 14, 2021 @ 19:06

Using Umbraco And Getting Started

Umbraco 8

I have a request of having a rich text editor in a tab structure where the tabs corresponds to several languages! As the one in the screenshot below: enter image description here

The problem is how to get the value of each rich text editor for each language? This is the code from the view: enter image description here

And this is the controller:

angular.module("umbraco").controller("LP.RTE.Controller", function ($scope, $http) {

    $scope.changeTab = changeTab;
    $scope.getLanguageRteValue = getLanguageRteValue;
    $scope.rteLanguages = [];

    $scope.model.value = $scope.model.value || $scope.rteLanguages;

    $http.get(apiUrl)
        .then(function (response) {
            for (var i = 0; i < response.data.length; i++) {
                $scope.rteLanguages.push({
                    id: response.data[i].id,
                    name: response.data[i].name,
                    rte: {
                        label: 'bodyText',
                        description: 'Enter text',
                        view: '/umbraco/views/propertyeditors/rte/rte.html',
                        config: {
                            editor: {
                                toolbar: ["ace", "undo", "redo", "cut", "removeformat",
                                    "styleselect", "bold", "italic", "underline", "strikethrough",
                                    "alignleft", "aligncenter", "alignright",
                                    "bullist", "numlist", "link", "unlink", "table",
                                    "umbmediapicker", "umbmacro", "umbembeddialog",
                                    "charmap", "subscript", "superscript",
                                    "forecolor", "fontselect", "fontsizeselect"],
                                stylesheets: [],
                                dimensions: {},
                                mode: "classic"
                            }
                        }
                    },
                    active: i === 0
                });
            }
        });

    function changeTab(selectedTab) {
        $scope.rteLanguages.forEach(function (tab) {
            tab.active = false;
        });
        selectedTab.active = true;
    };

    function getLanguageRteValue(languagevalue, languageId) {
        $scope.rteLanguages.forEach(function (tab) {
            if (tab.id === languageId) {
                tab.rte = {
                    value: languagevalue
                };
            }
        });
    }


});

I know that the language invariant of Umbraco 8 are doing it, but have multi level languages on one site where this structure will provide better user experience than having multiple rich text editor for each language we need on the inner level! After checking the database the value is saved only on first save and not displayed on the RTE

Copy Link

L P 13 posts 123 karma points

Jan 20, 2021 @ 11:54

I have managed to fix it angular.module("umbraco").controller("LP.RTE.Controller", function ($scope, $http, $routeParams) {

    $scope.changeTab = changeTab;
    $scope.getLanguageRteValue = getLanguageRteValue;
    var newItems = [];
    $scope.rteLanguages = [];
    $scope.items = [];

    var items = function () {
        return $http.get("api url for getting the languages (selected by a checkbox)")
            .then(function (data) {
                $scope.items = data;
                for (var i = 0; i < $scope.items.data.length; i++) {
                    newItems.push({
                        id: $scope.items.data[i].id,
                        name: $scope.items.data[i].name,
                        rte: {
                            label: 'bodyText',
                            description: 'Enter text',
                            view: '/umbraco/views/propertyeditors/rte/rte.html',
                            config: {
                                editor: {
                                    toolbar: ["ace", "undo", "redo", "cut", "removeformat",
                                        "styleselect", "bold", "italic", "underline", "strikethrough",
                                        "alignleft", "aligncenter", "alignright",
                                        "bullist", "numlist", "link", "unlink", "table",
                                        "umbmediapicker", "umbmacro", "umbembeddialog",
                                        "charmap", "subscript", "superscript",
                                        "forecolor", "fontselect", "fontsizeselect"],
                                    stylesheets: [],
                                    dimensions: {},
                                    mode: "classic"
                                }
                            }
                        },
                        active: i === 0
                    });
                }
                $scope.items = newItems;
            });
    }
    items()
        .then(function () {
            $scope.$on("formSubmitting",
                function (ev, args) {
                    if ($scope.model.value === null || $scope.model.value === undefined) {
                        $scope.model.value = [];
                    }
                    var rteLanguagesValue = [];
                    console.log("on form submit");
                    angular.forEach($scope.rteLanguages,
                        function (value, key) {

                            rteLanguagesValue.push({
                                id: value.id,
                                rteValue: value.rte.value
                            });
                        });
                    $scope.model.value = rteLanguagesValue;
                });


            function setupViewModel() {
                if ($scope.model.value === null || $scope.model.value === undefined) {
                    console.log($scope.model.value);
                    $scope.model.value = [];
                }
                console.log($scope.items);
                console.log($scope.model.value);
                for (var i = 0; i < $scope.items.length; i++) {
                    var rteValue = "";
                    if ($scope.model.value != null &&
                        $scope.model.value != "" &&
                        $scope.model.value != undefined) {
                        if ($scope.model.value.find(x => x.id === $scope.items[i].id)) {
                            rteValue = $scope.model.value.find(x => x.id === $scope.items[i].id).rteValue;
                        }
                    }
                    $scope.rteLanguages.push({
                        id: $scope.items[i].id,
                        name: $scope.items[i].name,
                        rte: {
                            label: 'bodyText',
                            description: 'Enter text',
                            view: '/umbraco/views/propertyeditors/rte/rte.html',
                            value: rteValue,
                            config: {
                                editor: {
                                    toolbar: ["ace", "undo", "redo", "cut", "removeformat",
                                        "styleselect", "bold", "italic", "underline", "strikethrough",
                                        "alignleft", "aligncenter", "alignright",
                                        "bullist", "numlist", "link", "unlink", "table",
                                        "umbmediapicker", "umbmacro", "umbembeddialog",
                                        "charmap", "subscript", "superscript",
                                        "forecolor", "fontselect", "fontsizeselect"],
                                    stylesheets: [],
                                    dimensions: {},
                                    mode: "classic"
                                }
                            }
                        },
                        active: $scope.items[i].active
                    });
                }
            }

            setupViewModel();

            $scope.$watch("rteLanguages",
                function (newVal, oldVal) {
                    $scope.model.value = [];

                    for (var x = 0; x < $scope.rteLanguages.length; x++) {
                        $scope.model.value.push({
                            id: $scope.rteLanguages[x].id,
                            rteValue: $scope.rteLanguages[x].value
                        });
                    }
                },
                true);


            $scope.model.onValueChanged = function (newVal, oldVal) {
                setupViewModel();
            };
        });



    function changeTab(selectedTab) {
        $scope.rteLanguages.forEach(function (tab) {
            tab.active = false;
        });
        selectedTab.active = true;
    };

    function getLanguageRteValue(languagevalue, languageId) {
        $scope.rteLanguages.forEach(function (tab) {
            if (tab.id === languageId) {
                tab.rte = {
                    value: languagevalue
                };
            }
        });
    }

});

Copy Link

is working on a reply...

Flag this post as spam?

Umbraco 8 Custom RTE with a Vorto structure