Servoy Forum

Discuss Servoy here!

Skip to content

Is anyone using smartDocEditor in production?

Forum to discuss the new web client version of Servoy.
Post a reply

Is anyone using smartDocEditor in production?

Postby vik.lamp.vl » Mon Nov 18, 2024 3:49 pm

Hi Guys,

quick question:
Is anyone of you using the smartDocEditor Plugin/Webcomponent for your clients?
Im trying to get it running, but there are alot of things just missing or not working properly even in servoy-dev.

For example:

- Changing Font: in the preview it looks all nice. As soon as i export it to pdf or wordx the generated pdf uses fallback fonts aka Times New Roman (even when you use getExporter().setCSS())

Thats the biggest problem we have, how do you give smartDocEditor more fonts, for example Roboto which we are using in our solution. And how does the exporter implements them in the generation of the pdf file?

- Chaning Font-Size: i only have to option for "small, standard, big, etc" why cant i just use 12px,14px,....etc? Am i missing a option
- Working with tables: if you click on the table and select "border: none" it does nothing. Either in the Preview nor in the exported pdf
- Footer Header: YSIWYG ->not really. in the preview it looks fine but in the generated pdf its just all messy with wrong margins (even when you use getExporter().setMargin()
How can i apply a footer for example, which is on the same position?

---
In conclusion, i was trying to replace a few reports we have in Jasper to the smartDocEditor. So the user has more options to play with margins, style and layout of the report. But in this state its just a nice looking editor in your form imo.
Maybe im doing something wrong? Maybe you guys have working solutions with nice exported pdfs. If yes, please let me know how you did it.

I added a screenshot of the editor and one of the generated pdf for you guys to look at it.

svySmartDoc_Form.png

svySmartDoc_export.png


Greetings
-Vik
You do not have the required permissions to view the files attached to this post.
Servoy Developer
Head of Development at HV-Office & Hogatec.IT

Always interested in deeper Servoy-Knowledge so lets link up!
vik.lamp.vl
 
Posts: 48
Joined: Wed May 26, 2021 3:37 pm
Location: Germany
Top

Re: Is anyone using smartDocEditor in production?

Postby rvanveen » Mon Nov 18, 2024 4:20 pm

Hi Vik,

Can you please send the content of the generated JSON so I can see where it goes wrong?
You can also do that by creating a support ticket and attaching the JSON data so it is more private.
The JSON data can be found by running `getExporter().serialize()`. Please remove the API key if one is added.

Not all features that JasperReports can do are supported, but don't hesitate to create feature requests for missing items.

Regards,

Rene
User avatar
rvanveen
 
Posts: 18
Joined: Fri Jul 01, 2016 10:51 am
Top

Re: Is anyone using smartDocEditor in production?

Postby robert.edelmann » Mon Nov 18, 2024 4:32 pm

since I just lost my more detailed writeup to the forum, you can change the fonts / sizes by providing a config-object. I have an example here, it's for emails though, I'm not sure how you supply fonts when exporting: https://github.com/RobertEdelmann1974/dSUG_2021_11

You should make sure to provide the newest version of the plugin when using css, and to use the correct selectors, ckedit is picky in thar regard, example is here: https://github.com/Servoy/smartDocument ... editor.css
mit freundlichen Grüßen
Robert Stefan Edelmann
User avatar
robert.edelmann
 
Posts: 121
Joined: Wed Aug 14, 2013 6:12 pm
Top

Re: Is anyone using smartDocEditor in production?

Postby vik.lamp.vl » Mon Nov 18, 2024 4:37 pm

Hi Rene,

i added the json for you, thanks for checking it out.
Key is removed, its the 25-Exports Per Day anyway, so i cant test more today without buying the unlimited license from servoy... but im not keen on ordering one since i would like to have a working solution to the problems beforehand...
The only thing i changed for now is
Code: Select all
getExporter().setCSS(elements.testElement.getPrintCSSData())


I see a .addFooter() and .addHeader() in the exporter, but what i need is that our users just type theyre footer and header like in world for example.

Code: Select all
{
        key: removedKey,
        html:<html><body><div class="ck-content" dir="ltr" ><h3 style="text-align:center;" ><span style="font-family:Verdana, Geneva, sans-serif;" >Test-Hotel bei der Musterstraße</span><br><span class="text-small" style="font-family:Verdana, Geneva, sans-serif;" >Verwaltung</span></h3><p><span class="text-tiny" style="font-family:Verdana, Geneva, sans-serif;" >Test-Hotel bei der Musterstraße, Postfach 10 10 10, 12345 Musterhausen</span><br><span style="font-family:Verdana, Geneva, sans-serif;" >Test AG</span><br>Wieser Weg 333<br>82399 Raisting</p><p>&nbsp;
        </p><p>&nbsp;
        </p><p><span class="text-big"><strong>Reservierungsbestätigung</strong></span><br>Sehr geehrte Damen und Herren,
        </p><p>haben Sie vielen Dan für Ihre Anfrage und dem damit verbundenen vertrauen.<br>Ihre Reservierung möchten wir im Folgenden gern bestätigen: </p><figure class="table" ><table><tbody><tr><td style="width:400px;" >Zimmer:</td><td>004 Doppelzimmer</td></tr><tr><td>Anzahl Personen pro Zimmer:</td><td>2</td></tr><tr><td>Anreise:</td><td>21.11.2024</td></tr><tr><td>Abreise:</td><td>22.11.2024</td></tr><tr><td>Preis pro Nacht</td><td>100, 00€</td></tr><tr><td>Reservierungsnummer:</td><td>10011</td></tr></tbody></table></figure><p>&nbsp;
        </p><p>Wir bestätigen Ihre verbindliche Buchung und freuen uns auf Ihren Besuch.<br>Check In am Anreisetag ab 15: 00 Uhr möglich, Check Out am Abreisetag bis 10 Uhr.<br>Die Gesamtsumme beträgt 100, 00€.<br>Der genannte Übernachtungspreis beinhaltet, 7% gesetzliche Mehrwertsteuer.</p><p>Für Fragen stehen wir Ihnen gern zur Verfügung.<br>Wir freuen uns, Sie in unserem Haus begrüßen zu dürfen und wünschen Ihnen eine angenehme Anreise.</p><p>Mit freundlichen Grüßen<br>Hoteladmin</p><p>&nbsp;

        </p><p style="text-align:center;"><span class="text-tiny"><strong>Bankkonto: Musterbank Musterhausen Kto.-Nr. 12 345 (BLZ 987 654 10)</strong></span><br><span class="text-tiny"><strong>IBAN: DE01 1234 4567 8901 23456,
        BIC: MUSTER1FFX</strong></span><br><span class="text-tiny"><strong>Ust-Id.Nr: DE 1234 12345,
        Steuer Nr.: 123/456/789405</strong></span></p></div></body></html>,
        css::root {
            --ck-color-mention-background: hsla(341, 100%, 30%, 0.1);
            --ck-color-mention-text: hsl(341, 100%, 30%);
            --ck-highlight-marker-blue: hsl(201, 97%, 72%);
            --ck-highlight-marker-green: hsl(120, 93%, 68%);
            --ck-highlight-marker-pink: hsl(345, 96%, 73%);
            --ck-highlight-marker-yellow: hsl(60, 97%, 73%);
            --ck-highlight-pen-green: hsl(112, 100%, 27%);
            --ck-highlight-pen-red: hsl(0, 85%, 49%);
            --ck-image-style-spacing: 1.5em;
            --ck-todo-list-checkmark-size: 16px
        }

        .ck-content .text-tiny {
            font-size: .7em
        }

        .ck-content .text-small {
            font-size: .85em
        }

        .ck-content .text-big {
            font-size: 1.4em
        }

        .ck-content .text-huge {
            font-size: 1.8em
        }

        .ck-content pre {
            padding: 1em;
            color: hsl(0, 0%, 20.8%);
            background: hsla(0, 0%, 78%, .3);
            border: 1px solid #c4c4c4;
            border-radius: 2px;
            text-align: left;
            direction: ltr;
            tab-size: 4;
            white-space: pre-wrap;
            font-style: normal;
            min-width: 200px
        }

        .ck-content pre code {
            background: unset;
            padding: 0;
            border-radius: 0
        }

        .ck-content hr {
            margin: 15px 0;
            height: 4px;
            background: #ddd;
            border: 0
        }

        .ck-content .marker-yellow {
            background-color: var(--ck-highlight-marker-yellow)
        }

        .ck-content .marker-green {
            background-color: var(--ck-highlight-marker-green)
        }

        .ck-content .marker-pink {
            background-color: var(--ck-highlight-marker-pink)
        }

        .ck-content .marker-blue {
            background-color: var(--ck-highlight-marker-blue)
        }

        .ck-content .pen-red {
            color: var(--ck-highlight-pen-red);
            background-color: transparent
        }

        .ck-content .pen-green {
            color: var(--ck-highlight-pen-green);
            background-color: transparent
        }

        .ck-content .image-style-side {
            float: right;
            margin-left: var(--ck-image-style-spacing);
            max-width: 50%
        }

        .ck-content .image-style-align-left {
            float: left;
            margin-right: var(--ck-image-style-spacing)
        }

        .ck-content .image-style-align-center {
            margin-left: auto;
            margin-right: auto
        }

        .ck-content .image-style-align-right {
            float: right;
            margin-left: var(--ck-image-style-spacing)
        }

        .ck-content .image>figcaption {
            display: table-caption;
            caption-side: bottom;
            word-break: break-word;
            color: #333;
            background-color: #f7f7f7;
            padding: .6em;
            font-size: .75em;
            outline-offset: -1px
        }

        .ck-content .image {
            display: table;
            clear: both;
            text-align: center;
            margin: 1em auto
        }

        .ck-content .image img {
            display: block;
            margin: 0 auto;
            max-width: 100%;
            min-width: 50px
        }

        .ck-content .image.image_resized {
            max-width: 100%;
            display: block;
            box-sizing: border-box
        }

        .ck-content .image.image_resized img {
            width: 100%
        }

        .ck-content .image.image_resized>figcaption {
            display: block
        }

        .ck-content span[lang] {
            font-style: italic
        }

        .ck-content blockquote {
            overflow: hidden;
            padding-right: 1.5em;
            padding-left: 1.5em;
            margin-left: 0;
            margin-right: 0;
            font-style: italic;
            border-left: solid 5px #ccc
        }

        .ck-content[dir=rtl] blockquote {
            border-left: 0;
            border-right: solid 5px #ccc
        }

        .ck-content code {
            background-color: hsla(0, 0%, 78%, .3);
            padding: .15em;
            border-radius: 2px
        }

        .ck-content .table {
            margin: 1em auto;
            display: table
        }

        .ck-content .table table {
            border-collapse: collapse;
            border-spacing: 0;
            width: 100%;
            height: 100%;
            border: 1px double #b2b2b2
        }

        .ck-content .table table td,
        .ck-content .table table th {
            min-width: 2em;
            padding: .4em;
            border: 1px solid #bfbfbf
        }

        .ck-content .table table th {
            font-weight: 700;
            background: hsla(0, 0%, 0%, 5%)
        }

        .ck-content[dir=rtl] .table th {
            text-align: right
        }

        .ck-content[dir=ltr] .table th {
            text-align: left
        }

        .ck-content .page-break {
            position: relative;
            clear: both;
            padding: 5px 0;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .ck-content .page-break::after {
            content: '';
            position: absolute;
            width: 100%
        }

        .ck-content .page-break__label {
            position: relative;
            z-index: 1;
            padding: .3em .6em;
            display: block;
            text-transform: uppercase;
            border: 1px solid #c4c4c4;
            border-radius: 2px;
            font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
            font-size: .75em;
            font-weight: 700;
            color: #333;
            background: #fff;
            box-shadow: 2px 2px 1px hsla(0, 0%, 0%, .15);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .ck-content .media {
            clear: both;
            margin: 1em 0;
            display: block;
            min-width: 15em
        }

        .ck-content .todo-list {
            list-style: none
        }

        .ck-content .todo-list li {
            margin-bottom: 5px
        }

        .ck-content .todo-list li .todo-list {
            margin-top: 5px
        }

        .ck-content .todo-list .todo-list__label>input {
            -webkit-appearance: none;
            display: inline-block;
            position: relative;
            width: var(--ck-todo-list-checkmark-size);
            height: var(--ck-todo-list-checkmark-size);
            vertical-align: middle;
            border: 0;
            left: -25px;
            margin-right: -15px;
            right: 0;
            margin-left: 0
        }

        .ck-content .todo-list .todo-list__label>input::before {
            display: block;
            position: absolute;
            box-sizing: border-box;
            content: '';
            width: 100%;
            height: 100%;
            border: 1px solid #333;
            border-radius: 2px;
            transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background, 250ms ease-in-out border
        }

        .ck-content .todo-list .todo-list__label>input::after {
            display: block;
            position: absolute;
            box-sizing: content-box;
            pointer-events: none;
            content: '';
            left: calc(var(--ck-todo-list-checkmark-size)/ 3);
            top: calc(var(--ck-todo-list-checkmark-size)/ 5.3);
            width: calc(var(--ck-todo-list-checkmark-size)/ 5.3);
            height: calc(var(--ck-todo-list-checkmark-size)/ 2.6);
            border-style: solid;
            border-color: transparent;
            border-width: 0 calc(var(--ck-todo-list-checkmark-size)/ 8) calc(var(--ck-todo-list-checkmark-size)/ 8) 0;
            transform: rotate(45deg)
        }

        .ck-content .todo-list .todo-list__label>input[checked]::before {
            background: #25ab33;
            border-color: #25ab33
        }

        .ck-content .todo-list .todo-list__label>input[checked]::after {
            border-color: #fff
        }

        .ck-content .todo-list .todo-list__label .todo-list__label__description {
            vertical-align: middle
        }

        .ck-content .raw-html-embed {
            margin: 1em auto;
            min-width: 15em;
            font-style: normal
        }

        .ck-content .mention {
            background: var(--ck-color-mention-background);
            color: var(--ck-color-mention-text)
        }

        @media print {
            .ck-content .page-break {
                padding: 0
            }

            .ck-content .page-break::after {
                display: none
            }
        }

        @media print {

            body,
            html {
                width: 210mm;
                height: 297mm
            }

            .ck-content {
                margin: 0;
                border: initial;
                border-radius: initial;
                width: initial;
                min-height: initial;
                box-shadow: initial;
                background: initial;
                page-break-after: always
            }
        }

        ,
        additionalHead:[],
        imageURL:http: //localhost:8183/,margin:{bottom:20.0,left:12.0,right:12.0,top:20.0},paperSize:{size:A4,width:21.0,height:29.7},orientation:Portrait,imageScaleFactor:1.0,imageType:png,imageQuality:100.0,headerHeight:0.0,pageHeaderHTML:,footerHeight:0.0,pageFooterHTML:,pageOffset:0.0
}
Servoy Developer
Head of Development at HV-Office & Hogatec.IT

Always interested in deeper Servoy-Knowledge so lets link up!
vik.lamp.vl
 
Posts: 48
Joined: Wed May 26, 2021 3:37 pm
Location: Germany
Top

Re: Is anyone using smartDocEditor in production?

Postby vik.lamp.vl » Mon Nov 18, 2024 4:39 pm

robert.edelmann wrote:since I just lost my more detailed writeup to the forum, you can change the fonts / sizes by providing a config-object. I have an example here, it's for emails though, I'm not sure how you supply fonts when exporting: https://github.com/RobertEdelmann1974/dSUG_2021_11

You should make sure to provide the newest version of the plugin when using css, and to use the correct selectors, ckedit is picky in thar regard, example is here: https://github.com/Servoy/smartDocument ... editor.css



Thanks Robert, i´ll have a look at your examples
Servoy Developer
Head of Development at HV-Office & Hogatec.IT

Always interested in deeper Servoy-Knowledge so lets link up!
vik.lamp.vl
 
Posts: 48
Joined: Wed May 26, 2021 3:37 pm
Location: Germany
Top

Re: Is anyone using smartDocEditor in production?

Postby vik.lamp.vl » Mon Nov 18, 2024 5:49 pm

Hi Rene,

Code: Select all
so another thing. Im looking into the pagination plugin. Tried it with the configsettings just like ck-editor wiki is showing in the example. Not working properly in servoy since "pagination" plugin needs to be loaded.

What i found in the component repo is:

[url]https://github.com/Servoy/smartDocumentEditor/blob/1ebb917ebab81f6e7a21cca4d5abe666dd0a3251/component/smartdocumenteditor/smartdocumenteditor.js#L668[/url]

Does that mean, this feature will be added in future releases or?


EDIT: found out the pagination func. the plugin is already loaded. It would be nice to know which plugins are aviable for the smartDocEditor

And btw, is there another way to test the pdf export without the 25-exports-per-day limit? Do i really need to purchase a license just for testing without knowing if its even practicable for us? Please let me know, so i can choose if we need to look for another solution for this use-case. Ty!
Servoy Developer
Head of Development at HV-Office & Hogatec.IT

Always interested in deeper Servoy-Knowledge so lets link up!
vik.lamp.vl
 
Posts: 48
Joined: Wed May 26, 2021 3:37 pm
Location: Germany
Top

Re: Is anyone using smartDocEditor in production?

Postby rvanveen » Tue Nov 19, 2024 9:58 am

Hi Vik,

Not all plugins are currently added in the editor, but we can add more if needed (when we started building this component, the list wasn't that big).
The current list of included plugins can be found here:
https://github.com/Servoy/smartDocumentEditor/blob/1ebb917ebab81f6e7a21cca4d5abe666dd0a3251/build/src/ckeditor.js#L9

Then, for the PDF generation format, I will create a Jira case for it and check what goes wrong.

Please contact [email protected] for a trial license. We are also working to see if we can include it in ServoyCloud in combination with a ServoyCloud plan.
User avatar
rvanveen
 
Posts: 18
Joined: Fri Jul 01, 2016 10:51 am
Top
Post a reply

Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests

Learn more about Servoy