Skip to content

Commit 61679d4

Browse files
Bhuvaneshwari-SF4208Bhuvaneshwari-SF4208
authored
Update import-and-export.md
1 parent bab7e8b commit 61679d4

File tree

1 file changed

+360
-1
lines changed

1 file changed

+360
-1
lines changed

‎blazor/rich-text-editor/import-and-export.md‎

Lines changed: 360 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -406,4 +406,363 @@ The following example demonstrates how to configure the `ExportWord` and `Export
406406
}
407407

408408
{% endhighlight %}
409-
{% endtabs %}
409+
{% endtabs %}
410+
411+
### Exporting Rich Text Editor content to PDF or word using external tools
412+
413+
By default, when exporting content from the Blazor Rich Text Editor to generate PDF or Word documents using external tools (instead of Syncfusion’s built-in export services), the editor’s internal styles are not included in the retrieved HTML. This can lead to formatting inconsistencies in the final output.
414+
415+
To preserve the intended appearance of the content, you should manually apply the following CSS styles to the exported HTML container.
416+
417+
> Make sure to add a CSS class `e-rte-content` to the content container.
418+
419+
```CSS
420+
.e-rte-content {
421+
font-size: 1em;
422+
font-weight: 400;
423+
margin: 0;
424+
}
425+
html {
426+
height: auto;
427+
margin: 0;
428+
}
429+
body {
430+
margin: 0;
431+
color: #333;
432+
word-wrap: break-word;
433+
}
434+
.e-content {
435+
min-height: 100px;
436+
outline: 0 solid transparent;
437+
padding: 16px;
438+
position: relative;
439+
overflow-x: auto;
440+
font-weight: normal;
441+
line-height: 1.5;
442+
font-size: 14px;
443+
text-align: inherit;
444+
font-family: \"Roboto\", \"Segoe UI\", \"GeezaPro\", \"DejaVu Serif\", \"sans-serif\", \"-apple-system\", \"BlinkMacSystemFont\";
445+
}
446+
p {
447+
margin-top: 0;
448+
margin-right: 0;
449+
margin-bottom: 10px;
450+
margin-left: 0;
451+
}
452+
h1 {
453+
font-size: 2.857em;
454+
font-weight: 600;
455+
line-height: 1.2;
456+
margin-top: 10px;
457+
margin-right: 0;
458+
margin-bottom: 10px;
459+
margin-left: 0;
460+
}
461+
h2 {
462+
font-size: 2.285em;
463+
font-weight: 600;
464+
line-height: 1.2;
465+
margin-top: 10px;
466+
margin-right: 0;
467+
margin-bottom: 10px;
468+
margin-left: 0;
469+
}
470+
h3 {
471+
font-size: 2em;
472+
font-weight: 600;
473+
line-height: 1.2;
474+
margin-top: 10px;
475+
margin-right: 0;
476+
margin-bottom: 10px;
477+
margin-left: 0;
478+
}
479+
h4 {
480+
font-size: 1.714em;
481+
font-weight: 600;
482+
line-height: 1.2;
483+
margin-top: 10px;
484+
margin-right: 0;
485+
margin-bottom: 10px;
486+
margin-left: 0;
487+
}
488+
h5 {
489+
font-size: 1.428em;
490+
font-weight: 600;
491+
line-height: 1.2;
492+
margin-top: 10px;
493+
margin-right: 0;
494+
margin-bottom: 10px;
495+
margin-left: 0;
496+
}
497+
h6 {
498+
font-size: 1.142em;
499+
font-weight: 600;
500+
line-height: 1.5;
501+
margin-top: 10px;
502+
margin-right: 0;
503+
margin-bottom: 10px;
504+
margin-left: 0;
505+
}
506+
blockquote {
507+
margin-top: 10px;
508+
margin-right: 0;
509+
margin-bottom: 10px;
510+
margin-left: 0;
511+
padding-left: 12px;
512+
border-left: 2px solid #5c5c5c;
513+
}
514+
pre {
515+
border: 0;
516+
border-radius: 0;
517+
color: #333;
518+
font-size: inherit;
519+
line-height: inherit;
520+
margin-top: 0;
521+
margin-right: 0;
522+
margin-bottom: 10px;
523+
margin-left: 0;
524+
overflow: visible;
525+
padding: 0;
526+
white-space: pre-wrap;
527+
word-break: inherit;
528+
word-wrap: break-word;
529+
}
530+
code {
531+
background-color: #9d9d9d26;
532+
color: #ed484c;
533+
}
534+
strong {
535+
font-weight: bold;
536+
}
537+
b {
538+
font-weight: bold;
539+
}
540+
a {
541+
text-decoration: none;
542+
user-select: auto;
543+
}
544+
li {
545+
margin-bottom: 10px;
546+
}
547+
li ol {
548+
margin-block-start: 10px;
549+
}
550+
li ul {
551+
margin-block-start: 10px;
552+
}
553+
ul {
554+
list-style-type: disc;
555+
}
556+
ul ul {
557+
list-style-type: circle;
558+
}
559+
ol ul {
560+
list-style-type: circle;
561+
}
562+
ul ul ul {
563+
list-style-type: square;
564+
}
565+
ol ul ul {
566+
list-style-type: square;
567+
}
568+
ul ol ul {
569+
list-style-type: square;
570+
}
571+
ol ol ul {
572+
list-style-type: square;
573+
}
574+
table {
575+
margin-bottom: 10px;
576+
border-collapse: collapse;
577+
}
578+
th {
579+
background-color: rgba(157, 157, 157, .15);
580+
border: 1px solid #BDBDBD;
581+
height: 20px;
582+
min-width: 20px;
583+
padding: 2px 5px;
584+
}
585+
td {
586+
border: 1px solid #BDBDBD;
587+
height: 20px;
588+
min-width: 20px;
589+
padding: 2px 5px;
590+
}
591+
.e-rte-image {
592+
border: 0;
593+
cursor: pointer;
594+
display: block;
595+
float: none;
596+
margin: auto;
597+
max-width: 100%;
598+
position: relative;
599+
}
600+
.e-rte-audio {
601+
border: 0;
602+
cursor: pointer;
603+
display: block;
604+
float: none;
605+
margin: auto;
606+
max-width: 100%;
607+
position: relative;
608+
}
609+
.e-rte-video {
610+
border: 0;
611+
cursor: pointer;
612+
display: block;
613+
float: none;
614+
margin: auto;
615+
max-width: 100%;
616+
position: relative;
617+
}
618+
.e-imginline {
619+
margin-left: 5px;
620+
margin-right: 5px;
621+
display: inline-block;
622+
float: none;
623+
max-width: 100%;
624+
padding: 1px;
625+
vertical-align: bottom;
626+
}
627+
.e-audio-inline {
628+
margin-left: 5px;
629+
margin-right: 5px;
630+
display: inline-block;
631+
float: none;
632+
max-width: 100%;
633+
padding: 1px;
634+
vertical-align: bottom;
635+
}
636+
.e-video-inline {
637+
margin-left: 5px;
638+
margin-right: 5px;
639+
display: inline-block;
640+
float: none;
641+
max-width: 100%;
642+
padding: 1px;
643+
vertical-align: bottom;
644+
}
645+
.e-imgcenter {
646+
cursor: pointer;
647+
display: block;
648+
float: none;
649+
margin-top: 5px;
650+
margin-right: auto;
651+
margin-bottom: 5px;
652+
margin-left: auto;
653+
max-width: 100%;
654+
position: relative;
655+
}
656+
.e-video-center {
657+
cursor: pointer;
658+
display: block;
659+
float: none;
660+
margin-top: 5px;
661+
margin-right: auto;
662+
margin-bottom: 5px;
663+
margin-left: auto;
664+
max-width: 100%;
665+
position: relative;
666+
}
667+
.e-imgright {
668+
float: right;
669+
margin-top: 0;
670+
margin-right: auto;
671+
margin-bottom: 0;
672+
margin-left: auto;
673+
margin-left: 5px;
674+
text-align: right;
675+
}
676+
.e-video-right {
677+
float: right;
678+
margin-top: 0;
679+
margin-right: auto;
680+
margin-bottom: 0;
681+
margin-left: auto;
682+
margin-left: 5px;
683+
text-align: right;
684+
}
685+
.e-imgleft {
686+
float: left;
687+
margin-top: 0;
688+
margin-right: auto;
689+
margin-bottom: 0;
690+
margin-left: auto;
691+
margin-right: 5px;
692+
text-align: left;
693+
}
694+
.e-video-left {
695+
float: left;
696+
margin-top: 0;
697+
margin-right: auto;
698+
margin-bottom: 0;
699+
margin-left: auto;
700+
margin-right: 5px;
701+
text-align: left;
702+
}
703+
.e-rte-img-caption {
704+
display: inline-block;
705+
margin-top: 5px;
706+
margin-right: auto;
707+
margin-bottom: 5px;
708+
margin-left: auto;
709+
max-width: 100%;
710+
position: relative;
711+
}
712+
.e-caption-inline {
713+
display: inline-block;
714+
margin-top: 5px;
715+
margin-right: auto;
716+
margin-bottom: 5px;
717+
margin-left: auto;
718+
margin-left: 5px;
719+
margin-right: 5px;
720+
max-width: calc(100% - (2 * 5px));
721+
position: relative;
722+
text-align: center;
723+
vertical-align: bottom;
724+
}
725+
.e-img-wrap {
726+
display: inline-block;
727+
margin: auto;
728+
padding: 0;
729+
text-align: center;
730+
width: 100%;
731+
}
732+
.e-imgbreak {
733+
border: 0;
734+
cursor: pointer;
735+
display: block;
736+
float: none;
737+
margin-top: 5px;
738+
margin-right: auto;
739+
margin-bottom: 5px;
740+
margin-left: auto;
741+
max-width: 100%;
742+
position: relative;
743+
}
744+
.e-audio-break {
745+
border: 0;
746+
cursor: pointer;
747+
display: block;
748+
float: none;
749+
margin-top: 5px;
750+
margin-right: auto;
751+
margin-bottom: 5px;
752+
margin-left: auto;
753+
max-width: 100%;
754+
position: relative;
755+
}
756+
.e-video-break {
757+
border: 0;
758+
cursor: pointer;
759+
display: block;
760+
float: none;
761+
margin-top: 5px;
762+
margin-right: auto;
763+
margin-bottom: 5px;
764+
margin-left: auto;
765+
max-width: 100%;
766+
position: relative;
767+
}
768+
```

0 commit comments

Comments
 (0)