Is anyone using smartDocEditor in production?

vik.lamp.vl · November 18, 2024, 1:49pm

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.

[attachment=1]svySmartDoc_Form.png[/attachment]
[attachment=0]svySmartDoc_export.png[/attachment]

Greetings
-Vik

rvanveen · November 18, 2024, 2:20pm

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

robert.edelmann · November 18, 2024, 2:32pm

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

vik.lamp.vl · November 18, 2024, 2:37pm

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 ```
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.

{
key: removedKey,
html:

Test-Hotel bei der Musterstraße
Verwaltung

Test-Hotel bei der Musterstraße, Postfach 10 10 10, 12345 Musterhausen
Test AG
Wieser Weg 333
82399 Raisting

Reservierungsbestätigung
Sehr geehrte Damen und Herren,

haben Sie vielen Dan für Ihre Anfrage und dem damit verbundenen vertrauen.
Ihre Reservierung möchten wir im Folgenden gern bestätigen:

Zimmer:	004 Doppelzimmer
Anzahl Personen pro Zimmer:	2
Anreise:	21.11.2024
Abreise:	22.11.2024
Preis pro Nacht	100, 00€
Reservierungsnummer:	10011

Wir bestätigen Ihre verbindliche Buchung und freuen uns auf Ihren Besuch.
Check In am Anreisetag ab 15: 00 Uhr möglich, Check Out am Abreisetag bis 10 Uhr.
Die Gesamtsumme beträgt 100, 00€.
Der genannte Übernachtungspreis beinhaltet, 7% gesetzliche Mehrwertsteuer.

Für Fragen stehen wir Ihnen gern zur Verfügung.
Wir freuen uns, Sie in unserem Haus begrüßen zu dürfen und wünschen Ihnen eine angenehme Anreise.

Mit freundlichen Grüßen
Hoteladmin

    </p><p style="text-align:center;"><span class="text-tiny"><strong>Bankkonto: Musterbank Musterhausen Kto.-Nr. 12 345 (BLZ 987 654 10)</strong></span>

IBAN: DE01 1234 4567 8901 23456,
BIC: MUSTER1FFX
Ust-Id.Nr: DE 1234 12345,
Steuer Nr.: 123/456/789405

,
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

}

vik.lamp.vl · November 18, 2024, 2:39pm

robert.edelmann:
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

vik.lamp.vl · November 18, 2024, 3:49pm

Hi Rene,

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!

rvanveen · November 19, 2024, 7:58am

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:

github.com/Servoy/smartDocumentEditor

build/src/ckeditor.js

1ebb917eb


      
          /**
           * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
           * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
           */
          
          // The editor creator to use.
          import DecoupledEditorBase from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor';
          
          import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
          import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
          import FontSize from '@ckeditor/ckeditor5-font/src/fontsize';
          import FontFamily from '@ckeditor/ckeditor5-font/src/fontfamily';
          import FontColor from '@ckeditor/ckeditor5-font/src/fontcolor';
          import FontBackgroundColor from '@ckeditor/ckeditor5-font/src/fontbackgroundcolor';
          import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
          import Autoformat from '@ckeditor/ckeditor5-autoformat/src/autoformat';
          import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
          import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
          import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';

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

Please contact sales@servoy.com for a trial license. We are also working to see if we can include it in ServoyCloud in combination with a ServoyCloud plan.

Topic		Replies	Views
Creating pdf of smart doc to attach to email Questions	2	2231	July 27, 2021
PDF incorrectly generated from JasperViewer Classic Servoy	1	5385	April 16, 2010
best solution for creating formatted text in the client? Classic Servoy	32	31903	December 11, 2014
plugins.VelocityReport.installFonts(); returning false Questions	9	4278	October 19, 2021
PDF printing issues reference/best practices Classic Servoy	4	3016	July 5, 2007

Is anyone using smartDocEditor in production?

Test-Hotel bei der Musterstraße Verwaltung

Related topics

Test-Hotel bei der Musterstraße
Verwaltung