Copied to clipboard

Flag this post as spam?

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


  • L P 12 posts 122 karma points
    Jan 14, 2021 @ 19:06
    L P
    0

    Umbraco 8 Custom RTE with a Vorto structure

    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

  • L P 12 posts 122 karma points
    Jan 20, 2021 @ 11:54
    L P
    100

    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
                    };
                }
            });
        }
    
    });
    
Please Sign in or register to post replies

Write your reply to:

Draft