Let's follow up this discussion at the Neptune Community

(this forum will be kept in read-only mode)
Solved

Rich Text Editor

Hi,


I need rich text editor in the app to post news. All input fields are dynamic and there could be multiple editor fields in the view. Is there any build in possibilities. I heard there is sap.ui.richtexteditor.RichTextEditor component that is based on TinyMCE. Is it possible to use it somehow in Neptune? Thanks!


Hi


The RichTextEditor is not part of Neptune UX Platform. You can add the library to the mime folder of the UI5 library and use it by declaring the object in javascript. 


But not part of our default UI5 libraries.


Another option is to use TinyMCE. We are doing that internally for our Explored solution.


Regards

Ole Andre 

Thank you for quick reply. Do you know where can I download RichTextEditor library (searched everywhere and no results). I also tried with TinyMCE approach, but failed with loosing state. Each time I switch views or navigate or even resize window it looses state and disappears. Could you please share an example where you are creating editor object and uses it.

Thank you!

Hi Jurijs


This support is far out from Neptune UX Platform support, but I will share the code that we are using and hopefully you can reuse it. using TinyMCE


1) Load the TinyMCE in your html header

2) Init TinyMCE


 

        tinymce.init({
            selector: "#editorText",
            paste_data_images: true,
            contextmenu: "removeformat | link image inserttable | cell row column deletetable",
            content_css: "/neptune/public/application/explored/css/app.css",
            menu: {
                edit: {
                    title: 'Edit',
                    items: 'undo redo | cut copy paste pastetext | selectall'
                },
                insert: {
                    title: 'Insert',
                    items: 'link media | template hr'
                },
                format: {
                    title: 'Format',
                    items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'
                },
                table: {
                    title: 'Table',
                    items: 'inserttable tableprops deletetable | cell row column'
                },
                tools: {
                    title: 'Tools',
                    items: 'spellchecker code'
                }
            },
            plugins: [
                "advlist autolink lists link image charmap preview hr anchor pagebreak",
                "searchreplace visualblocks visualchars code insertdatetime media table contextmenu",
                "textcolor imagetools wordcount"
            ],
            toolbar1: "insertfile undo redo | styleselect | bold italic removeformat | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | preview media | forecolor backcolor",
            image_advtab: true,
            plugin_preview_width: "1200",
            plugin_preview_height: "600"
        });

 

3) My CSS content


 

body#tinymce {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    border: none;
    padding-left: 20px;
    width: 93%;
    height: 100%;
    overflow: 'auto';
    -webkit-overflow-scrolling: touch;
}
.mce-panel {
    border: none !important;
}
#tinymce h1 {
    color: #595959;
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: 28px;
}
#tinymce h2 {
    color: #595959;
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: 20px;
    padding-top: 20px;
}
#tinymce h3 {
    color: #595959;
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-top: 15px;
}
#tinymce pre {
    border-left: 10px solid rgb(0, 157, 224);
    padding: 10px;
    background: #ddd;
}
#tinymce ul {
    list-style-type: square;
}

 

4) In the designer




5) Init the text editor within 


 

    setTimeout(function() {

        // Main container
        var max = $('.mce-tinymce')
            .css('border', 'none')
            .parent().outerHeight();

        // Menubar
        max += -$('.mce-menubar.mce-toolbar').outerHeight();

        // Toolbar
        max -= $('.mce-toolbar-grp').outerHeight();

        // Random fix lawl - why 1px? no one knows
        max -= 1;

        // Set the new height
        $('.mce-edit-area').height(max - heightAdmin);

    }, 1000);

 


Regards

Ole Andre 

Many thanks for example. I really appreciate your help.

Login or Signup to post a comment