diff --git a/ej2-javascript/accumulation-chart/empty-points.md b/ej2-javascript/accumulation-chart/empty-points.md
index 3bba58cc4..7e95a2438 100644
--- a/ej2-javascript/accumulation-chart/empty-points.md
+++ b/ej2-javascript/accumulation-chart/empty-points.md
@@ -39,9 +39,9 @@ Specific color for an empty point can be set by using the `fill` property in `em
{% previewsample "page.domainurl/code-snippet/chart/chart-types-cs17" %}
-## Handling when no data is available
+## Handling No Data
-When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
+When no data is available to render in the accumulation chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
{% if page.publishingplatform == "typescript" %}
diff --git a/ej2-javascript/chart/working-with-data.md b/ej2-javascript/chart/working-with-data.md
index 1c1610a73..5b9d901be 100644
--- a/ej2-javascript/chart/working-with-data.md
+++ b/ej2-javascript/chart/working-with-data.md
@@ -336,7 +336,7 @@ Specific color for empty point can be set by `fill` property in `emptyPointSetti
{% previewsample "page.domainurl/code-snippet/chart/working-with-data-cs6" %}
{% endif %}
-## Handling when no data is available
+## Handling No Data
When no data is available to render in the chart, the `noDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
diff --git a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.css b/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.css
deleted file mode 100644
index a1f9e52f4..000000000
--- a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.css
+++ /dev/null
@@ -1,19 +0,0 @@
-
-#loader {
- color: #008cff;
- height: 40px;
- left: 45%;
- position: absolute;
- top: 45%;
- width: 30%;
- }
-
- #container {
- visibility: hidden;
- }
-
- #DocumentEditor{
- width:100%;
- height: 100%;
-}
-
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.js b/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.js
deleted file mode 100644
index fadff773c..000000000
--- a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-var documenteditorcontainer = new ej.documenteditor.DocumentEditorContainer({
- isReadOnly: false
-});
-ej.documenteditor.DocumentEditorContainer.Inject(
- ej.documenteditor.Toolbar
-);
-onCreated = function() {
- var data =
- {"optimizeSfdt":false,"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"headerDistance":36,"footerDistance":36,"differentFirstPage":false,"differentOddAndEvenPages":false,"bidi":false,"breakCode":"NewPage","endnoteNumberFormat":"LowerCaseRoman","footNoteNumberFormat":"Arabic","restartIndexForFootnotes":"DoNotRestart","restartIndexForEndnotes":"DoNotRestart","initialFootNoteNumber":1,"initialEndNoteNumber":1,"pageNumberStyle":"Arabic","numberOfColumns":1,"equalWidth":true,"lineBetweenColumns":false,"columns":[]},"blocks":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":18,"fontFamily":"Monotype Corsiva","fontSizeBidi":18,"fontFamilyAscii":"Monotype Corsiva","fontFamilyNonFarEast":"Monotype Corsiva","fontFamilyFarEast":"Monotype Corsiva"},"text":"List of text formatting options"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"bold":true,"boldBidi":true},"text":"Bold"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"boldBidi":true},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#808080FF"},"inlines":[{"characterFormat":{"fontColor":"#CC99FFFF"},"text":"C"},{"characterFormat":{"fontColor":"#333333FF"},"text":"o"},{"characterFormat":{"fontColor":"#FF6600FF"},"text":"l"},{"characterFormat":{"fontColor":"#3366FFFF"},"text":"o"},{"characterFormat":{"fontColor":"#FF9900FF"},"text":"r"},{"characterFormat":{"fontColor":"#FF6600FF"},"text":"e"},{"characterFormat":{"fontColor":"#808080FF"},"text":"d"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#808080FF"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"scaling":150},"inlines":[{"characterFormat":{"scaling":150},"text":"Scaling"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#808080FF"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"characterSpacing":2},"inlines":[{"characterFormat":{"characterSpacing":2},"text":"Spacing"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#00B0F0FF"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"boldBidi":true},"inlines":[{"characterFormat":{"strikethrough":"DoubleStrike"},"text":"Double Strike"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"DoubleStrike"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontColor":"#ED7D31FF"},"inlines":[{"characterFormat":{"highlightColor":"Turquoise","fontColor":"#ED7D31FF"},"text":"Highlighted"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"italic":true,"italicBidi":true},"text":"Italicized"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"italic":true,"italicBidi":true},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"SingleStrike"},"inlines":[{"characterFormat":{"strikethrough":"SingleStrike"},"text":"Strikeout "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"SingleStrike"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"strikethrough":"SingleStrike"},"inlines":[{"characterFormat":{},"text":"Some"},{"characterFormat":{"baselineAlignment":"Subscript"},"text":"Subscript"},{"characterFormat":{"baselineAlignment":"Subscript"},"text":" "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"baselineAlignment":"Subscript"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"baselineAlignment":"Subscript"},"inlines":[{"characterFormat":{},"text":"Some"},{"characterFormat":{"baselineAlignment":"Superscript"},"text":"Superscript"},{"characterFormat":{"baselineAlignment":"Superscript"},"text":" "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"baselineAlignment":"Superscript"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"underline":"Single"},"inlines":[{"characterFormat":{"underline":"Single"},"text":"Underlined"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":" "}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":18,"fontFamily":"Monotype Corsiva","fontSizeBidi":18,"fontFamilyAscii":"Monotype Corsiva","fontFamilyNonFarEast":"Monotype Corsiva","fontFamilyFarEast":"Monotype Corsiva"},"text":"Text with different fonts and sizes"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":11,"fontFamily":"Book Antiqua","underline":"Double","fontColor":"#7028E8FF","fontSizeBidi":11,"fontFamilyAscii":"Book Antiqua","fontFamilyNonFarEast":"Book Antiqua","fontFamilyFarEast":"Book Antiqua"},"inlines":[]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":11,"fontFamily":"Book Antiqua","fontColor":"#7028E8FF","fontSizeBidi":11,"fontFamilyAscii":"Book Antiqua","fontFamilyNonFarEast":"Book Antiqua","fontFamilyFarEast":"Book Antiqua"},"text":"The quick brown fox jumps over the lazy dog [Book Antiqua]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontFamily":"Cambria","fontColor":"#F1C084FF","fontFamilyAscii":"Cambria","fontFamilyNonFarEast":"Cambria","fontFamilyFarEast":"Cambria"},"text":"The quick brown fox jumps over the lazy dog [Bitstream Vera Sans]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":13,"fontFamily":"Comic Sans MS","fontColor":"#BD5DCDFF","fontSizeBidi":13,"fontFamilyAscii":"Comic Sans MS","fontFamilyNonFarEast":"Comic Sans MS","fontFamilyFarEast":"Comic Sans MS"},"text":"The quick brown fox jumps over the lazy dog [Comic Sans MS]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":14,"fontFamily":"Microsoft Sans Serif","fontColor":"#4D72EEFF","fontSizeBidi":14,"fontFamilyAscii":"Microsoft Sans Serif","fontFamilyNonFarEast":"Microsoft Sans Serif","fontFamilyFarEast":"Microsoft Sans Serif"},"text":"The quick brown fox jumps over the lazy dog [Microsoft Sans Serif]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":15,"fontFamily":"바탕","fontColor":"#335388FF","fontSizeBidi":15,"fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"The quick brown fox jumps over the lazy dog ["},{"characterFormat":{"fontSize":15,"fontFamily":"바탕","fontColor":"#335388FF","fontSizeBidi":15,"fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"Batang"},{"characterFormat":{"fontSize":15,"fontFamily":"바탕","fontColor":"#335388FF","fontSizeBidi":15,"fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Arial","fontColor":"#31B463FF","fontSizeBidi":16,"fontFamilyAscii":"Arial","fontFamilyNonFarEast":"Arial","fontFamilyFarEast":"Arial"},"inlines":[{"characterFormat":{"fontSize":16,"fontFamily":"Arial","fontColor":"#31B463FF","fontSizeBidi":16,"fontFamilyAscii":"Arial","fontFamilyNonFarEast":"Arial","fontFamilyFarEast":"Arial"},"text":"The quick brown fox jumps over the lazy dog [Arial]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":16,"fontSizeBidi":16},"inlines":[{"characterFormat":{"fontSize":16,"fontFamily":"Book Antiqua","fontColor":"#7028E8FF","fontSizeBidi":16,"fontFamilyAscii":"Book Antiqua","fontFamilyNonFarEast":"Book Antiqua","fontFamilyFarEast":"Book Antiqua"},"text":"The quick brown fox jumps over the lazy dog [Book Antiqua]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":15,"fontSizeBidi":15},"inlines":[{"characterFormat":{"fontSize":15,"fontFamily":"Cambria","fontColor":"#F1C084FF","fontSizeBidi":15,"fontFamilyAscii":"Cambria","fontFamilyNonFarEast":"Cambria","fontFamilyFarEast":"Cambria"},"text":"The quick brown fox jumps over the lazy dog [Bitstream Vera Sans]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":14,"fontSizeBidi":14},"inlines":[{"characterFormat":{"fontSize":14,"fontFamily":"Comic Sans MS","fontColor":"#BD5DCDFF","fontSizeBidi":14,"fontFamilyAscii":"Comic Sans MS","fontFamilyNonFarEast":"Comic Sans MS","fontFamilyFarEast":"Comic Sans MS"},"text":"The quick brown fox jumps over the lazy dog [Comic Sans MS]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":13,"fontSizeBidi":13},"inlines":[{"characterFormat":{"fontSize":13,"fontFamily":"Microsoft Sans Serif","fontColor":"#4D72EEFF","fontSizeBidi":13,"fontFamilyAscii":"Microsoft Sans Serif","fontFamilyNonFarEast":"Microsoft Sans Serif","fontFamilyFarEast":"Microsoft Sans Serif"},"text":"The quick brown fox jumps over the lazy dog [Microsoft Sans Serif]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":11,"fontSizeBidi":11},"inlines":[{"characterFormat":{"fontFamily":"바탕","fontColor":"#335388FF","fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"The quick brown fox jumps over the lazy dog ["},{"characterFormat":{"fontFamily":"바탕","fontColor":"#335388FF","fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"Batang"},{"characterFormat":{"fontFamily":"바탕","fontColor":"#335388FF","fontFamilyAscii":"바탕","fontFamilyNonFarEast":"바탕","fontFamilyFarEast":"바탕"},"text":"]"}]},{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":6,"afterSpacing":6,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontSizeBidi":10},"inlines":[{"characterFormat":{"fontSize":11,"fontFamily":"Arial","fontColor":"#31B463FF","fontSizeBidi":11,"fontFamilyAscii":"Arial","fontFamilyNonFarEast":"Arial","fontFamilyFarEast":"Arial"},"text":"The quick brown fox jumps over the lazy dog [Arial]"}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Times New Roman","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#00000000","boldBidi":false,"italicBidi":false,"fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false,"localeIdBidi":1025,"fontFamilyAscii":"Times New Roman","fontFamilyNonFarEast":"Times New Roman","fontFamilyFarEast":"Times New Roman"},"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"BodyText","bidi":false,"keepLinesTogether":false,"keepWithNext":false,"widowControl":true,"listFormat":{}},"fontSubstitutionTable":{},"themeFontLanguages":{},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"compatibilityMode":"Word2013","allowSpaceOfSameStyleInTable":false,"themes":{"fontScheme":{"fontSchemeName":"Office","majorFontScheme":{"fontSchemeList":[{"name":"latin","typeface":"Calibri Light","panose":"020F0302020204030204"},{"name":"ea","panose":"020F0302020204030204"},{"name":"cs","panose":"020F0302020204030204"}],"fontTypeface":{"Jpan":"游ゴシック Light","Hang":"맑은 고딕","Hans":"等线 Light","Hant":"新細明體","Arab":"Times New Roman","Hebr":"Times New Roman","Thai":"Angsana New","Ethi":"Nyala","Beng":"Vrinda","Gujr":"Shruti","Khmr":"MoolBoran","Knda":"Tunga","Guru":"Raavi","Cans":"Euphemia","Cher":"Plantagenet Cherokee","Yiii":"Microsoft Yi Baiti","Tibt":"Microsoft Himalaya","Thaa":"MV Boli","Deva":"Mangal","Telu":"Gautami","Taml":"Latha","Syrc":"Estrangelo Edessa","Orya":"Kalinga","Mlym":"Kartika","Laoo":"DokChampa","Sinh":"Iskoola Pota","Mong":"Mongolian Baiti","Viet":"Times New Roman","Uigh":"Microsoft Uighur","Geor":"Sylfaen","Armn":"Arial","Bugi":"Leelawadee UI","Bopo":"Microsoft JhengHei","Java":"Javanese Text","Lisu":"Segoe UI","Mymr":"Myanmar Text","Nkoo":"Ebrima","Olck":"Nirmala UI","Osma":"Ebrima","Phag":"Phagspa","Syrn":"Estrangelo Edessa","Syrj":"Estrangelo Edessa","Syre":"Estrangelo Edessa","Sora":"Nirmala UI","Tale":"Microsoft Tai Le","Talu":"Microsoft New Tai Lue","Tfng":"Ebrima"}},"minorFontScheme":{"fontSchemeList":[{"name":"latin","typeface":"Calibri","panose":"020F0502020204030204"},{"name":"ea","panose":"020F0502020204030204"},{"name":"cs","panose":"020F0502020204030204"}],"fontTypeface":{"Jpan":"游明朝","Hang":"맑은 고딕","Hans":"等线","Hant":"新細明體","Arab":"Arial","Hebr":"Arial","Thai":"Cordia New","Ethi":"Nyala","Beng":"Vrinda","Gujr":"Shruti","Khmr":"DaunPenh","Knda":"Tunga","Guru":"Raavi","Cans":"Euphemia","Cher":"Plantagenet Cherokee","Yiii":"Microsoft Yi Baiti","Tibt":"Microsoft Himalaya","Thaa":"MV Boli","Deva":"Mangal","Telu":"Gautami","Taml":"Latha","Syrc":"Estrangelo Edessa","Orya":"Kalinga","Mlym":"Kartika","Laoo":"DokChampa","Sinh":"Iskoola Pota","Mong":"Mongolian Baiti","Viet":"Arial","Uigh":"Microsoft Uighur","Geor":"Sylfaen","Armn":"Arial","Bugi":"Leelawadee UI","Bopo":"Microsoft JhengHei","Java":"Javanese Text","Lisu":"Segoe UI","Mymr":"Myanmar Text","Nkoo":"Ebrima","Olck":"Nirmala UI","Osma":"Ebrima","Phag":"Phagspa","Syrn":"Estrangelo Edessa","Syrj":"Estrangelo Edessa","Syre":"Estrangelo Edessa","Sora":"Nirmala UI","Tale":"Microsoft Tai Le","Talu":"Microsoft New Tai Lue","Tfng":"Ebrima"}}}},"background":{"color":"#FFFFFF"},"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"listFormat":{}},"characterFormat":{"fontSize":12,"fontSizeBidi":12},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":12,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":16,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":13,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","italicBidi":true,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"beforeSpacing":2,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":16,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontSizeBidi":13,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontSizeBidi":12,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496FF","italicBidi":true,"fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763FF","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 7","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level7","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#1F3763","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 7 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#1F3763","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 8","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level8","listFormat":{}},"characterFormat":{"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 8 Char","type":"Character","characterFormat":{"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Heading 9","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level9","listFormat":{}},"characterFormat":{"italic":true,"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Normal","next":"Normal"},{"name":"Heading 9 Char","type":"Character","characterFormat":{"italic":true,"fontSize":10.5,"fontFamily":"Calibri Light","fontColor":"#333333","fontFamilyAscii":"Calibri Light","fontFamilyNonFarEast":"Calibri Light","fontFamilyFarEast":"Calibri Light"},"basedOn":"Default Paragraph Font"},{"name":"Header","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{},"basedOn":"Normal","next":"Header"},{"name":"Footer","type":"Paragraph","paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{},"basedOn":"Normal","next":"Footer"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[],"images":{},"footnotes":{"separator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0003"}]}],"continuationSeparator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0004"}]}],"continuationNotice":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]}]},"endnotes":{"separator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0003"}]}],"continuationSeparator":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"\u0004"}]}],"continuationNotice":[{"paragraphFormat":{"borders":{"top":{},"left":{},"right":{},"bottom":{},"horizontal":{},"vertical":{}},"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]}]}};
- documenteditorcontainer.documentEditor.open(data);
-};
-documenteditorcontainer.appendTo("#DocumentEditor");
-documenteditorcontainer.addEventListener("created", onCreated());
-
-
diff --git a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.ts b/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.ts
deleted file mode 100644
index fb4ff73a4..000000000
--- a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/index.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-//Inject require modules.
-DocumentEditorContainer.Inject(Toolbar);
-
-//Initialize Document Editor component.
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true, height: '590px'
-});
-
-//Open the default document in `created` event.
-container.created = function () {
- //load your default document here
- let data: string = '{"sfdt":"UEsDBAoAAAAIAIdcHVcVYDYnnwgAAAA9AAAEAAAAc2ZkdO1bX2/byBH/KgT7ahTUf9tv0b/zJU5inJ0Ah9QPK2opbrTkMsulFSUIUCRPfSlQIFf0oQf0rQ9F0QA9oIe+9MMESNC763fozC4pURKlUxybMi6xkQw5M7s789vZ2SG5fm6LSLGAPaOn3lDZh0omdM+OqWsfPnpuA42kffjcjib2YbNS3bMj3z5sHcAFD+ACqEypSukgpUMvsg8doIKaC39oH9aae7aX0gHT7AGMZN+jkxMyojb0PwpjYNySZMBcuA9dwYFR2bPpk4mmfKBc3dJIHp2/gE60tZGHpg6GMkaqYNjnIOPKUDkydJDe+4ZcIAEaqxANETIgHMblzEsFrmcUmR5D39le/Axs2Qdn4Na+K0KhphG1OkLG7IJAc1BA/4wKWaPjhR5dJyqWgBmKg1/2MYuVJTxL0afK8tBopVg4snAyBSD4AlApA5CShslwH2QBOkB08XKGSFvw4fW7XWxBGUjYHi6UX+07+Nvv28sRqaWdzsFBv2+kBpaOjXbldWr6J68jVnT6/WbTcfI6vKCfZnNxrKJ+Dg4W+5FbjEVXdPJeG50y5roY8WsfNoZhKw1naYLnXAPAqUs4rPhfLgxuDN1Vl1CYMVMQIuKWCYLjtJ1+mSCsTTezsFB5PLoiGXBqnSrJxrQEVLLRS0yAvW6rW6usJkAfpLW9AiWDzBEb+Rz+KTr8pW6OLIsVtrI5fqkgWbhQ5JWRNgvtKCdzQqtKwQKpzBOGXhkiUVZJq6OyQ9/nXosgv6cOyEIOTQaxK1mk1mqUgVU2YjlZlazsLJuwyoVPElFZiFaldLRKi6xkdVEleYcfhEMqoRYpMbMuT5pV9si7fwI8wye/CVO+NWSgK2mID4Khii0SDq0Ycn1cRlmkYaikMLSFGFu3QsWeJOhDktuRW051v7cPO/IcmUqGzFKzDJUV9ir3ypbAABo192xiyCUiYQ0E1+x8Ggo+tZ4kzB1bAykmIYTBU+txEkSxJS6otBSIOXk2tYZiZD3Kd3F+FRHyMdAhYh0SDCSbg9WvdJz9ugFLI5RTSMHJcxYYl4SEqVhJSgLrIZXEOiVhvHNkdFDV0qDqiIC52i7r7ukMqHa30e10F6KqNsNsuUWG3Aq/gH05FBf6uBn41bP0zFwpYuEpY94pldA4g7HebVV7vQUY67OcvaZhlrfXiddLL4dtUVc3A+JGCvGPb17/79U3M1BrtUZtfzHjNTJQ56opjDlG/v5yUOXfHZVmYZsogq8hdjB06WGQ+tZMfbsFeZfPXau0683agmvNzLWZZurZ/D53Wxhk1zfWJQJMt90l6pmvG6Hatg5pfpJ1SG59ZgtwY3bbVKMsr+BPolzJbbDZnrlxB966gql/shVMrubLqrmNReGHFjW1z0XN5ifY7Mms6CFlww5eck1zLdas1i/XMsyuZteZz66z8en9ZwuMSqkFxjk4b/w5z30Q8giPqfYivVr04YwFNLbu0Yn1lQhIaN7DOHv6BTGetyDmNIY5Q5F91jI/dvqdKRthsDDGHAC8gk2MM9jFoA1x502GBuXqbDtcNSeDrEhSKAAYPypiOAu1szKlXkqVgQIDyjEBBSQ9bcIzuOYQjHG47HoSzq4nbvbBYx59yuPGhqGamOMu6aEVGnoGfzDOBpfjlHqBGS8yZOirgBtjPWOQK4IoncepGhiZ8gMTw25KcC3c9zzm4lGagDz2YiPgOuJRyoliCLWaz6B1jN/F8OwN8Jyq03dq8D/+1vVVXecFbEzJNlpuvFELQtnDebJvRwTV333//duX3719+a+3r169ffmPmTVHmJEgh/z1Dz99+1vrh3/+5cfX3xg2HhB6//ffvf/3f/LK6NG7P755/92bd3/6/X//9hq4eIqoMNCO6EAWCs58grF9KxzFJCQoAmZP+ci8NyUcAWhTbdhDCKch3n+RPMbOTn2ZKFwOd/xA6le3greF1N3eQU0YLwlHpoWENWl/RcgFNugYl3pJ5NNA14kdn2IXJxzcIiMaUmUhS4wpTuzXjLGFrfhrZrUJ04OfMVwEOdkRg8xIpsQ4p/f/h1ZbcFTu0gvNAKR18jqjHO36giSKBLo3glFoHxPlYwenU4n5ogflJzShXFi9IY1jFN2XU+zqjj6UgIy7fBpohlRsjIxjIoT+RD3u+CSIdH8s9PHrZDwGrIh1IpRuKTS+SMBMEs58e8ioKpy1BxAFC04jI5GINBV6bqbcIzTUIRGEuXTdTkYI5TGlnEzIkFLrwZfIFpFY6PC2D5N+RNGK20SDhiSkMbXwRTy6x2LE7pSORNrJ3amJgykJAyIzvXtjDUMPFl6ggePuGIOL4Q5GTMv7cUDyOic+QUSQxFE6EeGaiQDR4/Uiuk4EgbpsxRnhixXfGYFcQY0kWZDgZGhposWensDUfEyHAQu3SkX5xNHYKgk1tkpCjS2SEGSNd3/+dsvE83MpJ4uvNNFkt2l66Qg5ZB+XXbokCU8oLJ/PyeVKk0s2U59Tyo1OKebT5HSWS2YPAGkV9XHlYtEzRHVeA+PRgfDpfNQs5xxRMsRDuJWrsQPrUhxWV6S/dloHlWaz2XBarapzUG/NS1TBTcW68TXtcq1nCv9qv1E/aBa/EFxpMXubtcwvYJsz2fNp2QRX9erg2hKt6qaXLx+EVq10tGqlo1UrQGs9SJV+rZU9NJeLTL10ZOobDr9tF0ezI3Klo9UoHa3GB8VRfrGVi0yzdGSaN3yFdalHEq6sEyLJSJLIt/oiVAamSvZ1eGUXhKqSyEWlG7EprfFmZVtab/9ut4kt7a+tt7+6t218ZRXPDuyvF9l/E9LrlvY3CvEvOeFtaWvzA229lhS0ha1UXk1uLn7Xu3reZTUzplZkRvWFULs3KrUC32pwfR4SOuOGuoGhMr19aigLRrHpzQv16fFy/4By9mHkN4njOLX0W4e7UyvqmRVhSVac48cwm37Gf4f4v/g/UEsBAhQACgAAAAgAh1wdVxVgNiefCAAAAD0AAAQAAAAAAAAAAAAAAAAAAAAAAHNmZHRQSwUGAAAAAAEAAQAyAAAAwQgAAAAA"}';
- container.documentEditor.open(data);
-};
-//Render Document Editor Container component.
-container.appendTo('#DocumentEditor');
-
-
diff --git a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/js/index.html b/ej2-javascript/code-snippet/document-editor/accessibility-cs1/js/index.html
deleted file mode 100644
index cc556940b..000000000
--- a/ej2-javascript/code-snippet/document-editor/accessibility-cs1/js/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
- EJ2 Animation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Syncfusion Word Processor(a.k.a)Document Editor Component
Syncfusion Word Processor(a.k.a)Document Editor Component
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/document-editor/chart-cs1/index.css b/ej2-javascript/code-snippet/document-editor/chart-cs1/index.css
deleted file mode 100644
index 18578ab19..000000000
--- a/ej2-javascript/code-snippet/document-editor/chart-cs1/index.css
+++ /dev/null
@@ -1,18 +0,0 @@
-
-#loader {
- color: #008cff;
- height: 40px;
- left: 45%;
- position: absolute;
- top: 45%;
- width: 30%;
- }
-
- #container {
- visibility: hidden;
- }
-
- #DocumentEditor{
- width:100%;
- height: 100%;
-}
diff --git a/ej2-javascript/code-snippet/document-editor/chart-cs1/index.js b/ej2-javascript/code-snippet/document-editor/chart-cs1/index.js
deleted file mode 100644
index 9be9e5549..000000000
--- a/ej2-javascript/code-snippet/document-editor/chart-cs1/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-var documenteditor = new ej.documenteditor.DocumentEditor({ isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
- documenteditor.acceptTab = true;
- documenteditor.enableAllModules();
- documenteditor.pageOutline = '#E0E0E0';
- documenteditor.appendTo('#DocumentEditor');
-
-var sfdt ={"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]};
-documenteditor.open(JSON.stringify(sfdt));
-
diff --git a/ej2-javascript/code-snippet/document-editor/chart-cs1/index.ts b/ej2-javascript/code-snippet/document-editor/chart-cs1/index.ts
deleted file mode 100644
index 6fab84d93..000000000
--- a/ej2-javascript/code-snippet/document-editor/chart-cs1/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
-
-//Initialize DocumentEditor Editor component.
-let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px'});
-
-documenteditor.appendTo('#DocumentEditor');
-
-let sfdt: string = `{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"textAlignment":"Center","afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"bold":true,"fontSize":12,"fontFamily":"Verdana","fontSizeBidi":12,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"bold":true,"fontSize":14,"fontFamily":"Verdana","fontColor":"#17365DFF","styleName":"a","fontSizeBidi":14,"fontFamilyBidi":"Verdana"},"text":"Northwind Management Report"}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"This management report provides information obtained through data analysis, regarding the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"performance of Northwind Traders. This report will pay particular"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":" attention to the "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"best-selling products, of our company. "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling products of Northwind Traders "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Company as follows: "}]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"rows":[{"cells":[{"blocks":[{"paragraphFormat":{"rightIndent":26.850000381469727,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"S.No"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Product Name"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Sum of Sales(in $)"}]}],"cellFormat":{"borders":{"top":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#4472C4FF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#4472C4FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"1"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Côte de Blaye"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"141.396"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"2"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Thüringer Rostbratwurst"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"80.368"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"3"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Raclette Courdavault"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"71.155"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"4"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Tarte au sucre "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"47.234"},{"characterFormat":{},"bookmarkType":1,"name":"_GoBack"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"bookmarkType":0,"name":"_GoBack"},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"5"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Camembert Pierrot "}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"46.825"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"6"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Gnocchi di nonna Alice"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"42.593"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"7"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Manjimup Dried Apples"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"41.819"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"8"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Alice Mutton"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"32.698"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"9"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Carnarvon Tigers"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"29.171"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#D9E2F3FF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}},{"cells":[{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"10"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":13.420000076293945,"preferredWidthType":"Percent","cellWidth":64.71214527422465,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":0},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"Rössle Sauerkraut."}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":48.86000061035156,"preferredWidthType":"Percent","cellWidth":292.87942351880633,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":1},{"blocks":[{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"25.696"}]}],"cellFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"vertical":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"preferredWidth":37.720001220703125,"preferredWidthType":"Percent","cellWidth":117.95841899993776,"columnSpan":1,"rowSpan":1,"verticalAlignment":"Top"},"columnIndex":2}],"rowFormat":{"height":14.399999618530273,"allowBreakAcrossPages":true,"heightType":"Exactly","isHeader":false,"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"gridBefore":0,"gridBeforeWidth":0,"gridBeforeWidthType":"Point","gridAfter":0,"gridAfterWidth":0,"gridAfterWidthType":"Point"}}],"grid":[64.71214527422465,292.87942351880633,117.95841899993776],"tableFormat":{"borders":{"top":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"left":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"right":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"bottom":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"diagonalDown":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"diagonalUp":{"color":"#000000","hasNoneStyle":false,"lineStyle":"None","lineWidth":0,"shadow":false,"space":0},"horizontal":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0},"vertical":{"color":"#8EAADBFF","hasNoneStyle":false,"lineStyle":"Single","lineWidth":0.5,"shadow":false,"space":0}},"shading":{"backgroundColor":"#FFFFFFFF","foregroundColor":"empty","textureStyle":"TextureNone"},"cellSpacing":0,"leftIndent":0,"tableAlignment":"Left","topMargin":0,"rightMargin":0.5,"leftMargin":0.5,"bottomMargin":0,"preferredWidth":475.54998779296875,"preferredWidthType":"Point","bidi":false,"allowAutoFit":true},"description":null,"title":null},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{"fontFamily":"Calibri","fontColor":"#000000FF","fontFamilyBidi":"Calibri"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"The best-selling product of the company is Cote de Blaye, being part of the Beverages "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"text":"category. The contribution of this product to the sum of our sales is $ 141.396."}]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Times New Roman"},"inlines":[]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"chartLegend":{"position":"Right","chartTitleArea":{"fontName":"+mn-lt","fontSize":9,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"808080","rgb":"#808080"}}}},"chartTitleArea":{"fontName":"+mn-lt","fontSize":14,"layout":{"layoutX":0,"layoutY":0},"dataFormat":{"fill":{"foreColor":"000000","rgb":"#000000"},"line":{"color":"000000","rgb":"#000000"}}},"chartArea":{"foreColor":"#FFFFFFFF"},"plotArea":{"foreColor":"#000000FF"},"chartCategory":[{"chartData":[{"yValue":141.396}],"categoryXName":"Côte de Blaye"},{"chartData":[{"yValue":80.368}],"categoryXName":"Thüringer Rostbratwurst"},{"chartData":[{"yValue":71.155}],"categoryXName":"Raclette Courdavault"},{"chartData":[{"yValue":47.234}],"categoryXName":"Tarte au sucre"},{"chartData":[{"yValue":46.825}],"categoryXName":"Camembert Pierrot"},{"chartData":[{"yValue":42.593}],"categoryXName":"Gnocchi di nonna Alice"},{"chartData":[{"yValue":41.819}],"categoryXName":"Manjimup Dried Apples"},{"chartData":[{"yValue":32.698}],"categoryXName":"Alice Mutton"},{"chartData":[{"yValue":29.171}],"categoryXName":"Carnarvon Tigers"},{"chartData":[{"yValue":25.696}],"categoryXName":"Rössle Sauerkraut"}],"chartSeries":[{"dataPoints":[{"fill":{"foreColor":"4472c4","rgb":"#4472c4"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ed7d31","rgb":"#ed7d31"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"a5a5a5","rgb":"#a5a5a5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"ffc000","rgb":"#ffc000"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"5b9bd5","rgb":"#5b9bd5"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"70ad47","rgb":"#70ad47"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"264379","rgb":"#264379"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9f480e","rgb":"#9f480e"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"636363","rgb":"#636363"},"line":{"color":"ffffff","rgb":"#ffffff"}},{"fill":{"foreColor":"9a7200","rgb":"#9a7200"},"line":{"color":"ffffff","rgb":"#ffffff"}}],"seriesName":"Sales"}],"chartPrimaryCategoryAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"categoryType":"Automatic","fontSize":11,"fontName":"Calibri","numberFormat":"General","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartPrimaryValueAxis":{"chartTitle":null,"chartTitleArea":{"layout":{},"dataFormat":{"fill":{},"line":{}}},"fontSize":11,"fontName":"Calibri","maximumValue":0,"minimumValue":0,"majorUnit":0,"hasMajorGridLines":false,"hasMinorGridLines":false,"majorTickMark":"TickMark_Outside","minorTickMark":"TickMark_None","tickLabelPosition":"TickLabelPosition_NextToAxis"},"chartTitle":"Best Selling Products","chartType":"Pie","gapWidth":0,"overlap":0,"height":225,"width":432}]},{"paragraphFormat":{"styleName":"Normal","listFormat":{}},"characterFormat":{},"inlines":[]},{"paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","styleName":"Normal","listFormat":{}},"characterFormat":{"fontSize":10,"fontFamily":"Verdana","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"inlines":[{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"According to the above chart, the total count of the selling products is 24 and the average "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"sales attributed to this product is $ 5.891 with highest sale $ 15.810 in the month of May in "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014. In the same year, in the month of March the same product reached the amount of $ "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"15.019. These were the highest sales of the product among the other products for the year "},{"characterFormat":{"fontSize":10,"fontFamily":"Verdana","styleName":"a","fontSizeBidi":10,"fontFamilyBidi":"Verdana"},"text":"2014."}]}],"headersFooters":{}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"#000000","fontSizeBidi":11,"fontFamilyBidi":"Calibri"},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":8,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"listFormat":{}},"characterFormat":{},"next":"Normal"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":3,"lineSpacing":1,"lineSpacingType":"Multiple","outlineLevel":"Level1","listFormat":{}},"characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 1 Char","type":"Character","characterFormat":{"bold":true,"fontSize":16,"fontFamily":"Arial","boldBidi":true,"fontSizeBidi":16,"fontFamilyBidi":"Arial"},"basedOn":"Default Paragraph Font"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Balloon Text","type":"Paragraph","paragraphFormat":{"afterSpacing":0,"lineSpacing":1,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Normal","link":"Balloon Text Char"},{"name":"Balloon Text Char","type":"Character","characterFormat":{"fontSize":9,"fontFamily":"Segoe UI","fontSizeBidi":9,"fontFamilyBidi":"Segoe UI"},"basedOn":"Default Paragraph Font"},{"name":"a","type":"Character","characterFormat":{},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[]}`;
-
-//Open the document in Document Editor.
-documenteditor.open(sfdt);
-
-
diff --git a/ej2-javascript/code-snippet/document-editor/chart-cs1/js/index.html b/ej2-javascript/code-snippet/document-editor/chart-cs1/js/index.html
deleted file mode 100644
index 8b83f8cd9..000000000
--- a/ej2-javascript/code-snippet/document-editor/chart-cs1/js/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
- EJ2 Animation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/document-editor/replace-cs1/app.ts b/ej2-javascript/code-snippet/document-editor/replace-cs1/app.ts
deleted file mode 100644
index e69de29bb..000000000
diff --git a/ej2-javascript/code-snippet/document-editor/replace-cs1/index.css b/ej2-javascript/code-snippet/document-editor/replace-cs1/index.css
deleted file mode 100644
index fcf73db8f..000000000
--- a/ej2-javascript/code-snippet/document-editor/replace-cs1/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-
-#loader {
- color: #008cff;
- height: 40px;
- left: 45%;
- position: absolute;
- top: 45%;
- width: 30%;
- }
-
- #container {
- visibility: hidden;
- }
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/document-editor/replace-cs1/index.js b/ej2-javascript/code-snippet/document-editor/replace-cs1/index.js
deleted file mode 100644
index 36a3e2270..000000000
--- a/ej2-javascript/code-snippet/document-editor/replace-cs1/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-var documenteditor = new ej.documenteditor.DocumentEditor({ enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false });
-documenteditor.appendTo('#DocumentEditor');
-var sfdt = `{
- "sections": [
- {
- "blocks": [
- {
- "inlines": [
- {
- "characterFormat": {
- "bold": true,
- "italic": true
- },
- "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
- }
- ]
- }
- ]
- }
- ]
-}`;
-documenteditor.open(sfdt);
-document.getElementById('replace_all').addEventListener('click',function () {
- var textToFind = (document.getElementById('find_text')).value;
- var textToReplace = (document.getElementById('replace_text')).value;
- if (textToFind !== '') {
- // Find all the occurences of given text
- documenteditor.searchModule.findAll(textToFind);
- if (documenteditor.searchModule.searchResults.length > 0) {
- // Replace all the occurences of given text
- documenteditor.searchModule.searchResults.replaceAll(textToReplace);
- }
- }
-});
-
diff --git a/ej2-javascript/code-snippet/document-editor/replace-cs1/index.ts b/ej2-javascript/code-snippet/document-editor/replace-cs1/index.ts
deleted file mode 100644
index f78d0d8da..000000000
--- a/ej2-javascript/code-snippet/document-editor/replace-cs1/index.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-import { DocumentEditor, Selection, Editor, Search } from '@syncfusion/ej2-documenteditor';
-//Inject require modules.
-DocumentEditor.Inject(Selection, Search, Editor);
-
-//Initialize the Document Editor component.
-let documenteditor: DocumentEditor = new DocumentEditor({ height: '370px', enableSelection: true, enableSearch: true, enableEditor: true, isReadOnly: false });
-documenteditor.appendTo('#DocumentEditor');
-let sfdt: string = `{
- "sections": [
- {
- "blocks": [
- {
- "inlines": [
- {
- "characterFormat": {
- "bold": true,
- "italic": true
- },
- "text": "Adventure Works Cycles, the fictitious company on which the AdventureWorks sample databases are based, is a large, multinational manufacturing company. The company manufactures and sells metal and composite bicycles to North American, European and Asian commercial markets. While its base operation is located in Bothell, Washington with 290 employees, several regional sales teams are located throughout their market base."
- }
- ]
- }
- ]
- }
- ]
-}`;
-
-//Open the SFDT document in Document Editor.
-documenteditor.open(sfdt);
-document.getElementById('replace_all').addEventListener('click', () => {
- let textToFind: string = (document.getElementById('find_text') as HTMLInputElement).value;
- let textToReplace: string = (document.getElementById('replace_text') as HTMLInputElement).value;
- if (textToFind !== '') {
- // Find all the occurences of given text
- documenteditor.searchModule.findAll(textToFind);
- if (documenteditor.searchModule.searchResults.length > 0) {
- // Replace all the occurences of given text
- documenteditor.searchModule.searchResults.replaceAll(textToReplace);
- }
- }
-});
-
-
diff --git a/ej2-javascript/code-snippet/document-editor/replace-cs1/js/index.html b/ej2-javascript/code-snippet/document-editor/replace-cs1/js/index.html
deleted file mode 100644
index 5e24936b4..000000000
--- a/ej2-javascript/code-snippet/document-editor/replace-cs1/js/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
-
- EJ2 Animation
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.css b/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.css
deleted file mode 100644
index 3e3720eea..000000000
--- a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-#container {
- visibility: hidden;
-}
-
-#loader {
- color: #008cff;
- font-family: 'Helvetica Neue','calibiri';
- font-size: 14px;
- height: 40px;
- left: 45%;
- position: absolute;
- top: 45%;
- width: 30%;
-}
diff --git a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.js b/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.js
deleted file mode 100644
index 9313e5491..000000000
--- a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/26.2.8/dist/ej2-pdfviewer-lib'
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.formFieldPropertiesChange = function (formFieldPropertyChange) {
- console.log('form field page number: ', formFieldPropertyChange.pageIndex);
- console.log('form field event name: ' + formFieldPropertyChange.name);
- console.log('form field data: ', formFieldPropertyChange.field);
- console.log('Whether form field alignment changed '+ formFieldPropertyChange.isAlignmentChanged);
- console.log('Whether form field backgropund color changed '+ formFieldPropertyChange.isBackgroundColorChanged);
- console.log('Whether form field border color changed '+ formFieldPropertyChange.isBorderColorChanged);
- console.log('Whether form field border width changed '+ formFieldPropertyChange.isBorderWidthChanged);
- console.log('Whether form field color changed changed '+ formFieldPropertyChange.isColorChanged);
- console.log('Whether form field custom data changed '+ formFieldPropertyChange.isCustomDataChanged);
- console.log('Whether form field font family changed '+ formFieldPropertyChange.isFontFamilyChanged);
- console.log('Whether form field font size changed '+ formFieldPropertyChange.isFontSizeChanged);
- console.log('Whether form field font style changed '+ formFieldPropertyChange.isFontStyleChanged);
- console.log('Whether form field maximum length changed '+ formFieldPropertyChange.isMaxLengthChanged);
- console.log('Whether form field name changed '+ formFieldPropertyChange.isNameChanged);
- console.log('Whether form field readonly changed '+ formFieldPropertyChange.isReadOnlyChanged);
- console.log('Whether form field required changed '+ formFieldPropertyChange.isRequiredChanged);
- console.log('Whether form field print changed '+ formFieldPropertyChange.isPrintChanged);
- console.log('Whether form field tool tip changed '+ formFieldPropertyChange.isToolTipChanged);
- console.log('Whether form field visiblity changed '+ formFieldPropertyChange.isVisibilityChanged);
- console.log('Whether form field value changed '+ formFieldPropertyChange.isValueChanged);
- console.log('Whether form field new value changed '+ formFieldPropertyChange.newValue);
- console.log('Whether form field old valuue changed '+ formFieldPropertyChange.oldValue);
-}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.ts b/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.ts
deleted file mode 100644
index 5c45862ef..000000000
--- a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView, BookmarkView,
- TextSelection, Annotation, FormDesigner, FormFields, FormFieldPropertiesChangeArgs, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer );
-
-let pdfviewer: PdfViewer = new PdfViewer({
-documentPath:'https://cdn.syncfusion.com/content/pdf/form-designer.pdf',
-resourceUrl:'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib'
-});
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.formFieldPropertiesChange = function (formFieldPropertyChange: FormFieldPropertiesChangeArgs) {
- console.log('form field page number: ', formFieldPropertyChange.pageIndex);
- console.log('form field event name: ' + formFieldPropertyChange.name);
- console.log('form field data: ', formFieldPropertyChange.field);
- console.log('Whether form field alignment changed '+ formFieldPropertyChange.isAlignmentChanged);
- console.log('Whether form field backgropund color changed '+ formFieldPropertyChange.isBackgroundColorChanged);
- console.log('Whether form field border color changed '+ formFieldPropertyChange.isBorderColorChanged);
- console.log('Whether form field border width changed '+ formFieldPropertyChange.isBorderWidthChanged);
- console.log('Whether form field color changed changed '+ formFieldPropertyChange.isColorChanged);
- console.log('Whether form field custom data changed '+ formFieldPropertyChange.isCustomDataChanged);
- console.log('Whether form field font family changed '+ formFieldPropertyChange.isFontFamilyChanged);
- console.log('Whether form field font size changed '+ formFieldPropertyChange.isFontSizeChanged);
- console.log('Whether form field font style changed '+ formFieldPropertyChange.isFontStyleChanged);
- console.log('Whether form field maximum length changed '+ formFieldPropertyChange.isMaxLengthChanged);
- console.log('Whether form field name changed '+ formFieldPropertyChange.isNameChanged);
- console.log('Whether form field readonly changed '+ formFieldPropertyChange.isReadOnlyChanged);
- console.log('Whether form field required changed '+ formFieldPropertyChange.isRequiredChanged);
- console.log('Whether form field print changed '+ formFieldPropertyChange.isPrintChanged);
- console.log('Whether form field tool tip changed '+ formFieldPropertyChange.isToolTipChanged);
- console.log('Whether form field visiblity changed '+ formFieldPropertyChange.isVisibilityChanged);
- console.log('Whether form field value changed '+ formFieldPropertyChange.isValueChanged);
- console.log('Whether form field new value changed '+ formFieldPropertyChange.newValue);
- console.log('Whether form field old valuue changed '+ formFieldPropertyChange.oldValue);
-}
\ No newline at end of file
diff --git a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/js/index.html b/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/js/index.html
deleted file mode 100644
index 6a0f25a77..000000000
--- a/ej2-javascript/code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/js/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-
- EJ2 PDF Viewer
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/accessibility.md b/ej2-javascript/document-editor/accessibility.md
deleted file mode 100644
index 343509ac1..000000000
--- a/ej2-javascript/document-editor/accessibility.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: Accessibility in ##Platform_Name## Document editor component | Syncfusion
-description: Learn here all about Accessibility in Syncfusion ##Platform_Name## Document editor component of Syncfusion Essential JS 2 and more.
-control: Accessibility
-platform: ej2-javascript
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Accessibility in Angular Document editor component
-
-The accessibility compliance for the Document editor component is outlined below.
-
-| Accessibility Criteria | Compatibility |
-| -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
-| [Color Contrast](../common/accessibility#color-contrast) | |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
-| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
-
-
-
- All features of the component meet the requirement.
-
-
- Some features of the component do not meet the requirement.
-
-
- The component does not meet the requirement.
-
-## Keyboard interaction
-
-Document editor supports [keyboard shortcuts](./keyboard-shortcut).
-
-## Ensuring accessibility
-
-The Document editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
-
-The accessibility compliance of the Document editor component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/wordprocessor.html) in a new window to evaluate the accessibility of the Document editor component with accessibility tools.
-
-{% previewsample "page.domainurl/code-snippet/document-editor/accessibility-cs1" %}
-
-## See also
-
-- [Accessibility in Syncfusion® Angular components](../common/accessibility)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/bookmark.md b/ej2-javascript/document-editor/bookmark.md
deleted file mode 100644
index 5523a23a2..000000000
--- a/ej2-javascript/document-editor/bookmark.md
+++ /dev/null
@@ -1,125 +0,0 @@
----
-layout: post
-title: Bookmark in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Bookmark in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Bookmark
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Bookmark in ##Platform_Name## Document editor control
-
-Bookmark is a powerful tool that helps you to mark a place in the document to find again easily. You can enter many bookmarks in the document and give each one a unique name to identify easily.
-
-Document Editor provides built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using built-in hyperlink dialog. You can also delete bookmarks from a document.
-
->Bookmark names need to begin with a letter. They can include both numbers and letters, but not spaces. To separate the words, use an underscore.
->Bookmark names starting with an underscore are called hidden bookmarks. For example, bookmarks generated for table of contents.
-
-## Add bookmark
-
-Using [`insertBookmark`](../api/document-editor/editor/#insertbookmark) method, Bookmark can be added to the selected text.
-
-```c#
-container.documentEditor.editor.insertBookmark("Bookmark1");
-```
-
-## Select Bookmark
-
-You can select the bookmark in the document using [`selectBookmark`](../api/document-editor/selection/#selectbookmark) method by providing Bookmark name to select as shown in the following code snippet.
-
-```c#
-container.documentEditor.selection.selectBookmark("Bookmark1", true);
-```
-
->Note: Second parameter is optional parameter and it denotes is exclude bookmark start and end from selection. If true, excludes bookmark start and end from selection.
-
-## Delete Bookmark
-
-You can delete bookmark in the document using [`deleteBookmark`](../api/document-editor/editor/#deletebookmark) method as shown in the following code snippet.
-
-```c#
-container.documentEditor.editor.deleteBookmark("Bookmark1");
-```
-
-## Get Bookmark from document
-
-You can get all the bookmarks in the document using [`getBookmarks`](../api/document-editor/#getbookmarks) method as shown in the following code snippet.
-
-```c#
-container.documentEditor.getBookmarks(false);
-```
-
->Note: Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark.
-
-## Get Bookmark from selection
-
-You can get bookmarks in current selection in the document using [`getBookmarks`](../api/document-editor/selection/#getbookmarks) method as shown in the following code snippet.
-
-```c#
-container.documentEditor.selection.getBookmarks(false);
-```
-
-## Replace bookmark content
-
-You can replace bookmark content without removing the bookmark start and end for backtracking the bookmark content.
-
-```c#
-container.documentEditor.selection.selectBookmark("Bookmark1", true);
-container.documentEditor.editor.insertText('Hello World')
-```
-
-You can replace content by removing the bookmark start and end, thus the bookmark content can't be tracked in future.
-
-```c#
-container.documentEditor.selection.selectBookmark("Bookmark1");
-container.documentEditor.editor.insertText('Hello World')
-```
-
-## Show or Hide bookmark
-
-You can show or hide the show square brackets around bookmarked items in Document editor component.
-
-The following example code illustrates how to show or hide square brackets around bookmarked items.
-
-```ts
-container.documentEditorSettings.showBookmarks = true;
-```
-
-## Bookmark Dialog
-
-The following example shows how to open bookmark dialog in Document Editor.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs1" %}
-{% endif %}
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module)
-* [Bookmark dialog](../document-editor/dialog#bookmark-dialog)
diff --git a/ej2-javascript/document-editor/chart.md b/ej2-javascript/document-editor/chart.md
deleted file mode 100644
index b98073e51..000000000
--- a/ej2-javascript/document-editor/chart.md
+++ /dev/null
@@ -1,66 +0,0 @@
----
-layout: post
-title: Chart in ##Platform_Name## Document Editor Control | Syncfusion
-description: Learn here all about Chart in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Chart
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Chart in ##Platform_Name## Document Editor Control
-
-Document Editor provides chart preservation support. Using Document Editor, you can see the chart reports from your Word document.
-
-The following example shows chart preservation in Document Editor.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/chart-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/chart-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/chart-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/chart-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/chart-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/chart-cs1" %}
-{% endif %}
-
-## Supported Chart Types
-
-The following chart types are supported in Document Editor
-* Scatter_Markers
-* Bubble
-* Area
-* Area_Stacked
-* Area_Stacked_100
-* Bar_Clustered
-* Bar_Stacked
-* Bar_Stacked_100
-* Column_Clustered
-* Column_Stacked
-* Column_Stacked_100
-* Pie
-* Doughnut
-* Line
-* Line_Markers
-* Line_Markers_Stacked
-* Line_Markers_Stacked_100
-* Line_Stacked
-* Line_Stacked_100
diff --git a/ej2-javascript/document-editor/clipboard.md b/ej2-javascript/document-editor/clipboard.md
deleted file mode 100644
index d64f940f2..000000000
--- a/ej2-javascript/document-editor/clipboard.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-layout: post
-title: Clipboard in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Clipboard in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Clipboard
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Clipboard in ##Platform_Name## Document editor control
-
-Document Editor takes advantage of system clipboard and allows you to copy or move a portion of the document into it in HTML format, so that it can be pasted in any application that supports clipboard.
-
-## Copy
-
-Copy a portion of document to system clipboard using built-in context menu of Document Editor. You can also do it programmatically using the following sample code.
-
-```ts
-documentEditor.selection.copy();
-```
-
-## Cut
-
-Cut a portion of document to system clipboard using built-in context menu of Document Editor. You can also do it programmatically using the following sample code.
-
-```ts
-documentEditor.editor.cut();
-```
-
-## Paste
-
-Due to limitations, you can paste contents from system clipboard in Document Editor only using the ‘CTRL + V’ keyboard shortcut.
-
->Note: Due to browser limitation of getting content from system clipboard, paste using API and context menu option doesn't work.
-
-## Local paste (copy/paste within control)
-
-Document Editor expose API to enable local paste within the control. On enabling this, the following is performed:
-* Selected contents will be stored to an internal clipboard in addition to system clipboard.
-* Clipboard paste will be overridden, and internally stored data (SFDT data) that has formatted text will be pasted using paste() API in Document editor.
-
-Refer to the following sample code.
-
-```ts
-//Initialize the Document Editor.
-let editor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
-//Enable the local paste.
-editor.enableLocalPaste = true;
-```
-
-By default, **enableLocalPaste** is false.
-
-When local paste is enabled for a Document Editor instance, you can paste contents programmatically if the internal clipboard has stored data during last copy operation. Refer to the following sample code.
-
-```ts
-documentEditor.editor.paste();
-```
-
-### Paste options in context menu
-
-In Document editor, paste options in context menu will be in disabled state if you were try to copy/paste content from outside of Document editor. It gets enabled when **enableLocalPaste** is true and trying to copy/paste content inside Document editor.
-
->Note: Due to browser limitation of getting content from system clipboard, paste using API and context menu option doesn't work. Hence, the paste option is disabled in context menu.
-Alternatively, you can use the keyboard shortcuts,
-
-* Cut: Ctrl + X
-* Copy: Ctrl + C
-* Paste: Ctrl + V
-
-### EnableLocalPaste behaviour
-
-|**EnableLocalPaste** |**Paste behavior details**|
-|--------------------------|----------------------|
-|True |Allows to paste content that is copied from the same Document Editor component alone and prevents pasting content from system clipboard. Hence the content copied from outside Document Editor component can’t be pasted. Browser limitation of pasting from system clipboard using API and context menu options, will be resolved. So, you can copy and paste content within the Document Editor component using API and context menu options too.|
-|False|Allows to paste content from system clipboard. Hence the content copied from both the Document Editor component and outside can be pasted. Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.|
-
-Note:
-* Keyboard shortcut for pasting will work properly in both cases.
-* Copying content from Document Editor component and pasting outside will work properly in both cases.
-
-## Paste with formatting
-
-Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options and copy/paste content from outside of Document editor, set the `enableLocalPaste` property in Document Editor to false and use this .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`]() by the web API service implementation. This library helps you to paste the system clipboard data with formatting.
-
-Refer this [page](../document-editor/web-services-overview) for more details.
-
-You can paste your system clipboard data in the following ways:
-* **Keep Source Formatting** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style.
-* **Match Destination Formatting** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted.
-* **Text Only** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded and tables are converted to a series of paragraphs.
-
-This paste option appear as follows.
-
-
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module)
-* [Keyboard shortcuts](../document-editor/keyboard-shortcut#clipboard)
diff --git a/ej2-javascript/document-editor/collaborative-editing/overview.md b/ej2-javascript/document-editor/collaborative-editing/overview.md
deleted file mode 100644
index 0df8058ec..000000000
--- a/ej2-javascript/document-editor/collaborative-editing/overview.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: post
-title: Collaborative Editing in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about collaborative editing in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Collaborative Editing
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Collaborative Editing
-
-Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
-
-## Prerequisites
-
-- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing.
-- *Distributed Cache or Database*: Used to temporarily store the queue of editing operations.
-
-### Real time transport protocol
-
-- *Managing Connections*: Keeps active connections open for real-time collaboration, allowing seamless communication between users and the server.
-- *Broadcasting Changes*: Ensures that any edits made by one user are instantly sent to all collaborators, keeping everyone on the same page with the latest document version.
-
-### Distributed cache or database
-
-To support collaborative editing, it's crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options:
-
-- ***Distributed Cache***: Handles more HTTP requests per second than a database approach. For example, a server with 2 vCPUs and 8GB RAM can process up to 125 requests per second using a distributed cache. We highly recommend using a distributed cache as a backing system over a database.
-
-- ***Database***: With the same server configuration, it can handle up to 50 requests per second.
-
-Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` algorithm.
-
->**Tips**: To calculate the average requests per second of your application Assume the editor in your live application is actively used by 1000 users and each user’s edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
-
->**Note**: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app’s traffic and choose a configuration that best suits your needs.
-
-#### See Also
-
-- [Collaborative editing using Redis cache in ASP.NET Core](../../document-editor/collaborative-editing/using-redis-cache-asp-net-core)
-- [Collaborative editing using Java](../../document-editor/collaborative-editing/using-redis-cache-java)
diff --git a/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-asp-net-core.md b/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-asp-net-core.md
deleted file mode 100644
index a5fa3a9c1..000000000
--- a/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-asp-net-core.md
+++ /dev/null
@@ -1,408 +0,0 @@
----
-layout: post
-title: Collaborative Editing in ##Platform_Name## Document editor control | Syncfusion
-description: Learn how to enable collaborative editing using Redis in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Collaborative Editing
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Collaborative Editing
-
-Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
-
-## Prerequisites
-
-The following are needed to enable collaborative editing in Document Editor.
-
-* `SignalR`
-* `Redis`
-
-## SignalR
-
-In collaborative editing, real-time communication is Essential® for users to see each other's changes instantly. We use a real-time transport protocol to efficiently send and receive data as edits occur. For this, we utilize SignalR, which supports real-time data exchange between the client and server. SignalR ensures that updates are transmitted immediately, allowing seamless collaboration by handling the complexities of connection management and offering reliable communication channels.
-
-To make SignalR work in a distributed environment (with more than one server instance), it needs to be configured with either Azure SignalR Service or a Redis backplane.
-
-### Scale-out SignalR using Azure SignalR service
-
-Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers).
-
-Below is a code snippet to configure Azure SignalR in an ASP.NET Core application using the ```AddAzureSignalR``` method
-
-```csharp
-builder.Services.AddSignalR() .AddAzureSignalR("", options => {
- // Specify the channel name
- options.Channels.Add("document-editor");
- });
-```
-
-### Scale-out SignalR using Redis
-
-Using a Redis backplane, you can achieve horizontal scaling of your SignalR application. The SignalR leverages Redis to efficiently broadcast messages across multiple servers. This allows your application to handle large user bases with minimal latency.
-
-In the SignalR app, install the following NuGet package:
-* ` Microsoft.AspNetCore.SignalR.StackExchangeRedis`
-
-Below is a code snippet to configure Redis backplane in an ASP.NET Core application using the ```AddStackExchangeRedis ``` method
-
-```csharp
-builder.Services.AddSignalR().AddStackExchangeRedis("");
-```
-Configure options as needed:
-
-The following example shows how to add a channel prefix in the ConfigurationOptions object.
-
-```csharp
-builder.Services.AddDistributedMemoryCache().AddSignalR().AddStackExchangeRedis(connectionString, options =>
- {
- options.Configuration.ChannelPrefix = "document-editor";
- });
-```
-
-## Redis
-
-In collaborative editing, Redis is used to store temporary data that helps queue editing operations and resolve conflicts using the `Operational Transformation` algorithm.
-
-All editing operations in collaborative editing are stored in the Redis cache. To prevent memory buildup, we can configure a `SaveThreshold` limit at the application level. If the `SaveThreshold` is 100, editing operations up to twice the save threshold limit are kept in Redis per document. Once exceeded, the first 100 operations (as defined by the save threshold) are removed from the cache and automatically saved to the source input document.
-
-The configuration and store size of the Redis cache can be adjusted based on the following considerations.
-
-- *Storage Requirements*: A minimum of 400KB of cache memory is needed for editing a single document, with the capacity to store up to 100 editing operations. Storage needs may increase based on following factor.
- - *Images*: Increases with the number of images added to the document.
- - *Pasted content*: Depends on the size of the SFDT content.
-- *Connection Limits*: Redis has a limit on concurrent connections. Choose the Redis configuration based on your user base to ensure optimal performance.
-
-> For better performance, we recommend to have minimum `SaveThreshold` limit of 100.
-
-## How to enable collaborative editing in client side
-
-### Step 1: Enable collaborative editing in Document Editor
-
-To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/index.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/index.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-### Step 2: Configure SignalR to send and receive changes
-
-To broadcast the changes made and receive changes from remote users, configure SignalR like below.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/script-1.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/script-1.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-### Step 3: Join SignalR room while opening the document
-
-When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SignalR, which facilitates sending and receiving data from the server.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/script-2.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/script-2.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-### Step 4: Broadcast current editing changes to remote users
-
-Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/script-3.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-cs1/script-3.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-## How to enable collaborative editing in ASP.NET Core
-
-### Step 1: Configure SignalR in ASP.NET Core
-
-We are using Microsoft SignalR to broadcast the changes. Please add the following configuration to your application's `Program.cs` file.
-
-```csharp
- using Microsoft.Azure.SignalR;
- .....
- builder.Services.AddSignalR();
- .....
- .....
- .....
- app.MapHub("/documenteditorhub");
- .....
- .....
-```
-
-### Step 2: Configure SignalR hub to create room for collaborative editing session
-
-To manage groups for each document, create a folder named "Hub" and add a file named `DocumentEditorHub.cs` inside it. Add the following code to the file to manage SignalR groups using room names.
-
-Join the group by using unique id of the document by using `JoinGroup` method.
-
-```csharp
-static Dictionary userManager = new Dictionary();
- internal static Dictionary> groupManager = new Dictionary>();
-
- // Join to the specified room name
- public async Task JoinGroup(ActionInfo info)
- {
- if (!userManager.ContainsKey(Context.ConnectionId))
- {
- userManager.Add(Context.ConnectionId, info);
- }
- info.ConnectionId = Context.ConnectionId;
- //Add the current connected use to the specified group
- await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName);
- if (groupManager.ContainsKey(info.RoomName))
- {
- await Clients.Caller.SendAsync("dataReceived", "addUser", groupManager[info.RoomName]);
- }
- lock (groupManager)
- {
- if (groupManager.ContainsKey(info.RoomName))
- {
- groupManager[info.RoomName].Add(info);
- }
- else
- {
- List actions = new List
- {
- info
- };
- groupManager.Add(info.RoomName, actions);
- }
- }
- // Notify other users in the group about new user joined the collaborative editing session.
- Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info);
- }
-
-```
-
-Handle user disconnection using SignalR.
-
-```csharp
-//Handle disconnection from group.
- public override Task OnDisconnectedAsync(Exception? e)
- {
- string roomName = userManager[Context.ConnectionId].RoomName;
- if (groupManager.ContainsKey(roomName))
- {
- groupManager[roomName].Remove(userManager[Context.ConnectionId]);
-
- if (groupManager[roomName].Count == 0)
- {
- groupManager.Remove(roomName);
- //If all user disconnected from current room. Auto save the change to source document.
- CollaborativeEditingController.UpdateOperationsToSourceDocument(roomName, “<>”, false);
- }
- }
-
- if (userManager.ContainsKey(Context.ConnectionId))
- {
- //Notify other user in the group about user exit the collaborative editing session
- Clients.OthersInGroup(roomName).SendAsync("dataReceived", "removeUser", Context.ConnectionId);
- Groups.RemoveFromGroupAsync(Context.ConnectionId, roomName);
- userManager.Remove(Context.ConnectionId);
- }
- return base.OnDisconnectedAsync(e);
- }
-
-```
-
-### Step 3: Configure Redis cache connection string in application level
-
-Configure the Redis that stores temporary data for the collaborative editing session. Provide the Redis connection string in `appsettings.json` file.
-
-```json
-.....
- "ConnectionStrings": {
- "RedisConnectionString": "<>"
- }
-.....
-
-```
-
-### Step 4: Configure Web API actions for collaborative editing
-
-#### Import File
-
-1. When opening a document, check the Redis cache for pending operations and retrieve them for the collaborative editing session.
-2. If pending operations exist, apply them to the WordDocument instance using the `UpdateActions` method before converting it to the SFDT format.
-
-```csharp
-public string ImportFile([FromBody] FileInfo param)
- {
- .....
- .....
- DocumentContent content = new DocumentContent();
-
- .....
- //Get source document from database/file system/blob storage
- WordDocument document = GetSourceDocument(param.fileName);
- .....
- //Get the temporary operations
- List actions = await GetPendingOperations(param.fileName, 0, -1);
- if(actions!=null && actions.Count > 0)
- {
- //Apply temporary data to the document.
- document.UpdateActions(actions);
- }
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- content.version = 0;
- content.sfdt = json;
- return Newtonsoft.Json.JsonConvert.SerializeObject(content);
- }
-
-```
-
-#### Update editing records to Redis cache.
-
-Each edit operation performed by the user is sent to the server and pushed into a Redis list data structure. Each operation is assigned a version number upon insertion into Redis.
-
-After inserting the record into the server, the position of the current editing operation must be transformed relative to any previous editing operations not yet synced with the client using the `TransformOperation` method to resolve any potential conflicts with the help of the `Operational Transformation` algorithm.
-
-Once the conflict is resolved, the current operation is broadcast to all connected users within the group.
-
-```csharp
-public async Task UpdateAction([FromBody] ActionInfo param)
-{
- try
- {
- ActionInfo modifiedAction = AddOperationsToCache(param);
- //After transformation broadcast changes to all users in the gropu
- await _hubContext.Clients.Group(param.RoomName).SendAsync("dataReceived", "action", modifiedAction);
- return modifiedAction;
- }
- catch
- {
- return null;
- }
-}
-
-private ActionInfo AddOperationsToCache(ActionInfo action)
- {
- int clientVersion = action.Version;
- string insertScript = "-------"
- …………
- …………
- …………
- …………
-
- IDatabase database = _redisConnection.GetDatabase();
- // Define the keys for Redis operations based on the action's room name
- RedisKey[] keys = new RedisKey[] { action.RoomName + CollaborativeEditingHelper.VersionSuffix, action.RoomName, action.RoomName + CollaborativeEditingHelper.RevisionSuffix };
- // Serialize the action and prepare values for the Redis script
- RedisValue[] values = new RedisValue[] { JsonConvert.SerializeObject(action), clientVersion.ToString(), CollaborativeEditingHelper.SaveThreshold.ToString() };
- // Execute the Lua script in Redis and store the results
- RedisResult[] results = (RedisResult[])await database.ScriptEvaluateAsync(insertScript, keys, values);
-
- List previousOperations = ((RedisResult[])results[1]).Select(value => JsonConvert.DeserializeObject(value.ToString())).ToList();
- previousOperations.ForEach(op => op.Version = ++clientVersion);
- if (previousOperations.Count > 1)
- {
- // Set the current action to the last operation in the list
- action = previousOperations.Last();
- // Transform operations that have not been transformed yet
- previousOperations.Where(op => !op.IsTransformed).ToList().ForEach(op => CollaborativeEditingHandler.TransformOperation(op, previousOperations));
- }
- action = actions[actions.Count - 1];
- action.Version = updateVersion;
- //Return the transformed operation to broadcast it to other clients.
- return action;
- }
-
-```
-
-#### Add Web API to get previous operation as a backup to get lost operations
-
-On the client side, messages broadcast using SignalR might be received out of order or lost due to network issues. In such cases, we need a backup method to retrieve missing operations from Redis. By using the following method, we can retrieve all operations performed after the last successful client-synchronized version and return any missing operations to the requesting client.
-
-```csharp
- public async Task GetActionsFromServer(ActionInfo param)
- {
- try
- {
- // Initialize necessary variables from the parameters and helper class
- int saveThreshold = CollaborativeEditingHelper.SaveThreshold;
- string tableName = param.RoomName;
- int lastSyncedVersion = param.Version;
- int clientVersion = param.Version;
-
- // Retrieve the database connection
- IDatabase database = _redisConnection.GetDatabase();
-
- // Fetch actions that are effective and pending based on the last synced version
- List actions = await GetEffectivePendingVersion(tableName, lastSyncedVersion);
-
- // Increment the version for each action sequentially
- actions.ForEach(action => action.Version = ++clientVersion);
-
- // Filter actions to only include those that are newer than the client's last known version
- actions = actions.Where(action => action.Version > lastSyncedVersion).ToList();
-
- // Transform actions that have not been transformed yet
- actions.Where(action => !action.IsTransformed).ToList()
- .ForEach(action => CollaborativeEditingHandler.TransformOperation(action, actions));
-
- // Serialize the filtered and transformed actions to JSON and return
- return Newtonsoft.Json.JsonConvert.SerializeObject(actions);
- }
- catch (Exception ex)
- {
- // In case of an exception, return an empty JSON object
- return "{}";
- }
- }
-```
-
-Full version of the code discussed about can be found in below GitHub location.
-
-GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-java.md b/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-java.md
deleted file mode 100644
index 4a45bcb93..000000000
--- a/ej2-javascript/document-editor/collaborative-editing/using-redis-cache-java.md
+++ /dev/null
@@ -1,349 +0,0 @@
----
-layout: post
-title: Collaborative Editing in ##Platform_Name## Document editor control | Syncfusion
-description: Learn how to enable collaborative editing in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Collaborative Editing Java
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Collaborative Editing Java
-
-Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
-
-
-## Prerequisites
-
-The following are needed to enable collaborative editing in Document Editor.
-
-- `SockJS`
-- `Redis`
-
-## How to enable collaborative editing in client side
-
-### Step 1: Enable collaborative editing in Document Editor
-
-To enable collaborative editing, inject `CollaborativeEditingHandler` and set the property `enableCollaborativeEditing` to true in the Document Editor, like in the code snippet below.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/index.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/index.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-### Step 2: Configure SockJS to send and receive changes
-
-To broadcast the changes made and receive changes from remote users, configure SockJS like below.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/script-1.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/script-1.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-### Step 3: Subscribe to specific topic while opening the document
-
-When opening a document, we need to generate a unique ID for each document. These unique IDs are then used to create rooms using SockJS, which facilitates sending and receiving data from the server.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/script-2.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/script-2.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-### Step 4: Broadcast current editing changes to remote users
-
-Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
-
-{% if page.publishingplatform == "typescript" %}
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/script-3.ts %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/collaborative-editing-java-cs1/script-3.js %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-## How to enable collaborative editing in Java
-
-### Step 1: Configure SockJS hub to create room for collaborative editing session.
-
-To manage groups for each document, create a folder named “Hub” and add a file named ``` DocumentEditorHub.java ``` inside it. Add the following code to the file to manage SockJS groups using room names.
-
-Join the group by using unique id of the document by using `joinGroup` method.
-
-```java
-@MessageMapping("/join/{documentName}")
-public void joinGroup(ActionInfo info, SimpMessageHeaderAccessor headerAccessor,
- @DestinationVariable String documentName) throws JsonProcessingException {
- // To get the connection Id
- String connectionId = headerAccessor.getSessionId();
- info.setConnectionId(connectionId);
- String docName = info.getRoomName();
- HashMap additionalHeaders = new HashMap<>();
- additionalHeaders.put("action", "connectionId");
- MessageHeaders headers = new MessageHeaders(additionalHeaders);
- // send the connection Id to the client
- broadcastToRoom(docName, info, headers);
- …………
- …………
- …………
-}
-
-public static void broadcastToRoom(String roomName, Object payload, MessageHeaders headers) {
- messagingTemplate.convertAndSend("/topic/public/" + roomName, MessageBuilder.createMessage(payload, headers));
-}
-```
-### Step 2: Handle user disconnection using SockJS.
-
-```java
-@EventListener
-public void handleWebSocketDisconnectListener(SessionDisconnectEvent event) throws Exception {
- String sessionId = event.getSessionId();
- try (Jedis jedis = RedisSubscriber.getJedis()) {
- // to get the user details of the provided sessionId
- String docName = jedis.hget("documentMap", sessionId);
- // Publish a message indicating the user's departure from the group
- jedis.publish(docName, "LEAVE|" + sessionId);
- } catch (JedisConnectionException e) {
- System.out.println(e);
- }
-}
-```
-
-### Step 3: Configure Redis cache connection string in application level.
-
-Configure the Redis that stores temporary data for the collaborative editing session. Provide the Redis connection string in `application.properties` file.
-
-```java
-//Redis configuration
-spring.datasource.redishost= ""
-spring.datasource.redisport= ""
-spring.datasource.redispassword= ""
-spring.datasource.redisssl =
-```
-
-### Step 4: Configure Web API actions for collaborative editing.
-
-#### Import File
-- When opening a document, create a Redis cache to store temporary data for the collaborative editing session.
-- If the Redis cache already exists, retrieve the records from the Redis cache and apply them to the WordProcessorHelper instance using the `updateActions` method before converting it to the SFDT format.
-
-```java
-public String importFile(@RequestBody FilesPathInfo file) throws Exception {
- try {
- ClassLoader classLoader = getClass().getClassLoader();
- // Get source document from database/file system/blob storage
- WordProcessorHelper document = getDocumentFromBucketS3(file.getFileName(), datasourceAccessKey,
- datasourceSecretKey, datasourceBucketName);
- documentName=file.getFileName();
- // Get the list of pending operations for the document
- List actions = getPendingOperations(file.getFileName(), 0, -1);
- if (actions != null && actions.size() > 0) {
- // If there are any pending actions, update the document with these actions
- document.updateActions(actions);
- }
- // Serialize the updated document to SFDT format
- String json = WordProcessorHelper.serialize(document);
- // Return the serialized content as a JSON string
- return json;
- } catch (Exception e) {
- e.printStackTrace();
- return "{\"sections\":[{\"blocks\":[{\"inlines\":[{\"text\":" + e.getMessage() + "}]}]}]}";
- }
-}
-```
-
-#### Update editing records to Redis
-- Each edit operation made by the user is sent to the server and is pushed to the Redis. Each operation receives a version number after being inserted into the Redis.
-- After inserting the records to the server, the position of the current editing operation must be transformed against any previous editing operations not yet synced with the client using the TransformOperation method.
-- After performing the transformation, the current operation is broadcast to all connected users within the group.
-
-```java
-public ActionInfo updateAction(@RequestBody ActionInfo param) throws Exception {
- String roomName = param.getRoomName();
- ActionInfo transformedAction = addOperationsToCache(param);
- HashMap action = new HashMap<>();
- action.put("action", "updateAction");
- DocumentEditorHub.publishToRedis(roomName, transformedAction);
- DocumentEditorHub.broadcastToRoom(roomName, transformedAction, new MessageHeaders(action));
- return transformedAction;
-}
-
-private ActionInfo addOperationsToCache(ActionInfo action) throws Exception {
- int clientVersion = action.getVersion();
- …………
- …………
- …………
-
- // Define the keys for Redis operations based on the action's room name
- String[] keys = { roomName + CollaborativeEditingHelper.versionInfoSuffix, roomName,
- roomName + CollaborativeEditingHelper.revisionInfoSuffix,
- roomName + CollaborativeEditingHelper.actionsToRemoveSuffix };
- // Prepare values for the Redis script
- String[] values = { serializedAction, String.valueOf(clientVersion),
- String.valueOf(CollaborativeEditingHelper.saveThreshold) };
-
- …………
- …………
- …………
- // Return the updated action
- return action;
-}
-```
-
-#### Add Web API to get previous operation as a backup to get lost operations
-On the client side, messages send from server using SockJS may be received in a different order, or some operations may be missed due to network issues. In these cases, we need a backup method to retrieve missing records from the Redis.
-Using the following method, we can retrieve all operations after the last successful client-synced version and return all missing operations to the requesting client.
-
-```java
-@PostMapping("/api/collaborativeediting/GetActionsFromServer")
-public String getActionsFromServer(@RequestBody ActionInfo param) throws ClassNotFoundException {
- try (Jedis jedis = RedisSubscriber.getJedis()) {
- // Initialize necessary variables from the parameters and helper class
- int saveThreshold = CollaborativeEditingHelper.saveThreshold;
- String roomName = param.getRoomName();
- int lastSyncedVersion = param.getVersion();
- int clientVersion = param.getVersion();
- // Fetch actions that are effective and pending based on the last synced version
- List actions = GetEffectivePendingVersion(roomName, lastSyncedVersion, jedis);
- List currentAction = new ArrayList<>();
-
- for (ActionInfo action : actions) {
- // Increment the version for each action sequentially
- action.setVersion(++clientVersion);
-
- // Filter actions to only include those that are newer than the client's last
- // known version
- if (action.getVersion() > lastSyncedVersion) {
- // Transform actions that have not been transformed yet
- if (!action.isTransformed()) {
- CollaborativeEditingHandler.transformOperation(action, new ArrayList<>(actions));
- }
- currentAction.add(action);
- }
- }
- // Serialize the filtered and transformed actions to JSON and return
- return gson.toJson(currentAction);
- } catch (Exception ex) {
- ex.printStackTrace();
- // In case of an exception, return an empty JSON object
- return "{}";
- }
-}
-```
-## How to perform Scaling in Collaborative Editing.
-
-### Role of Scaling in Collaborative editing
-As the number of users increases, collaborative application face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources.
-
-During scaling the users may connected to different servers, so collaborative editing application introduces a specific challenge like, updating the edit operations to all the users connected in different serves. To overcome this issue you need to use ``` Redis Cache pub/sub ``` for message relay(syncing the editing operations to the users connected to different server instance)
-
-### Use of Redis Pub/Sub in scaling environment
-Redis offers Pub/Sub functionality. The publish/subscribe (pub/sub) pattern provides asynchronous communication among multiple AWS services without creating interdependency. When a user edits a document, the application can publish the changes to a Redis channel. Clients (in different server instances) subscribed to that channel receive real-time updates, reflecting the changes in their document views.
-
-### Steps to configure Redis in Collaborative Editing Application
-Refer to the below steps to know about the Redis pub/sub implementation to sync the messages.
-
-#### Step 1: Configure Redis in application level to establish the connection.
-
-```java
-//Redis configuration
-spring.datasource.redishost= ""
-spring.datasource.redisport= ""
-```
-#### Step 2: Publish each editing operation to a Redis channel
-
-Publish each editing operation to Redis channel with the room name. This will send notifications to all the users(in different servers) subscribed to that specific channel. Refer to the publishToRedis() method in DocumentEditorHub.Java for details.
-
-```java
-try (Jedis jedis = RedisSubscriber.jedisPool.getResource()) {
-jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload));
- break;
- } catch (JedisConnectionException e) {
- }
-```
-#### Step 3: Subscribe to the specific channel using the Redis cache 'Subscribe'
-
- Redis cache will be initialized and subscribe to the specific channel using the Redis cache 'Subscribe' option. This ensures that users in any server will get notified when an editing operation is published to the Redis cache using the onMessage() API. Refer to the code snippet in RedisSubscriber.Java for details.
-
- ```java
-@PostConstruct
- public void subscribeToInstanceChannel() {
- //Subscriber to `collaborativeediting`
- String channel = "collaborativeedtiting";
- new Thread(() -> {
- JedisPoolConfig poolConfig = new JedisPoolConfig();
- jedisPool = new JedisPool(poolConfig, REDIS_HOST, REDIS_PORT);
- try (Jedis jedis = jedisPool.getResource()) {
- jedis.subscribe(new JedisPubSub() {
- @Override
- public void onMessage(String channel, String message) {
- -------------
- ------
- // Message will be broadcasted to all the users connected to that room using sockjs
- DocumentEditorHub.broadcastToRoom(action.getRoomName(), action, updateActionheaders);
- } catch (JsonProcessingException e) {
- e.printStackTrace();
- }
- }
- @Override
- public void onSubscribe(String channel, int subscribedChannels) {
- System.out.println("Subscribed to channel: " + channel);
- }
- }, channel);
- } catch (JedisConnectionException e) {
- // Handle the connection exception
- System.out.println("Connection failed. Retrying ...");
- }
- }).start();
- }
-```
-
-
-Full version of the code discussed about can be found in below GitHub location.
-
-GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing)
diff --git a/ej2-javascript/document-editor/comments.md b/ej2-javascript/document-editor/comments.md
deleted file mode 100644
index 0e510f6ec..000000000
--- a/ej2-javascript/document-editor/comments.md
+++ /dev/null
@@ -1,323 +0,0 @@
----
-layout: post
-title: Comments in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Comments in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Comments
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Comments in ##Platform_Name## Document editor control
-
-Document Editor allows you to add comments to documents. You can add, navigate and remove comments in code and from the UI.
-
-## Add a new comment
-
-Comments can be inserted to the selected text.
-
-```ts
-//Add new commnt in the document.
-documentEditor.editor.insertComment('Test comment');
-```
-
-## Add a New Comment with Date, Author, and Status
-
-Comments can be inserted into the selected text with a specified date, author, and status [`insertComment`](../api/document-editor/editor/#insertcomment).
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-// In this example, a comment with the text "Hello world"
-// is added by the author Nancy Davolio on July 23, 2024, at 2:30 PM.
-// The isResolved status is set to false.
-
-// Create a specific date: July 23, 2024, at 2:30:00 PM.
-// Note: July is represented by 6 (0-based index).
-let specificDate = new Date(2024, 6, 23, 14, 30, 0);
-
-
-// Define the properties of the comment including author, date, and resolution status.
-let commentProperties: CommentProperties = {
- author: 'Nancy Davolio', // The author of the comment.
- dateTime: specificDate, // The date and time when the comment is created.
- isResolved: false // The status of the comment; false indicates it is unresolved.
-};
-
-// Insert the comment with the specified properties into the document editor.
-documentEditor.editor.insertComment('Hello world', commentProperties);
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-// In this example, a comment with the text "Hello world"
-// is added by the author Nancy Davolio on July 23, 2024, at 2:30 PM.
-// The isResolved status is set to false.
-
-// Create a specific date: July 23, 2024, at 2:30:00 PM.
-// Note: July is represented by 6 (0-based index).
-var specificDate = new Date(2024, 6, 23, 14, 30, 0);
-
-// Define the properties of the comment including author, date, and resolution status.
-var commentProperties = {
- author: 'Nancy Davolio', // The author of the comment.
- dateTime: specificDate, // The date and time when the comment is created.
- isResolved: false // The status of the comment; false indicates it is unresolved.
-};
-
-// Insert the comment with the specified properties into the document editor.
-documentEditor.editor.insertComment('Hello world', commentProperties);
-{% endhighlight %}
-{% endif %}
-
-## Add a Reply Comment with Date, Author, and Status
-
-Reply comments can be inserted into the parent comment with a specified date, author using [`insertReplyComment`](../api/document-editor/editor/#insertreplycomment).
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-// In this example, a comment with the text "Hello world"
-// is added by the author Nancy Davolio on July 23, 2024, at 2:30 PM.
-// The isResolved status is set to false.
-
-// Create a specific date: July 23, 2024, at 2:30:00 PM.
-// Note: July is represented by 6 (0-based index).
-let specificDate = new Date(2024, 6, 23, 14, 30, 0);
-
-// Define the properties of the comment including author, date, and resolution status.
-let commentProperties: CommentProperties = {
- author: 'Nancy Davolio', // The author of the comment.
- dateTime: specificDate, // The date and time when the comment is created.
- isResolved: false // The status of the comment; false indicates it is unresolved.
-};
-
-// Insert the comment with the specified properties into the Document Editor.
-let comment: Comment = documentEditor.editor.insertComment('Hello world', commentProperties);
-// Insert a reply comment with specified properties into the Document Editor
-documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentProperties);
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-// In this example, a comment with the text "Hello world"
-// is added by the author Nancy Davolio on July 23, 2024, at 2:30 PM.
-// The isResolved status is set to false.
-
-// Create a specific date: July 23, 2024, at 2:30:00 PM.
-// Note: July is represented by 6 (0-based index).
-var specificDate = new Date(2024, 6, 23, 14, 30, 0);
-
-// Define the properties of the comment including author, date, and resolution status.
-var commentProperties = {
- author: 'Nancy Davolio', // The author of the comment.
- dateTime: specificDate, // The date and time when the comment is created.
- isResolved: false // The status of the comment; false indicates it is unresolved.
-};
-
-// Insert the comment with the specified properties into the document editor.
-var comment = documentEditor.editor.insertComment('Hello world', commentProperties);
-// Insert a reply comment with specified properties into the Document Editor
-documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentProperties);
-{% endhighlight %}
-{% endif %}
-
-## Get Comments
-
-Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](../api/document-editor/#getComments).
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-//Get Comments in the document along with the properties author, date, status.
-let commentinfo: CommentInfo[] = container.documentEditor.getComments();
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-//Get Comments in the document along with the properties author, date, status.
-var commentInfo = container.documentEditor.getComments();
-{% endhighlight %}
-{% endif %}
-
-
-## Comment navigation
-
-Next and previous comments can be navigated using the below code snippet.
-
-```ts
-//Navigate to next comment
-documentEditor.selection.navigateNextComment();
-
-//Navigate to previous comment
-documentEditor.selection.navigatePreviousComment();
-```
-
-
-## Delete comment
-
-Current comment can be be deleted using [`deleteComment`](../api/document-editor/editor/#deletecomment).
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-//Delete the current selected comment.
-container.documentEditor.editor.deleteComment();
-
-//Get Comments in the document along with the properties author, date, status.
-let commentinfo: CommentInfo[] = container.documentEditor.getComments();
-
-//Delete the particular parent comments and all of its reply comments
-container.documentEditor.editor.deleteComment(commentinfo[0].id);
-
-//Delete the particular reply comment.
-container.documentEditor.editor.deleteComment(commentinfo[0].replies[0].id);
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-//Delete the current selected comment.
-container.documentEditor.editor.deleteComment();
-
-//Get Comments in the document along with the properties author, date, status.
-var commentinfo = container.documentEditor.getComments();
-
-//Delete the particular parent comments and all of its reply comments
-container.documentEditor.editor.deleteComment(commentinfo[0].id);
-
-//Delete the particular reply comment.
-container.documentEditor.editor.deleteComment(commentinfo[0].replies[0].id);
-{% endhighlight %}
-{% endif %}
-
-## Delete all comment
-
-All the comments in the document can be deleted using the below code snippet.
-
-```ts
-//Delete all the comments present in the current document.
-documentEditor.editor.deleteAllComments();
-```
-
-## Protect the document in comments only mode
-
-Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document.
-
-Document editor provides an option to protect and unprotect document using [`enforceProtection`](../api/document-editor/editor/#enforceprotection) and [`stopProtection`](../api/document-editor/editor/#stopprotection) API.
-
-The following example code illustrates how to enforce and stop protection in Document editor container.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl =
- 'http://localhost:5000/api/documenteditor/';
-container.appendTo('#container');
-
-//enforce protection
-container.documentEditor.editor.enforceProtection('123', 'CommentsOnly');
-
-//stop the document protection
-container.documentEditor.editor.stopProtection('123');
-```
-
-Comment only protection can be enabled in UI by using [Restrict Editing pane](../document-editor/document-management#restrict-editing-pane)
-
-
-
->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password.
-
-## Mention Support in comments
-
-Mention support displays a list of items that users can select or tag from the suggested list. To use this feature, type the @ character in the comment box and select or tag the user from the suggestion list.
-
-The following example illustrates how to enable mention support in Document Editor
-
-```ts
-let mentionData: any = [
- { "Name": "Mary Kate", "EmailId": "marry@company.com" },
- { "Name": "Andrew James", "EmailId": "james@company.com" },
- { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
-];
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
-// Enable mention support in document editor
- documentEditorSettings: {
- mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }},
- }
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-## Events
-
-DocumentEditor provides [beforeCommentAction](../api/document-editor-container/#beforecommentaction) event, which is triggered on comment actions like Post, edit, reply, resolve and reopen. This event provides an opportunity to perform custom logic on comment actions like Post, edit, reply, resolve and reopen. The event handler receives the [CommentActionEventArgs](../api/document-editor/commentActionEventArgs) object as an argument, which allows access to information about the comment.
-
-To demonstrate a specific use case, let’s consider an example where we want to restrict the delete functionality based on the author’s name. The following code snippet illustrates how to allow only the author of a comment to delete:
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-
-import { DocumentEditorContainer, Toolbar, CommentActionEventArgs } from '@syncfusion/ej2-documenteditor';
-
-// Inject require modules.
-DocumentEditorContainer.Inject(Toolbar);
-let mentionData: any = [
- { "Name": "Mary Kate", "EmailId": "marry@company.com" },
- { "Name": "Andrew James", "EmailId": "james@company.com" },
- { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
-];
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', beforeCommentAction:beforecomment,
-// Enable mention support in document editor
- documentEditorSettings: {
- mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }},
- }
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-container.currentUser="Guest User";
-
-// Event get triggerd on comment actions like Post, edit, reply, resolve and reopen
-function beforecomment(args : CommentActionEventArgs){
- // Check the type and author of the comment and current user are different
- if(args.type === "Delete" && container.currentUser !== args.author){
- // Cancel the comment action
- args.cancel = true;
- }
-}
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-
-var mentionData = [
- { "Name": "Mary Kate", "EmailId": "marry@company.com" },
- { "Name": "Andrew James", "EmailId": "james@company.com" },
- { "Name": "Andrew Fuller", "EmailId": "andrew@company.com"}
- ];
- // Initialize DocumentEditorContainer component.
- var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px', beforeCommentAction:beforecomment,documentEditorSettings: {
- mentionSettings: { dataSource: mentionData, fields: { text: 'Name' }},
- } });
- ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
- documenteditorContainer.serviceUrl = 'http://localhost:6028/api/documenteditor/';
- //DocumentEditorContainer control rendering starts
- documenteditorContainer.appendTo('#DocumentEditor');
- documenteditorContainer.currentUser = "Guest User";
-
-
- // Event get triggerd on comment actions like Post, edit, reply, resolve and reopen
- function beforecomment(args){
- // Check the type and author of the comment and current user are different
- if(args.type === "Delete" && documenteditorContainer.currentUser !== args.author){
- // Cancel the comment action
- args.cancel = true;
- }
- }
-```
-
-{% endif %}
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
diff --git a/ej2-javascript/document-editor/content-control.md b/ej2-javascript/document-editor/content-control.md
deleted file mode 100644
index 1e1ea4a1e..000000000
--- a/ej2-javascript/document-editor/content-control.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-layout: post
-title: Content control in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Content control in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Content control
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Content control in ##Platform_Name## Document editor control
-
-Document Editor provides support for inserting, editing content controls
-
-Content controls can be categorized based on its occurrence in a document as follows,
-
-InlineContentControl: Among inline content inside, as a child of a paragraph.
-BlockContentControl: Among paragraphs and tables, as a child of a Body, HeaderFooter.
-
-## Types of Content Controls
-
-* Rich Text
-* Plain Text
-* Check Box
-* Date picker
-* Drop-Down List and Combo Box
-* Picture
-
-## Insert content control
-
-Content control can be inserted using [`insertContentControl`](../api/document-editor/editor/#insertContentControl) method in editor module.
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-//Insert Rich Text Content Control
-container.documentEditor.editor.insertContentControl('RichText');
-//Insert Rich Text Content Control with default sfdt string
-let sfdt = {"sections":[{"blocks":[{"inlines":[{"text": "Hello"}]}]}]};
-container.documentEditor.editor.insertContentControl('RichText', sfdt);
-
-//Insert Plain Text Content Control
-container.documentEditor.editor.insertContentControl('Text');
-//Insert Plain Text Content Control with default string
-container.documentEditor.editor.insertContentControl('Text', 'Hello World');
-
-//Insert CheckBox Content Control
-container.documentEditor.editor.insertContentControl('CheckBox');
-//Insert CheckBox Content Control with mention checked state
-container.documentEditor.editor.insertContentControl('CheckBox', true);
-
-//Insert ComboBox Content Control
-container.documentEditor.editor.insertContentControl('ComboBox');
-//Insert ComboBox Content Control with items
-container.documentEditor.editor.insertContentControl('ComboBox', 'One', ['One', 'Two', 'Three']);
-
-//Insert Date Content Control
-container.documentEditor.editor.insertContentControl('Date');
-//Insert Date Content Control
-container.documentEditor.editor.insertContentControl('Date', '01/01/2024');
-
-//Insert DropDownList Content Control
-container.documentEditor.editor.insertContentControl('DropDownList');
-//Insert DropDownList Content Control with items
-container.documentEditor.editor.insertContentControl('DropDownList', 'One', ['One', 'Two', 'Three']);
-
-//Insert Picture Content Control
-container.documentEditor.editor.insertContentControl('Picture');
-//Insert Picture Content Control with default image
-container.documentEditor.editor.insertContentControl('Picture', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADgSURBVEhLY3jx4sV/WuDBafCluXH/D6ydhlWObIMPLmn8/32KPBiD2OjyKAY7+zbDsX945/91azehiBWU9IPVgVwJMxSX4SgG65jXwrGVa+v/6TOXoojBDEZ2LQh/m676/+D+/XBzQJgsg0EY5GqQgSCDsYUz2QaDMCiosIUvCKMYDFKIjK9dvYrCB3kXJIaMkfUjY5JdDEpioCCAYZCFyGbAMFkGI0fcMDUYpAgZY4s8EEYWwxWBJLsYhJHFQIYjmwHDQ9xgkGEwDCp0QAYji8EMRhYjymBq4lGDofjFfwCV5AGEIf9DQQAAAABJRU5ErkJggg==');
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-//Insert Rich Text Content Control
-container.documentEditor.editor.insertContentControl('RichText');
-//Insert Rich Text Content Control with default sfdt string
-var sfdt = {"sections":[{"blocks":[{"inlines":[{"text": "Hello"}]}]}]};
-container.documentEditor.editor.insertContentControl('RichText', sfdt);
-
-//Insert Plain Text Content Control
-container.documentEditor.editor.insertContentControl('Text');
-//Insert Plain Text Content Control with default string
-container.documentEditor.editor.insertContentControl('Text', 'Hello World');
-
-//Insert CheckBox Content Control
-container.documentEditor.editor.insertContentControl('CheckBox');
-//Insert CheckBox Content Control with mention checked state
-container.documentEditor.editor.insertContentControl('CheckBox', true);
-
-//Insert ComboBox Content Control
-container.documentEditor.editor.insertContentControl('ComboBox');
-//Insert ComboBox Content Control with items
-container.documentEditor.editor.insertContentControl('ComboBox', 'One', ['One', 'Two', 'Three']);
-
-//Insert Date Content Control
-container.documentEditor.editor.insertContentControl('Date');
-//Insert Date Content Control
-container.documentEditor.editor.insertContentControl('Date', '01/01/2024');
-
-//Insert DropDownList Content Control
-container.documentEditor.editor.insertContentControl('DropDownList');
-//Insert DropDownList Content Control with items
-container.documentEditor.editor.insertContentControl('DropDownList', 'One', ['One', 'Two', 'Three']);
-
-//Insert Picture Content Control
-container.documentEditor.editor.insertContentControl('Picture');
-//Insert Picture Content Control with default image
-container.documentEditor.editor.insertContentControl('Picture', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADgSURBVEhLY3jx4sV/WuDBafCluXH/D6ydhlWObIMPLmn8/32KPBiD2OjyKAY7+zbDsX945/91azehiBWU9IPVgVwJMxSX4SgG65jXwrGVa+v/6TOXoojBDEZ2LQh/m676/+D+/XBzQJgsg0EY5GqQgSCDsYUz2QaDMCiosIUvCKMYDFKIjK9dvYrCB3kXJIaMkfUjY5JdDEpioCCAYZCFyGbAMFkGI0fcMDUYpAgZY4s8EEYWwxWBJLsYhJHFQIYjmwHDQ9xgkGEwDCp0QAYji8EMRhYjymBq4lGDofjFfwCV5AGEIf9DQQAAAABJRU5ErkJggg==');
-{% endhighlight %}
-{% endif %}
-
-## Import content control properties
-
-Content control properties can be set using the [`ContentControlInfo`](../api/document-editor/#importContentControlData) and import it using [`importContentControlData`](../api/document-editor/#importContentControlData)
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-let data: ContentControlInfo[] = [];
-let contentControlData: ContentControlInfo = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
-data.push(contentControlData);
-container.documentEditor.importContentControlData(data);
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-var data = [];
-var contentControlData = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
-data.push(contentControlData);
-container.documentEditor.importContentControlData(data);
-{% endhighlight %}
-{% endif %}
-
-## Export content control properties
-
-Content control properties can be exported using the [`exportContentControlData`](../api/document-editor/#exportContentControlData)
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-let contentControlInfos: ContentControlInfo[] = container.documentEditor.exportContentControlData();
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-var contentControlInfos = container.documentEditor.exportContentControlData();
-{% endhighlight %}
-{% endif %}
-
-## Reset content control
-
-Content control properties can be reset using the [`resetcontentcontroldata`](../api/document-editor/#resetcontentcontroldata)
-
-{% if page.publishingplatform == "typescript" %}
-{% highlight ts %}
-let data: ContentControlInfo[] = [];
-let contentControlData: ContentControlInfo = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
-data.push(contentControlData);
-container.documentEditor.resetContentControlData(data);
-{% endhighlight %}
-{% elsif page.publishingplatform == "javascript" %}
-{% highlight ts %}
-var data = [];
-var contentControlData = { title: placeHolderPrefix + 'Name', tag: '', value: 'John', canDelete: false, canEdit: false, type: 'RichText' };
-data.push(contentControlData);
-container.documentEditor.resetContentControlData(data);
-{% endhighlight %}
-{% endif %}
-
->Note: Content control with custom XML mapping of file type WordML is converted as normal Rich Text Content Control to provide lossless round-tripping upon saving.
diff --git a/ej2-javascript/document-editor/dialog.md b/ej2-javascript/document-editor/dialog.md
deleted file mode 100644
index 5f9a11d9e..000000000
--- a/ej2-javascript/document-editor/dialog.md
+++ /dev/null
@@ -1,481 +0,0 @@
----
-layout: post
-title: Dialog in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Dialog in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Dialog
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Dialog in ##Platform_Name## Document editor control
-
-Document Editor provides dialog support to major operations such as insert or edit hyperlink, formatting text, paragraph, style, list and table properties.
-
-## Font Dialog
-
-Font dialog allows you to modify all text properties for selected contents at once such as bold, italic, underline, font size, font color, strikethrough, subscript and superscript.
-
-Refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs2" %}
-{% endif %}
-
-## Paragraph dialog
-
-This dialog allows modifying the paragraph formatting for selection at once such as text alignment, indentation, and spacing.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs3" %}
-{% endif %}
-
-## Table dialog
-
-This dialog allows creating and inserting a table at cursor position by specifying the required number of rows and columns.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs4" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs4" %}
-{% endif %}
-
-## Bookmark dialog
-
-This dialog allows you to perform the following operations:
-
-* View all bookmarks.
-* Navigate to a bookmark.
-* Create a bookmark at current selection.
-* Delete an existing bookmark.
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs5/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs5" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs5/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs5/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs5" %}
-{% endif %}
-
-## Hyperlink dialog
-
-This dialog allows editing or inserting a hyperlink at cursor position.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs6/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs6" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs6/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs6/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs6" %}
-{% endif %}
-
-## Table of contents dialog
-
-This dialog allows creating and inserting table of contents at cursor position. If the table of contents already exists at cursor position, you can customize its properties.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs7/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs7" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs7/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs7/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs7" %}
-{% endif %}
-
-## Styles Dialog
-
-This dialog allows managing the styles in a document. It will display all the styles in the document with options to modify the properties of the existing style or create new style with the help of ‘Style dialog’. Refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs8/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs8/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs8" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs8/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs8/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs8" %}
-{% endif %}
-
-## Style dialog
-
-You can directly use this dialog for modifying any existing style or add new style by providing the style name.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs9/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs9/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs9" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs9/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs9/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs9" %}
-{% endif %}
-
-## List dialog
-
-This dialog allows creating a new list or modifying existing lists in the document.
-
-To open this dialog, refer to the following example.
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs10/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs10/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs10" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs10/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs10/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs10" %}
-{% endif %}
-
-## Borders and shading dialog
-
-This dialog allows customizing the border style, border width, and background color of the table or selected cells.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs11/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs11/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs11" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs11/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs11/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs11" %}
-{% endif %}
-
-## Table options dialog
-
-This dialog allows customizing the default cell margins and spacing between each cells of the selected table.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs12/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs12/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs12" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs12/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs12/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs12" %}
-{% endif %}
-
-## Table properties dialog
-
-This dialog allows customizing the table, row, and cell properties of the selected table.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs13/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs13/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs13" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs13/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs13/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs13" %}
-{% endif %}
-
-## Page setup dialog
-
-This dialog allows customizing margins, size, and layout options for pages of the section.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs14/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs14/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs14" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs14/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs14/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs14" %}
-{% endif %}
-
-## Column dialog
-
-This dialog allows the end user to customize the number of columns, column width, and space between columns for the pages in a section.
-
-To open this dialog, refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs15/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs15/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs15" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs15/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs15/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs15" %}
-{% endif %}
-
-## See Also
-
-* [Feature module](../document-editor/feature-module/)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/document-management.md b/ej2-javascript/document-editor/document-management.md
deleted file mode 100644
index 03a205e6f..000000000
--- a/ej2-javascript/document-editor/document-management.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-layout: post
-title: Document management in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Document management in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Document management
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Document management in ##Platform_Name## Document editor control
-
-Document Editor provides support to restrict editing. When the protected document includes range permission, then unique user or user group only authorized to edit separate text area.
-
-## Set current user
-
-You can use the `currentUser` property to authorize the current document user by name, email, or user group name.
-
-The following code shows how to set currentUser
-
-```ts
-documentEditor.currentUser = 'engineer@mycompany.com';
-```
-
-## Customize highlight color of text area
-
-You can highlight the editable region of the current user using the `userColor` property.
-
-The following code shows how to set userColor.
-
-```ts
-documentEditor.userColor = '#fff000';
-```
-
-## Highlighting the editable text area
-
-You can toggle the highlight the editable region value using the "highlightEditableRanges" property.
-
-The folowing code shows how to toggle the highlight editable region value.
-
-```typescript
-documentEditor.documentEditorSettings.highlightEditableRanges = true;
-```
-
-## Restrict Editing Pane
-
-Restrict Editing Pane provides the following options to manage the document:
-* To apply formatting restrictions to the current document, select the allow formatting check box.
-* To apply editing restrictions to the current document, select the read only check box.
-* To add users to the current document, select more users option and add user from the popup dialog.
-* To include range permission to the current document, select parts of the document and choose users who are allowed to freely edit them from the listed check box.
-* To apply the chosen editing restrictions, click the **YES,START ENFORCING PROTECTION** button. A dialog box displays asking for a password to protect.
-* To stop protection, select **STOP PROTECTION** button. A dialog box displays asking for a password to stop protection.
-
-The following code shows Restrict Editing Pane. To unprotect the document, use password '123'.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/data-protection-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/data-protection-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/data-protection-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/data-protection-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/data-protection-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/data-protection-cs1" %}
-{% endif %}
-
-## See Also
-
-* [How to protect the document in form filling mode](../document-editor/form-fields/#protect-the-document-in-form-filling-mode)
-* [How to protect the document in comments only mode](../document-editor/comments/#protect-the-document-in-comments-only-mode)
-* [How to protect the document in track changes only mode](../document-editor/track-changes/#protect-the-document-in-track-changes-only-mode)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/export.md b/ej2-javascript/document-editor/export.md
deleted file mode 100644
index dced7f61c..000000000
--- a/ej2-javascript/document-editor/export.md
+++ /dev/null
@@ -1,346 +0,0 @@
----
-layout: post
-title: Export in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Export in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Export
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Export in ##Platform_Name## Document editor control
-
-Document Editor exports the document into various known file formats in client-side such as Microsoft Word document (.docx), Word template (.dotx), text document (.txt), and its own format called **Syncfusion Document Text (.sfdt)**.
-
-We are providing two types of save APIs as mentioned below.
-
-|API name|Purpose|Code Snippet for Document Editor|Code Snippet for Document Editor Container|
-|--------|---------|----------|----------|
-|save(filename,FormatType):void FormatType: Sfdt or Docx or Txt|Creates the document with specified file name and format type. Then, the created file is downloaded in the client browser by default.|documenteditor.save('sample', 'Docx')|container.documenteditor.save('sample', 'Docx')|
-|saveAsBlob(FormatType):Blob|Creates the document in specified format type and returns the created document as Blob. This blob can be uploaded to your required server, database, or file path.|documenteditor.saveAsBlob('Docx')|container.documenteditor.saveAsBlob('Docx')|
-
-## SFDT export
-
-The following example shows how to export documents in Document Editor as Syncfusion document text (.sfdt).
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs1" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-container-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs1" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-container-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs1" %}
-{% endif %}
-
-## Word export
-
-The following example shows how to export the document as Word document (.docx).
-
->Note: The Syncfusion® Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](../document-editor/import/#why-the-document-pagination-differs-from-microsoft-word)
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs2" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-container-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs2" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-container-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs2" %}
-{% endif %}
-
-## Word Template Export
-
-The following example shows how to export the document as Word Template (.dotx).
-
->Note: The Syncfusion® Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](../document-editor/import/#why-the-document-pagination-differs-from-microsoft-word)
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs4" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-container-cs4/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs4" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs4" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-container-cs4/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs4/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs4" %}
-{% endif %}
-
-## Text export
-
-The following example shows how to export document as text document (.txt).
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs3" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/export-container-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-cs3" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/export-container-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/export-container-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/export-container-cs3" %}
-{% endif %}
-
-## Export as blob
-
-Document Editor also supports API to store the document into a blob. Refer to the following sample to export document into blob in client-side.
-
-```ts
-import { DocumentEditor, FormatType, WordExport, SfdtExport } from '@syncfusion/ej2-documenteditor';
-
-//Inject require modules for Export.
-DocumentEditor.Inject(WordExport, SfdtExport);
-
-let documenteditor: DocumentEditor = new DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true });
-
-documenteditor.appendTo('#DocumentEditor');
-
-documenteditor.open(sfdt);
-
-document.getElementById('export').addEventListener('click', () => {
- //Export the current document as `Blob` object.
- documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
- // The blob can be processed further
- });
-});
-
-```
-
-For instance, to export the document as Rich Text Format file, implement an ASP.NET MVC web API controller using DocIO library by passing the DOCX blob. Refer to the following code example.
-
-```c#
- //API controller for the conversion.
- [HttpPost]
- public HttpResponseMessage ExportAsRtf()
- {
- System.Web.HttpPostedFile data = HttpContext.Current.Request.Files[0];
- //Opens document stream
- WordDocument wordDocument = new WordDocument(data.InputStream);
- MemoryStream stream = new MemoryStream();
- //Converts document stream as RTF
- wordDocument.Save(stream, FormatType.Rtf);
- wordDocument.Close();
- stream.Position = 0;
- return new HttpResponseMessage() { Content = new StreamContent(stream) };
- }
-```
-
-In client-side, you can consume this web service and save the document as Rich Text Format (.rtf) file. Refer to the following example.
-
-```ts
-document.getElementById('export').addEventListener('click', () => {
- //Expor the document as `Blob` object.
- documenteditor.saveAsBlob('Docx').then((exportedDocument: Blob) => {
- // The blob can be processed further
- let formData: FormData = new FormData();
- formData.append('fileName', 'sample.docx');
- formData.append('data', exportedDocument);
- saveAsRtf(formData);
- });
-});
-
-function saveAsRtf(formData: FormData): void {
- //Send the blob object to server to process further.
- let httpRequest: XMLHttpRequest = new XMLHttpRequest();
- httpRequest.open('POST', '/api/DocumentEditor/ExportAsRtf', true);
- httpRequest.onreadystatechange = () => {
- if (httpRequest.readyState === 4) {
- if (httpRequest.status === 200 || httpRequest.status === 304) {
- if (!(!navigator.msSaveBlob)) {
- navigator.msSaveBlob(httpRequest.response, 'sample.rtf');
- } else {
- let downloadLink: HTMLAnchorElement = document.createElementNS('http://www.w3.org/1999/xhtml', 'a') as HTMLAnchorElement;
- download('sample.rtf', 'rtf', httpRequest.response, downloadLink, 'download' in downloadLink);
- }
- } else {
- console.error(httpRequest.response);
- }
- }
- }
- httpRequest.responseType = 'blob';
- httpRequest.send(formData);
-}
-
-//Download the document in client side.
-function download(fileName: string, extension: string, buffer: Blob, downloadLink: HTMLAnchorElement, hasDownloadAttribute: Boolean): void {
- if (hasDownloadAttribute) {
- downloadLink.download = fileName;
- let dataUrl: string = window.URL.createObjectURL(buffer);
- downloadLink.href = dataUrl;
- let event: MouseEvent = document.createEvent('MouseEvent');
- event.initEvent('click', true, true);
- downloadLink.dispatchEvent(event);
- setTimeout((): void => {
- window.URL.revokeObjectURL(dataUrl);
- dataUrl = undefined;
- });
- } else {
- if (extension !== 'docx' && extension !== 'xlsx') {
- let url: string = window.URL.createObjectURL(buffer);
- let isPopupBlocked: Window = window.open(url, '_blank');
- if (!isPopupBlocked) {
- window.location.href = url;
- }
- }
- }
-}
-```
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module/)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/faq/unsupported-file-format.md b/ej2-javascript/document-editor/faq/unsupported-file-format.md
deleted file mode 100644
index 7af31007a..000000000
--- a/ej2-javascript/document-editor/faq/unsupported-file-format.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-layout: post
-title: Unsupported file in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Unsupported file in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Unsupported file
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Why Do I Get the Unsupported Warning Message When Opening a Document?
-
-If you receive an "The file format you have selected isn't supported. Please choose valid format." message when opening a document in the Document Editor, it typically indicates that the document format is not supported by the current version of the Document Editor. Here are some common reasons for this warning:
-1. Unsupported File Format: The document you are trying to open might be in a format that the Document Editor does not support. Ensure you are using a supported format, such as SFDT.
-2. Corrupted Document: The document file might be corrupted or improperly formatted. Try opening a different document to see if the issue persists.
-To avoid this warning, always use the recommended document formats and features supported by the Document Editor.
-
-Document Editor supports the following file formats:
-• Word Document (*.docx)
-• Syncfusion Document Text (*.sfdt)
-• Plain Text (*.txt)
-• Word Template (*.dotx)
-• HyperText Markup Language (*.html)
-• Rich Text Format (*.rtf)
-• Word XML Document(*.xml)
-• Word 97-2003 Template (*.dot)
-• Word 97-2003 Document (*.doc)
-
-By using these supported formats, you can ensure compatibility and avoid unsupported warning messages when opening documents in the Document Editor.
diff --git a/ej2-javascript/document-editor/feature-module.md b/ej2-javascript/document-editor/feature-module.md
deleted file mode 100644
index 7addc3f4e..000000000
--- a/ej2-javascript/document-editor/feature-module.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: post
-title: Feature module in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Feature module in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Feature module
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Feature module in ##Platform_Name## Document editor control
-
-Document Editor features are segregated into individual feature-wise modules to enable selective referencing. By default, the Document Editor displays the document in read-only mode. The required modules should be injected to extend its functionality. The following are the selective modules of Document Editor that can be included as required:
-* **Print** - Prints the document.
-* **SfdtExport** - Exports the document as Syncfusion Document Text (.SFDT) file.
-* **Selection** - Selects a portion of the document and copy it to the clipboard.
-* **Search** - Searches specific text and navigate between the results.
-* **WordExport** - Exports the document as Word Document (.DOCX) file.
-* **TextExport** - Exports the document as Text Document (.TXT) file.
-* **Editor** - Performs all kind of editing operations.
-* **EditorHistory** - Maintains the history of editing operations so that you can perform undo and redo at any time.
-* User interface options such as context menu, options pane, image resizer, and dialog are available as individual modules.
-
->In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a Document Editor instance.
-Refer to the following table.
-
-| Module | Dependent modules to be injected for extending the functionality of Document Editor in your application | Property to enable the functionality for a Document Editor instance |
-|---|---|---|
-|Print|`DocumentEditor.Inject(Print)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enablePrint: true });`|
-|SfdtExport|`DocumentEditor.Inject(SfdtExport)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enableSfdtExport: true });`|
-|Selection|`DocumentEditor.Inject(Selection)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enableSelection: true });`|
-|Search|`DocumentEditor.Inject(Selection, Search)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enableSearch: true });`|
-|WordExport|`DocumentEditor.Inject(SfdtExport, WordExport)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enableWordExport: true });`|
-|TextExport|`DocumentEditor.Inject(SfdtExport, TextExport)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enableTextExport: true });`|
-|Editor|`DocumentEditor.Inject(Selection, Editor)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true });`|
-|EditorHistory|`DocumentEditor.Inject(Selection, Editor, EditorHistory)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableEditorHistory: true });`|
-|OptionsPane(Find)|`DocumentEditor.Inject(Selection, Search, OptionsPane)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enableSearch: true, enableOptionsPane: true });`|
-|OptionsPane(Find and Replace)|`DocumentEditor.Inject(Selection, Search, Editor, OptionsPane)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableSearch: true, enableOptionsPane: true });`|
-|ContextMenu|`DocumentEditor.Inject(Selection, ContextMenu)`|`let documenteditor: DocumentEditor = new DocumentEditor({ enableSelection: true, enableContextMenu: true });`|
-|ImageResizer|`DocumentEditor.Inject(Selection, Editor, ImageResizer)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableImageResizer: true });`|
-|HyperlinkDialog|`DocumentEditor.Inject(Selection, Editor, HyperlinkDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableHyperlinkDialog: true });`|
-|TableDialog|`DocumentEditor.Inject(Selection, Editor, TableDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableTableDialog: true });`|
-|FontDialog|`DocumentEditor.Inject(Selection, Editor, FontDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableFontDialog: true });`|
-|ParagraphDialog|`DocumentEditor.Inject(Selection, Editor, ParagraphDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableParagraphDialog: true });`|
-|BookmarkDialog|`DocumentEditor.Inject(Selection, Editor, BookmarkDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableBookmarkDialog: true });`|
-|PageSetupDialog|`DocumentEditor.Inject(Selection, Editor, PageSetupDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enablePageSetupDialog: true });`|
-|TableOfContentsDialog|`DocumentEditor.Inject(Selection, Editor, TableOfContentsDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableTableOfContentsDialog: true });`|
-|ListDialog|`DocumentEditor.Inject(Selection, Editor, ListDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableListDialog: true });`|
-|TablePropertiesDialog|`DocumentEditor.Inject(Selection, Editor, TablePropertiesDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableTablePropertiesDialog: true });`|
-|CellOptionsDialog|`DocumentEditor.Inject(Selection, Editor, CellOptionsDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableTablePropertiesDialog: true });`|
-|BordersAndShadingDialog|`DocumentEditor.Inject(Selection, Editor, BordersAndShadingDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableBordersAndShadingDialog: true });`|
-|TableOptionsDialog|`DocumentEditor.Inject(Selection, Editor, TableOptionsDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableTableOptionsDialog: true });`|
-|StylesDialog|`DocumentEditor.Inject(Selection, Editor, StylesDialog,StyleDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableStyleDialog: true ,enableStylesDialog: true });`|
-|StyleDialog|`DocumentEditor.Inject(Selection, Editor, StyleDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableStyleDialog: true });`|
-|BulletsAndNumberingDialog|`DocumentEditor.Inject(Selection, Editor, BulletsAndNumberingDialog)`|`let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, enableEditor: true, enableStyleDialog: true });`|
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/fields.md b/ej2-javascript/document-editor/fields.md
deleted file mode 100644
index 1e134d570..000000000
--- a/ej2-javascript/document-editor/fields.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-layout: post
-title: Fields in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Fields in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Fields
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Fields in ##Platform_Name## Document editor control
-
-Document Editor has preservation support for all types of fields in an existing word document without any data loss.
-
-## Adding Fields
-
-You can add a field to the document by using [`insertField`](../api/document-editor/editor/#insertfield) method in [`Editor`](../api/document-editor/editor/) module.
-
-The following example code illustrates how to insert merge field programmatically by providing the field code and field result.
-
-```ts
-
-let fieldCode: string = 'MERGEFIELD First Name \\* MERGEFORMAT ';
-let fieldResult: string = '«First Name»';
-documenteditor.editor.insertField(fieldCode, fieldResult);
-
-```
-
->Note: Document editor does not validate/process the field code/field result. it simply inserts the field with specified field information.
-
-## Update fields
-
-Document Editor provides support for updating bookmark cross reference field. The following example code illustrates how to update bookmark cross reference field.
-
-```ts
-//Update all the bookmark cross reference field in the document.
-documentEditor.updateFields();
-```
-
-Bookmark cross reference fields can be updated through UI by using update fields option in `Toolbar`.
-
-
-
-The following type of fields are automatically updated in Document Editor.
-
-* NUMPAGES
-* SECTION
-* PAGE
-
-## Get field info
-
-You can get field code and field result of the current selected field by using [`getFieldInfo`](../api/document-editor/selection/#getfieldinfo) method in the [`Selection`](../api/document-editor/selection/) module.
-
-```ts
-//Gets the field information of the selected field.
-let fieldInfo: FieldInfo = documentEditor.selection.getFieldInfo();
-```
-
->Note: For nested fields, this method returns combined field code and result.
-
-## Set field info
-
-You can modify the field code and field result of the current selected field by using [`setFieldInfo`](../api/document-editor/editor/#setfieldinfo) method in the [`Editor`](../api/document-editor/editor/) module.
-
-```ts
-//Gets the field information for the selected field.
-let fieldInfo: FieldInfo = documentEditor.selection.getFieldInfo();
-
-//Modify field code
-fieldInfo.code = 'MERGEFIELD First Name \\* MERGEFORMAT ';
-
-//Modify field result
-fieldInfo.result = '«First Name»';
-
-//Modify field code and result of the current selected field.
-documentEditor.editor.setFieldInfo(fieldInfo);
-```
-
->Note: For nested field, entire field gets replaced completely with the specified field information.
-
-## See Also
-
-* [Mail merge using DocIO](https://help.syncfusion.com/file-formats/docio/working-with-mail-merge)
-* [Mail merge demo](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/blob/master/ASP.NET%20Core/src/Controllers/DocumentEditorController.cs#L114)
-* You can refer to the [Microsoft support article to know more about the list of fields supported in Microsoft Word and its field codes](https://support.microsoft.com/en-us/office/list-of-field-codes-in-word-1ad6d91a-55a7-4a8d-b535-cf7888659a51)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/find-and-replace.md b/ej2-javascript/document-editor/find-and-replace.md
deleted file mode 100644
index 59830c18a..000000000
--- a/ej2-javascript/document-editor/find-and-replace.md
+++ /dev/null
@@ -1,177 +0,0 @@
----
-layout: post
-title: Find and replace in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Find and replace in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Find and replace
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Find and replace in ##Platform_Name## Document editor control
-
-The Document Editor component searches a portion of text in the document through a built-in interface called `OptionsPane` or rich APIs. When used in combination with selection performs various operations on the search results like replacing it with some other text, highlighting it, making it bolder, and more.
-
-## Options pane
-
-This provides the options to search for a portion of text in the document. After search operation is completed, the search results will be displayed in a list and options to navigate between them. The current occurrence of matched text or all occurrences with another text can be replaced by switching to `Replace` tab. This pane is opened using the keyboard shortcut `CTRL+F`. You can also open it programmatically using the following sample code.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/find-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/find-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/find-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/find-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/find-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/find-cs1" %}
-{% endif %}
-
-You can close the options pane by pressing `Esc` key.
-
-## Search
-
-The [`Search`](../api/document-editor/search/) module of Document Editor exposes the following APIs:
-
-|API Name|Type |Description|
-|---|---|---|
-|[`findAll()`](../api/document-editor/search/#findall)| Method |Searches for specified text in the whole document and highlights it with yellow.|
-|[`searchResults`](../api/document-editor/search/#searchresults) |Property |This is an instance of [`SearchResults`](../api/document-editor/searchResults/).|
-|[`find()`](../api/document-editor/search/#find) | Method |Find immediate occurrence of specified text from cursor position in the document and highlights it with yellow.|
-
-### Find the immediate occurrence in the document
-
-Using [`find()`](../api/document-editor/search/#find) method, you can find the immediate occurrence of specified text from current cursor position in the document.
-
-The following example code illustrates how to use find in Document editor.
-
-```ts
-documenteditor.search.find('Some text', 'None');
-```
-
->Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
-
-### Find all the occurrences in the document
-
-Using [`findAll()`](../api/document-editor/search/#findall) method, you can find all the occurrences of specified text in the whole document and highlight it with yellow.
-
-The following example code illustrates how to find All the text in the document.
-
-```ts
-documenteditor.search.findAll('Some text', 'None');
-```
-
->Note: Second parameter is optional parameter and it denotes find Options. Possible values of find options are `'None' |'WholeWord' |'CaseSensitive'| 'CaseSensitiveWholeWord'`.
-
-## Search results
-
-The [`SearchResults`](../api/document-editor/searchResults/) class provides information about the search results after a search operation is completed that can be identified using the [`searchResultsChange`](../api/document-editor#searchresultschange) event. This will expose the following APIs:
-
-|API Name|Type |Description|
-|---|---|---|
-|[`length`](../api/document-editor/searchResults/#length)|Property|Returns the total number of results found on the search.|
-|[`index`](../api/document-editor/searchResults/#index)|Property|Returns the index of selected search result. You can change the value for this property to move the selection.|
-|[`replaceAll()`](../api/document-editor/searchResults/#replaceall)|Method|Replaces all the occurrences with specified text.|
-|[`clear()`](../api/document-editor/searchResults/#clear)|Method|Clears the search result.|
-
-### Replace all the occurrences
-
-Using [`replaceAll`](../api/document-editor/searchResults/#replaceall), you can replace all the occurrences with specified text.
-
-The following example code illustrates how to use replace All in Document editor.
-
-```ts
-documentEditor.search.findAll('Some text');
-// Replace all the searched text with word 'Mike'
-documentEditor.search.searchResults.replaceAll("Mike");
-```
-
-### Replace
-
-Using [`insertText`](../api/document-editor/editor/#inserttext), you can replace the current searched text with specified text and it replace single occurrence.
-
->Note: This [`insertText`](../api/document-editor/editor/#inserttext) API accepts following control characters
->* New line characters ("\r", "\r\n", "\n") - Inserts a new paragraph and appends the remaining text to the new paragraph.
->* Line break character ("\v") - Moves the remaining text to start in new line.
->* Tab character ("\t") - Allocates a tab space and continue the next character.
-
-The following example code illustrates how to find a text in the document and replace each occurrence of the text one by one programmatically.
-
-```ts
-container.documentEditor.search.findAll('works');
-
-let searchLength: number = container.documentEditor.search.searchResults.length;
-
-for (let i = 0; i < searchLength; i++) {
- // It will move selection to specific searched index,move to each occurrence one by one
- container.documentEditor.search.searchResults.index = i;
- // Replace it with some text
- container.documentEditor.editor.insertText('Hello');
-}
-
-container.documentEditor.search.searchResults.clear();
-```
-
-## SearchResultsChange event
-
-[`DocumentEditor`](../api/document-editor/) exposes the [`searchResultsChange`](../api/document-editor#searchresultschange) event that will be triggered whenever search results are changed. Consider the following scenarios:
-
-* A search operation is completed with some results.
-* The results are replaced with some other text, since it will be cleared automatically.
-* The results are cleared explicitly.
-
-Refer to the following code example.
-
-```ts
-documenteditor.searchResultsChange = function() {
-
-};
-```
-
-## Customize find and replace
-
-Using the exposed APIs, you can customize the find and replace functionality in your application. Refer to the following sample code.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/replace-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/replace-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/replace-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/replace-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/replace-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/replace-cs1" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/form-fields.md b/ej2-javascript/document-editor/form-fields.md
deleted file mode 100644
index 6ce515610..000000000
--- a/ej2-javascript/document-editor/form-fields.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-layout: post
-title: Form fields in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Form fields in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Form fields
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Form fields in ##Platform_Name## Document editor control
-
-DocumentEditorContainer component provide support for inserting Text, CheckBox, DropDown form fields through in-built toolbar.
-
-
-
-## Insert form field
-
-Form fields can be inserted using [`insertFormField`](../api/document-editor/editor/#insertformfield) method in editor module.
-
-```ts
-//Insert Text form field
-documentEditor.editor.insertFormField('Text');
-//Insert Checkbox form field
-documentEditor.editor.insertFormField('CheckBox');
-//Insert Drop down form field
-documentEditor.editor.insertFormField('DropDown');
-```
-
-## Get form field names
-
-All the form fields names form current document can be retrieved using [`getFormFieldNames()`](../api/document-editor/#getformfieldnames).
-
-```ts
-let formFieldsNames: string[] = documentEditor.getFormFieldNames();
-```
-
-## Get form field properties
-
-Form field properties can be retrieved using [`getFormFieldInfo()`](../api/document-editor/#getformfieldinfo).
-
-```ts
-//Get Text form field by using bookmark name.
-let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
-//Checkbox form field by using bookmark name.
-let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
-//Dropdown form field by using bookmark name.
-let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
-```
-
-## Set form field properties
-
-Form field properties can be modified using [`setFormFieldInfo`](../api/document-editor/#setformfieldinfo).
-
-```ts
-// Set text form field properties
-let textfieldInfo: TextFormFieldInfo = documentEditor.getFormFieldInfo('Text1') as TextFormFieldInfo;
-textfieldInfo.defaultValue = "Hello";
-textfieldInfo.format = "Uppercase";
-textfieldInfo.type = "Text";
-textfieldInfo.name = "Text2";
-documentEditor.setFormFieldInfo('Text1', textfieldInfo);
-
-// Set checkbox form field properties
-let checkboxfieldInfo: CheckBoxFormFieldInfo = documentEditor.getFormFieldInfo('Check1') as CheckBoxFormFieldInfo;
-checkboxfieldInfo.defaultValue = true;
-checkboxfieldInfo.name = "Check2";
-documentEditor.setFormFieldInfo('Check1', checkboxfieldInfo);
-
-// Set checkbox form field properties
-let dropdownfieldInfo: DropDownFormFieldInfo = documentEditor.getFormFieldInfo('Drop1') as DropDownFormFieldInfo;
-dropdownfieldInfo.dropdownItems = ['One', 'Two', 'Three']
-dropdownfieldInfo.name = "Drop2";
-documentEditor.setFormFieldInfo('Drop1', dropdownfieldInfo);
-```
-
->Note:If a form field already exists in the document with the new name specified, the old form field name property will be cleared and it will not be accessible. Ensure the new name is unique.
-
-## Form Field Shading
-
-You can customize form field shading at the application level using the [`formFieldSettings`](../api/document-editor/#formFieldSettings) property.
-
-The example code below demonstrates how to set a custom shading color and how to disable shading (by default, shading is enabled).
-
-```ts
-// Set a custom shading color (for example, white)
-container.documentEditorSettings.formFieldSettings.shadingColor = '#ffffff';
-
-// Disable form field shading entirely
-container.documentEditorSettings.formFieldSettings.applyShading = false;
-```
-
-N> This customization only affects the application UI and will not be preserved when exporting the document.
-
-## Export form field data
-
-Data of the all the Form fields in the document can be exported using [`exportFormData`](../api/document-editor/#exportformdata).
-
-```ts
-let formFieldDate: FormFieldData[] = documentEditor.exportFormData();
-```
-
-## Import form field data
-
-Form fields can be prefilled with data using [`importFormData`](../api/document-editor/#importformdata).
-
-```ts
-let textformField: FormFieldData = { fieldName: 'Text1', value: 'Hello World' };
-let checkformField: FormFieldData = { fieldName: 'Check1', value: true };
-let dropdownformField: FormFieldData = { fieldName: 'Drop1', value: 1 };
-//Import form field data
-this.container.documentEditor.importFormData([textformField, checkformField, dropdownformField]);
-```
-
-## Reset form fields
-
-Reset all the form fields in current document to default value using [`resetFormFields`](../api/document-editor/#resetformfields).
-
-```ts
-documentEditor.resetFormFields();
-```
-
-## Protect the document in form filling mode
-
-Document Editor provides support for protecting the document with `FormFieldsOnly` protection. In this protection, user can only fill form fields in the document.
-
-Document editor provides an option to protect and unprotect document using [`enforceProtection`](../api/document-editor/editor/#enforceprotection) and [`stopProtection`](../api/document-editor/editor/#stopprotection) API.
-
-The following example code illustrates how to enforce and stop protection in Document editor container.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl =
- 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-
-//enforce protection
-container.documentEditor.editor.enforceProtection('123', 'FormFieldsOnly');
-
-//stop the document protection
-container.documentEditor.editor.stopProtection('123');
-```
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/global-local.md b/ej2-javascript/document-editor/global-local.md
deleted file mode 100644
index 6692df114..000000000
--- a/ej2-javascript/document-editor/global-local.md
+++ /dev/null
@@ -1,528 +0,0 @@
----
-layout: post
-title: Global local in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Global local in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Global local
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Global local in ##Platform_Name## Document editor control
-
-## Localization
-
-The [`Localization`](../api/base/l10n/) library allows you to localize default text content of the DocumentEditor. The Document Editor component has static text on some features (like find & replace, context-menu, dialogs) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object. Please refer the sample link [RTL](https://ej2.syncfusion.com/demos/document-editor/right-to-left/)
-
-Note: Please refer the [Locale](https://github.com/syncfusion/ej2-locale/tree/master/src).
-
-## Document Editor
-
-The following list of properties and its values are used in the Document Editor.
-
-Locale keywords |Text
------|-----
-Table | Table
-Row | Row
-Cell | Cell
-Ok | OK
-Cancel | Cancel
-Size | Size
-Preferred Width | Preferred width
-Points | Points
-Percent | Percent
-Measure in | Measure in
-Alignment | Alignment
-Left | Left
-Center | Center
-Right | Right
-Justify | Justify
-Indent from left | Indent from left
-Borders and Shading | Borders and Shading
-Options | Options
-Specify height | Specify height
-At least | At least
-Exactly | Exactly
-Row height is | Row height is
-Allow row to break across pages | Allow row to break across pages
-Repeat as header row at the top of each page | Repeat as header row at the top of each page
-Vertical alignment | Vertical alignment
-Top | Top
-Bottom | Bottom
-Default cell margins | Default cell margins
-Default cell spacing | Default cell spacing
-Allow spacing between cells | Allow spacing between cells
-Cell margins | Cell margins
-Same as the whole table | Same as the whole table
-Borders | Borders
-None | None
-Style | Style
-Width | Width
-Height | Height
-Letter | Letter
-Tabloid | Tabloid
-Legal | Legal
-Statement | Statement
-Executive | Executive
-A3 | A3
-A4 | A4
-A5 | A5
-B4 | B4
-B5 | B5
-Custom Size | Custom size
-Different odd and even | Different odd and even
-Different first page | Different first page
-From edge | From edge
-Header | Header
-Footer | Footer
-Margin | Margins
-Paper | Paper
-Layout | Layout
-Orientation | Orientation
-Landscape | Landscape
-Portrait | Portrait
-Show page numbers | Show page numbers
-Right align page numbers | Right align page numbers
-Nothing | Nothing
-Tab leader | Tab leader
-Show levels | Show levels
-Use hyperlinks instead of page numbers | Use hyperlinks instead of page numbers
-Build table of contents from | Build table of contents from
-Styles | Styles
-Available styles | Available styles
-TOC level | TOC level
-Heading | Heading
-Heading 1 | Heading 1
-Heading 2 | Heading 2
-Heading 3 | Heading 3
-Heading 4 | Heading 4
-Heading 5 | Heading 5
-Heading 6 | Heading 6
-List Paragraph | List Paragraph
-Normal | Normal
-Outline levels | Outline levels
-Table entry fields | Table entry fields
-Modify | Modify
-Color | Color
-Setting | Setting
-Box | Box
-All | All
-Custom | Custom
-Preview | Preview
-Shading | Shading
-Fill | Fill
-Apply To | Apply to
-Table Properties | Table Properties
-Cell Options | Cell Options
-Table Options | Table Options
-Insert Table | Insert Table
-Number of columns | Number of columns
-Number of rows | Number of rows
-Text to display | Text to display
-Address | Address
-Insert Hyperlink | Insert Hyperlink
-Edit Hyperlink | Edit Hyperlink
-Insert | Insert
-General | General
-Indentation | Indentation
-Before text | Before text
-Special | Special
-First line | First line
-Hanging | Hanging
-After text | After text
-By | By
-Before | Before
-Line Spacing | Line spacing
-After | After
-At | At
-Multiple | Multiple
-Spacing | Spacing
-Define new Multilevel list | Define new Multilevel list
-List level | List level
-Choose level to modify | Choose level to modify
-Level | Level
-Number format | Number format
-Number style for this level | Number style for this level
-Enter formatting for number | Enter formatting for number
-Start at | Start at
-Restart list after | Restart list after
-Position | Position
-Text indent at | Text indent at
-Aligned at | Aligned at
-Follow number with | Follow number with
-Tab character | Tab character
-Space | Space
-Arabic | Arabic
-UpRoman | UpRoman
-LowRoman | LowRoman
-UpLetter | UpLetter
-LowLetter | LowLetter
-Number | Number
-Leading zero | Leading zero
-Bullet | Bullet
-Ordinal | Ordinal
-Ordinal Text | Ordinal Text
-For East | For East
-No Restart | No Restart
-Font | Font
-Font style | Font style
-Underline style | Underline style
-Font color | Font color
-Effects | Effects
-Strikethrough | Strikethrough
-Superscript | Superscript
-Subscript | Subscript
-Double strikethrough | Double strikethrough
-Regular | Regular
-Bold | Bold
-Italic | Italic
-Cut | Cut
-Copy | Copy
-Paste | Paste
-Hyperlink | Hyperlink
-Open Hyperlink | Open Hyperlink
-Copy Hyperlink | Copy Hyperlink
-Remove Hyperlink | Remove Hyperlink
-Paragraph | Paragraph
-Linked Style | Linked(Paragraph and Character)
-Character | Character
-Merge Cells | Merge Cells
-Insert Above | Insert Above
-Insert Below | Insert Below
-Insert Left | Insert Left
-Insert Right | Insert Right
-Delete | Delete
-Delete Table | Delete Table
-Delete Row | Delete Row
-Delete Column | Delete Column
-File Name | File Name
-Format Type | Format Type
-Save | Save
-Navigation | Navigation
-Results | Results
-Replace | Replace
-Replace All | Replace All
-We replaced all | We replaced all
-Find | Find
-No matches | No matches
-All Done | All Done
-Result | Result
-of | of
-instances | instances
-with | with
-Click to follow link | Click to follow link
-Continue Numbering | Continue Numbering
-Bookmark name | Bookmark name
-Close | Close
-Restart At | Restart At
-Properties | Properties
-Name | Name
-Style type | Style type
-Style based on | Style based on
-Style for following paragraph | Style for following paragraph
-Formatting | Formatting
-Numbering and Bullets | Numbering and Bullets
-Numbering | Numbering
-Update Field | Update Field
-Edit Field | Edit Field
-Bookmark | Bookmark
-Page Setup | Page Setup
-No bookmarks found | No bookmarks found
-Number format tooltip information | Single-level number format: [PREFIX]%[LEVELNUMBER][SUFFIX] For example, 'Chapter %1.' will display numbering likeChapter 1. ItemChapter 2. Item… Chapter N. Item Multilevel number format:[PREFIX]%[LEVELNUMBER][SUFFIX]+[PREFIX]%[LEVELNUMBER][SUFFIX]For example, '%1.%2.' will display numbering like1.1. Item1.2. Item…1.N. Item
-Format | Format
-Create New Style | Create New Style
-Modify Style | Modify Style
-New | New
-Bullets | Bullets
-Use bookmarks | Use bookmarks
-Table of Contents | Table of Contents
-AutoFit | AutoFit
-AutoFit to Contents | AutoFit to Contents
-AutoFit to Window | AutoFit to Window
-Fixed Column Width | Fixed Column Width
-Reset | Reset
-Match case | Match case
-Whole words | Whole words
-Add | Add
-Go To | Go To
-Search for | Search for
-Replace with | Replace with
-TOC 1 | TOC 1
-TOC 2 | TOC 2
-TOC 3 | TOC 3
-TOC 4 | TOC 4
-TOC 5 | TOC 5
-TOC 6 | TOC 6
-TOC 7 | TOC 7
-TOC 8 | TOC 8
-TOC 9 | TOC 9
-Right-to-left | Right-to-left
-Left-to-right | Left-to-right
-Direction | Direction
-Table direction | Table direction
-Indent from right | Indent from right
-Contextual Spacing | Don't add space between the paragraphs of the same styles
-Password Mismatch | The password don't match
-Restrict Editing | Restrict Editing
-Formatting restrictions | Formatting restrictions
-Allow formatting | Allow formatting
-Editing restrictions | Editing restrictions
-Read only | Read only
-Exceptions Optional | Exceptions (optional)
-Select Part Of Document And User | Select parts of the document and choose users who are allowed to freely edit them.
-Everyone | Everyone
-More users | More users
-Add Users | Add Users
-Enforcing Protection | Yes, Start Enforcing Protection
-Start Enforcing Protection | Start Enforcing Protection
-Enter User | Enter User
-Users | Users
-Enter new password | Enter new password
-Reenter new password to confirm | Reenter new password to confirm
-Your permissions | Your permissions
-Protected Document | This document is protected from unintentional editing. You may edit in this region.
-FormFieldsOnly | This document is protected from unintentional editing. You may only fill in forms in this region.
-You may format text only with certain styles | You may format text only with certain styles.
-Stop Protection | Stop Protection
-Password | Password
-Spelling Editor | Spelling Editor
-Spelling | Spelling
-Spell Check | Spell Check
-Underline errors | Underline errors
-Ignore | Ignore
-Ignore all | Ignore All
-Add to Dictionary | Add to Dictionary
-Change | Change
-Change All | Change All
-Suggestions | Suggestions
-The password is incorrect | The password is incorrect
-Error in establishing connection with web server | Error in establishing connection with web server
-Highlight the regions I can edit | Highlight the regions I can edit
-Show All Regions I Can Edit | Show All Regions I Can Edit
-Find Next Region I Can Edit | Find Next Region I Can Edit
-Keep source formatting | Keep source formatting
-Match destination formatting | Match destination formatting
-Text only | Text only
-Comments | Comments
-Type your comment | Type your comment
-Post | Post
-Reply | Reply
-New Comment | New Comment
-Edit | Edit
-Resolve | Resolve
-Reopen | Reopen
-No comments in this document | No comments in this document
-more | more
-Type your comment here | Type your comment here
-Next Comment | Next Comment
-Previous Comment | Previous Comment
-Un-posted comments | Un-posted comments
-Discard Comment | Added comments not posted. If you continue, that comment will be discarded.
-No Headings | No Heading Found!
-Add Headings | This document has no headings. Please add headings and try again.
-More Options | More Options
-Click to see this comment | Click to see this comment
-Drop Down Form Field | Drop Down Form Field
-Drop-down items | Drop-down items
-Items in drop-down list | Items in drop-down list
-ADD | ADD
-REMOVE | REMOVE
-Field settings | Field settings
-Tooltip | Tooltip
-Drop-down enabled | Drop-down enabled
-Check Box Form Field | Check Box Form Field
-Check box size | Check box size
-Auto | Auto
-Default value | Default value
-Not checked | Not checked
-Checked | Checked
-Check box enabled | Check box enabled
-Text Form Field | Text Form Field
-Type | Type
-Default text | Default text
-Maximum length | Maximum length
-Text format | Text format
-Fill-in enabled | Fill-in enabled
-Default number | Default number
-Default date | Default date
-Date format | Date format
-Merge Track | This action wont be marked as change. Do you want to continue?
-UnTrack | Cannot be tracked
-Accept | Accept
-Reject | Reject
-Previous Changes | Previous Changes
-Next Changes | Next Changes
-Inserted | Inserted
-Deleted | Deleted
-Changes | Changes
-Accept all | Accept all
-Reject all | Reject all
-No changes | No changes
-Accept Changes | Accept Changes
-Reject Changes | Reject Changes
-User | User
-View | View
-
-## Document Editor Container
-
-The following list of properties and its values are used in the Document Editor container.
-
-Locale keywords |Text
------|-----
-New | New
-Open | Open
-Undo | Undo
-Redo | Redo
-Image | Image
-Table | Table
-Link | Link
-Bookmark | Bookmark
-Table of Contents | Table of Contents
-HEADING - - - - 1 | HEADING - - - - 1
-HEADING - - - - 2 | HEADING - - - - 2
-HEADING - - - - 3 | HEADING - - - - 3
-Header | Header
-Footer | Footer
-Page Setup | Page Setup
-Page Number | Page Number
-Break | Break
-Find | Find
-Local Clipboard | Local Clipboard
-Restrict Editing | Restrict Editing
-Upload from computer | Upload from computer
-By URL | By URL
-Page Break | Page Break
-Section Break | Section Break
-Header And Footer | Header & Footer
-Options | Options
-Levels | Levels
-Different First Page | Different First Page
-Different header and footer for odd and even pages | Different header and footer for odd and even pages.
-Different Odd And Even Pages | Different Odd & Even Pages
-Different header and footer for first page | Different header and footer for first page.
-Position | Position
-Header from Top | Header from Top
-Footer from Bottom | Footer from Bottom
-Distance from top of the page to top of the header | Distance from top of the page to top of the header.
-Distance from bottom of the page to bottom of the footer | Distance from bottom of the page to bottom of the footer.
-Aspect ratio | Aspect ratio
-W | W
-H | H
-Width | Width
-Height | Height
-Text | Text
-Paragraph | Paragraph
-Fill | Fill
-Fill color | Fill color
-Border Style | Border Style
-Outside borders | Outside borders
-All borders | All borders
-Inside borders | Inside borders
-Left border | Left border
-Inside vertical border | Inside vertical border
-Right border | Right border
-Top border | Top border
-Inside horizontal border | Inside horizontal border
-Bottom border | Bottom border
-Border color | Border color
-Border width | Border width
-Cell | Cell
-Merge cells | Merge cells
-Insert Or Delete | Insert / Delete
-Insert columns to the left | Insert columns to the left
-Insert columns to the right | Insert columns to the right
-Insert rows above | Insert rows above
-Insert rows below | Insert rows below
-Delete rows | Delete rows
-Delete columns | Delete columns
-Cell Margin | Cell Margin
-Top | Top
-Bottom | Bottom
-Left | Left
-Right | Right
-Align Text | Align Text
-Align top | Align top
-Align bottom | Align bottom
-Align center | Align center
-Number of heading or outline levels to be shown in table of contents | Number of heading or outline levels to be shown in table of contents.
-Show page numbers | Show page numbers
-Show page numbers in table of contents | Show page numbers in table of contents.
-Right align page numbers | Right align page numbers
-Right align page numbers in table of contents | Right align page numbers in table of contents.
-Use hyperlinks | Use hyperlinks
-Use hyperlinks instead of page numbers | Use hyperlinks instead of page numbers.
-Font | Font
-Font Size | Font Size
-Font color | Font color
-Text highlight color | Text highlight color
-Clear all formatting | Clear all formatting
-Bold Tooltip | Bold (Ctrl+B)
-Italic Tooltip | Italic (Ctrl+I)
-Underline Tooltip | Underline (Ctrl+U)
-Strikethrough | Strikethrough
-Superscript Tooltip | Superscript (Ctrl+Shift++)
-Subscript Tooltip | Subscript (Ctrl+=)
-Align left Tooltip | Align left (Ctrl+L)
-Center Tooltip | Center (Ctrl+E)
-Align right Tooltip | Align right (Ctrl+R)
-Justify Tooltip | Justify (Ctrl+J)
-Decrease indent | Decrease indent
-Increase indent | Increase indent
-Line spacing | Line spacing
-Bullets | Bullets
-Numbering | Numbering
-Styles | Styles
-Manage Styles | Manage Styles
-Page | Page
-of | of
-Fit one page | Fit one page
-Spell Check | Spell Check
-Underline errors | Underline errors
-Fit page width | Fit page width
-Update | Update
-Cancel | Cancel
-Insert | Insert
-No Border | No Border
-Create a new document | Create a new document.
-Open a document | Open a document.
-Undo Tooltip | Undo the last operation (Ctrl+Z).
-Redo Tooltip | Redo the last operation (Ctrl+Y).
-Insert inline picture from a file | Insert inline picture from a file.
-Insert a table into the document | Insert a table into the document
-Create Hyperlink | Create a link in your document for quick access to web pages and files (Ctrl+K).
-Insert a bookmark in a specific place in this document | Insert a bookmark in a specific place in this document.
-Provide an overview of your document by adding a table of contents | Provide an overview of your document by adding a table of contents.
-Add or edit the header | Add or edit the header.
-Add or edit the footer | Add or edit the footer.
-Open the page setup dialog | Open the page setup dialog.
-Add page numbers | Add page numbers.
-Find Text | Find text in the document (Ctrl+F).
-Toggle between the internal clipboard and system clipboard | Toggle between the internal clipboard and system clipboard.Access to system clipboard through script is denied due to browsers security policy. Instead, 1. You can enable internal clipboard to cut, copy and paste within the component. 2. You can use the keyboard shortcuts (Ctrl+X, Ctrl+C and Ctrl+V) to cut, copy and paste with system clipboard.
-Current Page Number | The current page number in the document. Click or tap to navigate specific page.
-Read only | Read only
-Protections | Protections
-Error in establishing connection with web server | Error in establishing connection with web server
-Single | Single
-Double | Double
-New comment | New comment
-Comments | Comments
-Print layout | Print layout
-Web layout | Web layout
-Text Form | Text Form
-Check Box | Check Box
-DropDown | Drop-Down
-Update Fields | Update Fields
-Update cross reference fields | Update cross reference fields
-Hide properties pane | Hide properties pane
-Show properties pane | Show properties pane
-
-## Color Picker
-
-The following list of properties and its values are used in the color picker.
-
-Locale keywords |Text
------|-----
-Apply | Apply
-Cancel | Cancel
-ModeSwitcher | Switch Mode
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/header-footer.md b/ej2-javascript/document-editor/header-footer.md
deleted file mode 100644
index f70b076e6..000000000
--- a/ej2-javascript/document-editor/header-footer.md
+++ /dev/null
@@ -1,92 +0,0 @@
----
-layout: post
-title: Header footer in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Header footer in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Header footer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Header footer in ##Platform_Name## Document editor control
-
-Document Editor supports headers and footers in its document. Each section in the document can have the following types of headers and footers:
-
-* First page: Used only on the first page of the section.
-* Even pages: Used on all even numbered pages in the section.
-* Default: Used on all pages of the section, where first or even pages are not applicable or not specified.
-
-You can define this by setting format properties of the corresponding section using the following sample code.
-
-```ts
-//Defines whether different header footer is required for first page of the section
-documenteditor.selection.sectionFormat.differentFirstPage = true;
-//Defines whether different header footer is required for odd and even pages in the section
-documenteditor.selection.sectionFormat.differentOddAndEvenPages = true;
-```
-
-## Go to header footer region
-
-Double click in header or footer region to move the selection into it. You can also do this by using the following code.
-
-```ts
-documenteditor.selection.goToHeader();
-```
-
-```ts
-documenteditor.selection.goToFooter();
-```
-
-## Header and footer distance
-
-You can define the distance of header region content from the top of the page. Refer to the following sample code.
-
-```ts
-documenteditor.selection.sectionFormat.headerDistance= 36;
-```
-
-Same way, you can define the distance of footer region content from the bottom of the page. Refer to the following sample code.
-
-```ts
-documenteditor.selection.sectionFormat.footerDistace=36;
-```
-
-## Close header footer region
-
-Move the selection to the document body from header or footer region by double clicking or tapping the document area. You can also perform this by using the following sample code.
-
-```ts
-documenteditor.selection.closeHeaderFooter()
-```
-
-## Link to previous
-
-Link to previous is enabled by default when document has more than one section. If you're using different headers and footers such as different first page or different odd and even pages, they can't be linked together because they're all separate.
-
-Before setting or getting the link to previous value, use the ['goToHeader'](../api/document-editor/selection/#gotoheader) or ['goToFooter'](../api/document-editor/selection/#gotofooter) API to move the current selection to the header or footer region.
-
-You can get or set the default header footer link to previous value of a section at cursor position by using the following sample code.
-
-```typescript
-container.documentEditor.selection.sectionFormat.oddPageHeader.linkToPrevious = false;
-container.documentEditor.selection.sectionFormat.oddPageFooter.linkToPrevious = false;
-```
-
-In case the document has different header and footer types, such as different first page, odd, and even pages.
-
-```typescript
-// Different first page
-container.documentEditor.selection.sectionFormat.firstPageHeader.linkToPrevious = false;
-container.documentEditor.selection.sectionFormat.firstPageFooter.linkToPrevious = false;
-
-//Even page
-container.documentEditor.selection.sectionFormat.evenPageHeader.linkToPrevious = false;
-container.documentEditor.selection.sectionFormat.evenPageFooter.linkToPrevious = false;
-```
-
->Note: When there is more than one section in the document, the Link to Previous option becomes available. By default, this feature is disabled state in UI and set to return false for the first section.
-
-## See Also
-
-* [Working with Section Formatting](../document-editor/section-format/)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/history.md b/ej2-javascript/document-editor/history.md
deleted file mode 100644
index c63a45b3a..000000000
--- a/ej2-javascript/document-editor/history.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-layout: post
-title: History in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about History in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: History
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# History in ##Platform_Name## Document editor control
-
-Document Editor tracks the history of all editing actions done in the document, which allows undo and redo functionality.
-
-## Enable or disable history
-
-Inject the ‘EditorHistory’ module in your application to provide history preservation functionality for ‘DocumentEditor’. Refer to the following code example.
-
-```ts
-//Inject require modules.
-DocumentEditor.Inject(Editor, Selection, EditorHistory);
-let editor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false });
-//Enable editor history module.
-editor.enableEditorHistory = true;
-```
-
-You can enable or disable history preservation for a Document Editor instance any time using the ‘enableEditorHistory’ property. Refer to the following sample code.
-
-```ts
-editor.enableEditorHistory = false;
-```
-
-## Undo and redo
-
-You can perform undo and redo by ‘CTRL+Z’ and ‘CTRL+Y’ keyboard shortcuts. Document Editor exposes API to do it programmatically.
-
-To undo the last editing operation in Document Editor, refer to the following sample code.
-
-```ts
-editor.editorHistory.undo();
-```
-
-To redo the last undone action, refer to the following code example.
-
-```ts
-editor.editorHistory.redo();
-```
-
-## Stack size
-
-History of editing actions will be maintained in stack, so that the last item will be reverted first. By default, Document Editor limits the size of undo and redo stacks to 500 each respectively. However, you can customize this limit. Refer to the following sample code.
-
-```ts
-//Set undo limit.
-editor.editorHistory.undoLimit = 400;
-//Set redo limit.
-editor.editorHistory.redoLimit = 400;
-```
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module/)
-* [Keyboard shortcuts](../document-editor/keyboard-shortcut/)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to.md b/ej2-javascript/document-editor/how-to.md
deleted file mode 100644
index 08aceb385..000000000
--- a/ej2-javascript/document-editor/how-to.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-layout: post
-title: How to in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about How to in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: How to
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# How to in ##Platform_Name## Document editor control
-
-Document Editor triggers the [`keyDown`](../api/document-editor/documentEditorKeyDownEventArgs/) event every time when any key is entered and provides an instance of `DocumentEditorKeyDownEventArgs`. You can use the `isHandled` property to override the keyboard shortcut behavior.
-
-## Preventing default keyboard shortcut
-
-The following code shows how to prevent the `CTRL + C` keyboard shortcut for copying selected content in Document Editor.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/prevent-keyboard-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/prevent-keyboard-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/prevent-keyboard-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/prevent-keyboard-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/prevent-keyboard-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/prevent-keyboard-cs1" %}
-{% endif %}
-
-## Override or define the keyboard shortcut
-
-Override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut.
-
-For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save a document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/override-keyboard-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/override-keyboard-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/override-keyboard-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/override-keyboard-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/override-keyboard-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/override-keyboard-cs1" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/add-save-button-in-toolbar.md b/ej2-javascript/document-editor/how-to/add-save-button-in-toolbar.md
deleted file mode 100644
index c38e65496..000000000
--- a/ej2-javascript/document-editor/how-to/add-save-button-in-toolbar.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: post
-title: Add save button in ##Platform_Name## Document editor toolbar | Syncfusion
-description: Learn here to add save button in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Add save button tool bar
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add save button in ##Platform_Name## Document editor toolbar
-
-## To add a save button to the existing toolbar in DocumentEditorContainer
-
-DocumentEditorContainer allows you to add a new button to the existing items in a toolbar using [`CustomToolbarItemModel`](../../api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](../../api/document-editor-container/#toolbaritems) property. Newly added item click action can be defined in [`toolbarclick`](../../api/toolbar/clickEventArgs/).
-
-{% if page.publishingplatform == "typescript" %}
-```ts
-import { DocumentEditorContainer, CustomToolbarItemModel, Toolbar } from '@syncfusion/ej2-documenteditor';
-import { ClickEventArgs } from '@syncfusion/ej2-navigations';
-DocumentEditorContainer.Inject(Toolbar);
-
-let hostUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-let toolItem: CustomToolbarItemModel = {
- prefixIcon: "e-save icon",
- tooltipText: "Save the Document",
- text: "Save",
- id: "save"
-};
-
-//Initialize Document Editor Container component with custom toolbar item.
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- toolbarItems: ['New', 'Open', toolItem, 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl'], serviceUrl:hostUrl, height:'590px',
-});
-container.appendTo('#container');
-//To handle custom toolbar click event.
-container.toolbarClick = (args: ClickEventArgs): void => {
- switch (args.item.id) {
- case 'save':
- //Save the document(Download the document)
- container.documentEditor.save('sample', 'Docx');
- break;
- }
-};
-{% elsif page.publishingplatform == "javascript" %}
-ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
-var hostUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-let toolItem = {
- prefixIcon: "e-save icon",
- tooltipText: "Save the Document",
- text: "Save",
- id: "save"
-};
-
-var container = new ej.documenteditor.DocumentEditorContainer({ toolbarItems: ['New', 'Open', toolItem, 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields', 'ContentControl'], serviceUrl: hostUrl, height: '590px' });
-
-container.appendTo("#container");
-//To handle custom toolbar click event.
-container.toolbarClick = (args) => {
- switch (args.item.id) {
- case 'save':
- //Save the document(Download the document)
- container.documentEditor.save('sample', 'Docx');
- break;
- }
-};
-{% endif %}
-```
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
->Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/auto-save-document-in-document-editor.md b/ej2-javascript/document-editor/how-to/auto-save-document-in-document-editor.md
deleted file mode 100644
index d77f4a4bf..000000000
--- a/ej2-javascript/document-editor/how-to/auto-save-document-in-document-editor.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-layout: post
-title: Auto save document in document editor in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Auto save document in document editor in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Auto save document in document editor
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Auto save document in document editor in ##Platform_Name## Document editor control
-
-In this article, we are going to see how to autosave the document in AWS S3. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
-
-The following example illustrates how to auto save the document in AWS S3.
-
-* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`saveAsBlob`](../../api/document-editor/#saveasblob) method.
-
-```ts
-import {
- DocumentEditorContainer,
- Toolbar,
-} from '@syncfusion/ej2-documenteditor';
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-let contentChanged: boolean = false;
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.created = function () {
- setInterval(() => {
- if (contentChanged) {
- //You can save the document as below
- container.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
- console.log('Saved sucessfully');
- let exportedDocument: Blob = blob;
- //Now, save the document where ever you want.
- let formData: FormData = new FormData();
- formData.append('fileName', 'sample.docx');
- formData.append('data', exportedDocument);
- /* tslint:disable */
- var req = new XMLHttpRequest();
- // Replace your running Url here
- req.open(
- 'POST',
- 'http://localhost:62869/api/documenteditor/SaveToS3',
- true
- );
- req.onreadystatechange = () => {
- if (req.readyState === 4) {
- if (req.status === 200 || req.status === 304) {
- console.log('Saved sucessfully');
- }
- }
- };
- req.send(formData);
- });
- contentChanged = false;
- }
- }, 1000);
-};
-container.appendTo('#container');
-
-container.contentChange = (): void => {
- contentChanged = true;
-};
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-* In server-side, configure the access key and secret key in `web.config` file and register profile in `startup.cs`.
-
-In `web.config`, add key like below format:
-
-```c#
-
-
-
-
-
-```
-
-In `startup.cs`, register profile in below format:
-
-```c#
-Amazon.Util.ProfileManager.RegisterProfile("sync_development","", "");
-```
-
-* In server-side, Receives the stream content from client-side and process it to save the document in aws s3. Add Web API in controller file like below to save the document in aws s3.
-
-```c#
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveToS3")]
-public string SaveToS3()
-{
- IFormFile file = HttpContext.Request.Form.Files[0];
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
- UploadFileStreamToS3(stream, "documenteditor", "", "GettingStarted.docx");
- stream.Close();
- return "Sucess";
-}
-
-public bool UploadFileStreamToS3(System.IO.Stream localFilePath, string bucketName, string subDirectoryInBucket, string fileNameInS3)
-{
- AWSCredentials credentials = new StoredProfileAWSCredentials("sync_development");
- IAmazonS3 client = new AmazonS3Client(credentials, Amazon.RegionEndpoint.USEast1);
- TransferUtility utility = new TransferUtility(client);
- TransferUtilityUploadRequest request = new TransferUtilityUploadRequest();
-
- if (subDirectoryInBucket == "" || subDirectoryInBucket == null)
- {
- request.BucketName = bucketName; //no subdirectory just bucket name
- }
- else
- { // subdirectory and bucket name
- request.BucketName = bucketName + @"/" + subDirectoryInBucket;
- }
- request.Key = fileNameInS3; //file name up in S3
- request.InputStream = localFilePath;
- utility.Upload(request); //commensing the transfer
-
- return true; //indicate that the file was sent
-}
-```
-
-Get the complete working sample in this [`link`](https://github.com/SyncfusionExamples/Auto-Save-documents-in-Word-Processor).
diff --git a/ej2-javascript/document-editor/how-to/auto-save-document.md b/ej2-javascript/document-editor/how-to/auto-save-document.md
deleted file mode 100644
index fec223cb6..000000000
--- a/ej2-javascript/document-editor/how-to/auto-save-document.md
+++ /dev/null
@@ -1,89 +0,0 @@
----
-layout: post
-title: Auto save document in ##Platform_Name## Document Editor | Syncfusion
-description: Learn here all about Auto save document in document editor in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Auto save document in document editor
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Auto save document in ##Platform_Name## Document editor control
-
-In this article, we are going to see how to autosave the document to server. You can automatically save the edited content in regular intervals of time. It helps reduce the risk of data loss by saving an open document automatically at customized intervals.
-
-The following example illustrates how to auto save the document in server.
-
-* In the client-side, using content change event, we can automatically save the edited content in regular intervals of time. Based on `contentChanged` boolean, the document send as Docx format to server-side using [`saveAsBlob`](../../api/document-editor/#saveasblob) method.
-
-```ts
-import {
- DocumentEditorContainer,
- Toolbar,
-} from '@syncfusion/ej2-documenteditor';
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-let contentChanged: boolean = false;
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.created = function () {
- setInterval(() => {
- if (contentChanged) {
- //You can save the document as below
- container.documentEditor.saveAsBlob('Docx').then((blob: Blob) => {
- console.log('Saved sucessfully');
- let exportedDocument: Blob = blob;
- //Now, save the document where ever you want.
- let formData: FormData = new FormData();
- formData.append('fileName', 'sample.docx');
- formData.append('data', exportedDocument);
- /* tslint:disable */
- var req = new XMLHttpRequest();
- // Replace your running Url here
- req.open(
- 'POST',
- 'http://localhost:62869/api/documenteditor/AutoSave',
- true
- );
- req.onreadystatechange = () => {
- if (req.readyState === 4) {
- if (req.status === 200 || req.status === 304) {
- console.log('Saved sucessfully');
- }
- }
- };
- req.send(formData);
- });
- contentChanged = false;
- }
- }, 1000);
-};
-container.appendTo('#container');
-
-container.contentChange = (): void => {
- contentChanged = true;
-};
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-* In server-side, Receives the stream content from client-side and process it to save the document in Server or Database from the received stream. Add Web API in controller file like below to save the document.
-
-```c#
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("AutoSave")]
-public string AutoSave()
-{
- IFormFile file = HttpContext.Request.Form.Files[0];
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
- //Save the stream to database or server as per the requirement.
- stream.Close();
- return "Sucess";
-}
-```
-
-## See Also
-* [Autosave document in DocumentEditor](../../document-editor/how-to/auto-save-document-in-document-editor)
diff --git a/ej2-javascript/document-editor/how-to/change-document-view.md b/ej2-javascript/document-editor/how-to/change-document-view.md
deleted file mode 100644
index fb94df9c1..000000000
--- a/ej2-javascript/document-editor/how-to/change-document-view.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-layout: post
-title: Change document view in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Change document view in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Change document view
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Change document view in ##Platform_Name## Document editor control
-
-## How to change the document view in DocumentEditor component
-
-DocumentEditor allows you to change the view to web layout and print using the [`layoutType`](../../api/document-editor#layouttype) property with the supported [`LayoutType`](../../api/document-editor/layoutType/).
-
-```ts
-let docEdit: DocumentEditor = new DocumentEditor({ layoutType: 'Continuous'});
-```
-
->Note: Default value of [`layoutType`](../../api/document-editor#layouttype) in DocumentEditor component is [`Pages`](../../api/document-editor/layoutType/).
-
-## How to change the document view in DocumentEditorContainer component
-
-DocumentEditorContainer component allows you to change the view to web layout and print using the [`layoutType`](../../api/document-editor-container#layouttype) property with the supported [`LayoutType`](../../api/document-editor/layoutType/).
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ layoutType: "Continuous" });
-```
-
->Note: Default value of [`layoutType`](../../api/document-editor#layouttype) in DocumentEditorContainer component is [`Pages`](../../api/document-editor/layoutType/).
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/change-the-cursor-color-in-document-editor.md b/ej2-javascript/document-editor/how-to/change-the-cursor-color-in-document-editor.md
deleted file mode 100644
index 9cbe5252e..000000000
--- a/ej2-javascript/document-editor/how-to/change-the-cursor-color-in-document-editor.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-layout: post
-title: Change the cursor color in document editor in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Change the cursor color in document editor in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Change the cursor color in document editor
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Change the cursor color in document editor in ##Platform_Name## Document editor control
-
-Document Editor default cursor color is black. The user can change the color by overriding the css property using class name. The Document editor cursor css have a class named `e-de-blink-cursor`.
-
-Please refer the below code snippet to change the cursor color to red.
-
-```
-.e-de-blink-cursor {
-border-left: 1px solid red!important;
-}
-```
-
-Output will be like below:
-
-
diff --git a/ej2-javascript/document-editor/how-to/change-the-default-search-highlight-color.md b/ej2-javascript/document-editor/how-to/change-the-default-search-highlight-color.md
deleted file mode 100644
index 4b9df75d6..000000000
--- a/ej2-javascript/document-editor/how-to/change-the-default-search-highlight-color.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: post
-title: Change the default search highlight color in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Change the default search highlight color in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Change the default search highlight color
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Change the default search highlight color in ##Platform_Name## Document editor control
-
-Document editor provides an options to change the default search highlight color using [`searchHighlightColor`](../../api/document-editor/documentEditorSettingsModel/#searchhighlightcolor) in Document editor settings. The highlight color which is given in [`documentEditorSettings`](../../api/document-editor-container/#documenteditorsettings) will be highlighted on the searched text. By default, search highlight color is `yellow`.
-
-Similarly, you can use [`documentEditorSettings`](../../api/document-editor#documenteditorsettings) property for DocumentEditor also.
-
-The following example code illustrates how to change the default search highlight color.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
-// Add required search highlight color
- documentEditorSettings: {
- searchHighlightColor: 'Grey',
- }
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Output will be like below:
-
-
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/customize-color-picker.md b/ej2-javascript/document-editor/how-to/customize-color-picker.md
deleted file mode 100644
index 537f4c5de..000000000
--- a/ej2-javascript/document-editor/how-to/customize-color-picker.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: post
-title: Customize color picker in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Customize color picker in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Customize Color Picker
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize color picker in ##Platform_Name## Document editor control
-
-Document editor provides an options to customize the color picker using [`colorPickerSettings`](../../api/document-editor/documentEditorSettingsModel/#colorpickersettings) in Document editor settings. The color picker offers customization options for default appearance, by allowing selection between Picker or Palette mode, for font and border colors."
-
-Similarly, you can use [`documentEditorSettings`](../../api/document-editor#documenteditorsettings) property for DocumentEditor also.
-
-The following example code illustrates how to Customize the color picker in Document editor container.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
- //Customizing options for color picker.
- documentEditorSettings: {
- colorPickerSettings: { mode: 'Palette', modeSwitcher: true, showButtons: true },
- }
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-The following table illustrates all the possible properties for the color picker.
-
-| Property | Behavior |
-|---|---|
-| columns | It is used to render the ColorPicker palette with specified columns. Defaults to 10 |
-| disabled | It is used to enable / disable ColorPicker component. If it is disabled the ColorPicker popup won’t open. Defaults to false |
-| mode | It is used to render the ColorPicker with the specified mode. Defaults to ‘Picker’ |
-| modeSwitcher | It is used to show / hide the mode switcher button of ColorPicker component. Defaults to true |
-| showButtons | It is used to show / hide the control buttons (apply / cancel) of ColorPicker component. Defaults to true |
-
-
->**Note**: According to the Word document specifications, it is not possible to modify the **`Predefined Highlight colors`**. This limitation means that the range of highlight colors provided by default cannot be customized or expanded upon by the user to suit individual preferences. Consequently, users must work within the confines of the existing color palette, as no functionality currently exists to modify or personalize these predefined highlighting options.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/customize-context-menu.md b/ej2-javascript/document-editor/how-to/customize-context-menu.md
deleted file mode 100644
index c2eebb9e4..000000000
--- a/ej2-javascript/document-editor/how-to/customize-context-menu.md
+++ /dev/null
@@ -1,205 +0,0 @@
----
-layout: post
-title: Customize context menu in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Customize context menu in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Customize context menu
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize context menu in ##Platform_Name## Document editor control
-
-## How to customize context menu in Document Editor
-
-Document Editor allows you to add custom option in context menu. It can be achieved by using the [`addCustomMenu()`](../../api/document-editor/contextMenu/#addcustommenu) method and custom action is defined using the [`customContextMenuSelect`](../../api/document-editor/customContentMenuEventArgs/)
-
-### Add Custom Option
-
-The following code shows how to add custom option in context menu.
-
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
-});
-documentEditor.enableAllModules();
-documentEditor.appendTo('#DocumentEditor');
-//Creating custom menu items
-let menuItems: MenuItemModel[] = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-de-ctnr-find'
- }];
-//Adding custom options
-documentEditor.contextMenu.addCustomMenu(menuItems, false);
-//To handle contextmenu select event
-documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
- let item: string = args.id;
- let id: string = documentEditor.element.id;
- switch (item) {
- case id + 'search_in_google':
- let searchContent: string = documentEditor.selection.text;
- if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
- window.open('http://google.com/search?q=' + searchContent);
- }
- break;
- }
-};
-```
-
-### Customize custom option in context menu
-
-Document Editor allows you to customize the added custom option and also to hide/show default context menu.
-
-#### Hide default context menu items
-
-The following code shows how to hide default context menu and add custom option in context menu.
-
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
-});
-documentEditor.enableAllModules();
-documentEditor.appendTo('#DocumentEditor');
-//Creating custom menu items
-let menuItems: MenuItemModel[] = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-de-ctnr-find'
- }];
-//Adding custom options
-documentEditor.contextMenu.addCustomMenu(menuItems, true);
-```
-
-#### Customize added context menu items
-
-The following code shows how to hide/show added custom option in context menu using the [`customContextMenuBeforeOpen`](../../api/document-editor/beforeOpenCloseCustomContentMenuEventArgs/).
-
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
-});
-documentEditor.enableAllModules();
-documentEditor.appendTo('#DocumentEditor');
-//Creating custom menu items
-let menuItems: MenuItemModel[] = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-de-ctnr-find'
- }];
-//Adding custom options
-documentEditor.contextMenu.addCustomMenu(menuItems, false);
-//To show/hide custom menu item
-documentEditor.customContextMenuBeforeOpen = (args: BeforeOpenCloseCustomContentMenuEventArgs): void => {
- let search: HTMLElement = document.getElementById(args.ids[0]);
- search.style.display = 'none';
- let searchContent: string = documentEditor.selection.text;
- if ((!documentEditor.selection.isEmpty) && (/\S/.test(searchContent))) {
- search.style.display = 'block';
- }
-};
-//To handle contextmenu select event
-documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
- let item: string = args.id;
- let id: string = documentEditor.element.id;
- switch (item) {
- case id + 'search_in_google':
- let searchContent: string = documentEditor.selection.text;
- if (!documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
- window.open('http://google.com/search?q=' + searchContent);
- }
- break;
- }
-};
-```
-
-The following is the output of custom context menu with customization.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/customize-context-menu-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/customize-context-menu-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/customize-context-menu-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/customize-context-menu-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/customize-context-menu-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/customize-context-menu-cs1" %}
-{% endif %}
-
-#### Customize Context Menu with sub-menu items
-
-Document Editor allows you to customize the Context Menu with sub-menu items. It can be achieved by using the [`addCustomMenu()`](../../api/document-editor/contextMenu/#addcustommenu) method.
-
-The following code shows how to add a sub items in the custom option in context menu in Document Editor Container.
-
-```ts
-import {
- DocumentEditorContainer,
- Toolbar,
-} from '@syncfusion/ej2-documenteditor';
-import { MenuItemModel } from '@syncfusion/ej2-navigations';
-
-//Inject require modules.
-DocumentEditorContainer.Inject(Toolbar);
-
-// creating Custom Options
-let menuItems: MenuItemModel[] = [
- {
- text: 'Form field',
- id: 'form field',
- iconCss: 'e-de-formfield e-icons',
- items: [
- {
- text: 'Text form',
- id: 'Text form',
- iconCss: 'e-icons e-de-textform',
- },
- {
- text: 'Check box',
- id: 'Check box',
- iconCss: 'e-icons e-de-checkbox-form',
- },
- {
- text: 'Drop down',
- id: 'Drop down',
- iconCss: 'e-icons e-de-dropdownform',
- },
- ],
- },
-];
-//Initialize Document Editor component.
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-
-//Open the default document in `created` event.
-container.created = function () {
- // adding Custom Options
- container.documentEditor.contextMenu.addCustomMenu(menuItems, false, true);
-};
-//Render Document Editor Container component.
-container.appendTo('#DocumentEditor');
-
-
-```
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/customize-font-family-drop-down.md b/ej2-javascript/document-editor/how-to/customize-font-family-drop-down.md
deleted file mode 100644
index c1c136a8f..000000000
--- a/ej2-javascript/document-editor/how-to/customize-font-family-drop-down.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-layout: post
-title: Customize font family drop down in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Customize font family drop down in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Customize font family drop down
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize font family drop down in ##Platform_Name## Document editor control
-
-Document editor provides an options to customize the font family drop down list values using [`fontfamilies`](../../api/document-editor/documentEditorSettingsModel/#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](../../api/document-editor-container/#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog.
-
-Similarly, you can use [`documentEditorSettings`](../../api/document-editor#documenteditorsettings) property for DocumentEditor also.
-
-The following example code illustrates how to change the font families in Document editor container.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
-// Add required font families to list it in font drop down
- documentEditorSettings: {
- fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Windings'],
- }
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Output will be like below:
-
-
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/customize-tool-bar.md b/ej2-javascript/document-editor/how-to/customize-tool-bar.md
deleted file mode 100644
index 53c61a98a..000000000
--- a/ej2-javascript/document-editor/how-to/customize-tool-bar.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-layout: post
-title: Customize tool bar in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Customize tool bar in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Customize tool bar
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize tool bar in ##Platform_Name## Document editor control
-
-## How to customize existing toolbar in DocumentEditorContainer
-
-DocumentEditorContainer allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
-
-* Add - New items can defined by [`CustomToolbarItemModel`](../../api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](../../api/document-editor-container/#toolbaritems) property. Newly added item click action can be defined in [`toolbarclick`](../../api/toolbar/clickEventArgs/).
-
-* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](../../api/document-editor-container/#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](../../api/document-editor/toolbarItem/).
-
-* Enable, Disable - Toolbar items can be enabled or disable using [`enableItems`](../../api/document-editor-container/toolbar/#enableItems)
-
-```ts
-let toolItem: CustomToolbarItemModel = {
- prefixIcon: "e-de-ctnr-lock",
- tooltipText: "Disable Image",
- text: onWrapText("Disable Image"),
- id: "Custom"
-};
-
-//Initialize Document Editor Container component with custom toolbar item.
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- toolbarItems: [toolItem, 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']
-});
-container.appendTo('#container');
-//To handle custom toolbar click event.
-container.toolbarClick = (args: ClickEventArgs): void => {
- switch (args.item.id) {
- case 'Custom':
- //Disable image toolbar item.
- container.toolbar.enableItems(4, false);
- break;
- }
-};
-
-function onWrapText(text: string): string {
- let content: string = '';
- const index: number = text.lastIndexOf(' ');
-
- if (index !== -1) {
- content = text.slice(0, index) + "
" + text.slice(index + 1) + "
";
- } else {
- content = text;
- }
-
- return content;
-}
-```
-
->Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/deploy-document-editor-component-for-mobile.md b/ej2-javascript/document-editor/how-to/deploy-document-editor-component-for-mobile.md
deleted file mode 100644
index 9cf4f5626..000000000
--- a/ej2-javascript/document-editor/how-to/deploy-document-editor-component-for-mobile.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: post
-title: Deploy document editor component for mobile in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Deploy document editor component for mobile in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Deploy document editor component for mobile
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Deploy document editor component for mobile in ##Platform_Name## Document editor control
-
-## Document editor component for Mobile
-
-At present, Document editor component is not responsive for mobile, and we haven't ensured the editing functionalities in mobile browsers. Whereas it works properly as a document viewer in mobile browsers.
-
-Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke [`fitPage`](../../api/document-editor/#fitpage) method with [`FitPageWidth`](../../api/document-editor/pageFitType/) parameter in document change event, such as to display one full page by adjusting the zoom factor.
-
-The following example code illustrates how to deploy Document Editor component for Mobile.
-
-```ts
-//Initialize Document Editor Container component.
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true, height: '590px'
-});
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#DocumentEditor');
-
-//To detect the device
-let isMobileDevice: bool = /Android|Windows Phone|webOS/i.test(navigator.userAgent);
-
-container.documentChange = () => {
- if (isMobileDevice) {
- container.restrictEditing = true;
- setTimeout(() => {
- container.documentEditor.fitPage("FitPageWidth");
- }, 50);
- }
- else {
- container.restrictEditing = false;
- }
-}
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-You can download the complete working example from this [GitHub location](https://github.com/SyncfusionExamples/Deploy-Document-Editor-in-Mobile-Friendly-Web-page/)
-
->Note: You can use the [`restrictEditing`](../../api/document-editor-container#restrictediting) in DocumentEditorContainer and [`isReadOnly`](../../api/document-editor/#isreadonly) in DocumentEditor based on your requirement to change component to read only mode.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/disable-auto-focus.md b/ej2-javascript/document-editor/how-to/disable-auto-focus.md
deleted file mode 100644
index 0745f0bd6..000000000
--- a/ej2-javascript/document-editor/how-to/disable-auto-focus.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-layout: post
-title: Disable auto focus in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Disable auto focus in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Disable auto focus
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable auto focus in ##Platform_Name## Document editor control
-
-Document Editor gets focused automatically when the page loads. If you want the Document editor not to be focused automatically it can be customized.
-
-The following example illustrates to disable the auto focus in DocumentEditorContainer.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', enableAutoFocus: false});
-```
-
->Note: Default value of [`enableAutoFocus`](../../api/document-editor-container/#enableautofocus) property is `true`.
-
-The following example illustrates to disable the auto focus in DocumentEditor.
-
-```ts
-let editor: DocumentEditor = new DocumentEditor({ height: '590px', enableAutoFocus: false});
-```
-
->Note: Default value of [`enableAutoFocus`](../../api/document-editor/#enableautofocus) property is `true`.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/disable-drag-and-drop.md b/ej2-javascript/document-editor/how-to/disable-drag-and-drop.md
deleted file mode 100644
index 4ff09bfa5..000000000
--- a/ej2-javascript/document-editor/how-to/disable-drag-and-drop.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-layout: post
-title: Disable drag and drop in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Disable drag and drop in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Disable drag and drop
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable drag and drop in ##Platform_Name## Document editor control
-
-Document Editor provides support to drag and drop contents within the component and it can be customized(enable and disable) using [`allowDragAndDrop`](../../api/document-editor-container/documenteditorsettings/#allowDragAndDrop) property in Document editor settings.
-
-The following example illustrates to disable the drag and drop option in DocumentEditorContainer.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', documentEditorSettings: { allowDragAndDrop: false } });
-```
-
->Note: Default value of [`allowDragAndDrop`](../../api/document-editor-container/#documenteditorsettings/#allowDragAndDrop) property is `true`.
-
-The following example illustrates to disable the drag and drop option in DocumentEditor.
-
-```ts
-let editor: DocumentEditor = new DocumentEditor({ height: '590px', documentEditorSettings: { allowDragAndDrop: false } });
-```
-
->Note: Default value of [`allowDragAndDrop`](../../api/document-editor/#documenteditorsettings/#allowDragAndDrop) property is `true`.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/disable-header-and-footer-edit-in-document-editor.md b/ej2-javascript/document-editor/how-to/disable-header-and-footer-edit-in-document-editor.md
deleted file mode 100644
index fccb5947c..000000000
--- a/ej2-javascript/document-editor/how-to/disable-header-and-footer-edit-in-document-editor.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-layout: post
-title: Disable header and footer edit in ##Platform_Name## Document editor | Syncfusion
-description: Learn here all about disabling editing in header and footer ##Platform_Name## Document editor control.
-platform: ej2-javascript
-control: Disable header and footer edit in document editor
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable header and footer edit in ##Platform_Name## Document editor
-
-## Disable header and footer edit in DocumentEditorContainer instance
-
-You can use [`restrictEditing`](../../api/document-editor-container/#restrictediting) property to disable header and footer editing based on selection context type.
-
-RestrictEditing allows you to restrict the document modification and makes the Document read only mode. So, by using this property, and if selection inside header or footer, you can set this property as true.
-
-The following example code illustrates how to header and footer edit in `DocumentEditorContainer` instance.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let hostUrl: string = 'https://services.syncfusion.com/js/production/';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = hostUrl + 'api/documenteditor/';
-container.appendTo('#container');
-container.selectionChange = (): void => {
- // Check whether selection is in header
- if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
- // Check whether selection is in Footer
- container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
- // Change the document to read only mode
- container.restrictEditing = true;
- } else {
- // Change the document to editable mode
- container.restrictEditing = false;
- }
-};
-```
-
-Otherwise, you can disable clicking inside Header or Footer by using [`closeHeaderFooter`](../../api/document-editor/selection/#closeheaderfooter) API in selection module.
-
-The following example code illustrates how to close header and footer when selection is inside header or footer in `DocumentEditorContainer` instance.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let hostUrl: string = 'https://services.syncfusion.com/js/production/';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = hostUrl + 'api/documenteditor/';
-container.appendTo('#container');
-container.selectionChange = (): void => {
-
- // Check whether selection is in header
- if (container.documentEditor.selection.contextType.indexOf('Header') > -1 ||
- // Check whether selection is in Footer
- container.documentEditor.selection.contextType.indexOf('Footer') > -1) {
- // Close header Footer
- container.documentEditor.selection.closeHeaderFooter();
- }
-};
-```
-
-## Disable header and footer edit in DocumentEditor instance
-
-Like restrictEditing, you can use [`isReadOnly`](../../api/document-editor/#isreadonly) property in Document editor to disable header and footer edit.
-
-The following example code illustrates how to header and footer edit in `DocumentEditor` instance.
-
-```ts
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
-
-let hostUrl: string = 'https://services.syncfusion.com/js/production/';
-
-let documentEditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, height: '590px' });
-documentEditor.enableAllModules();
-documentEditor.serviceUrl = hostUrl + 'api/documenteditor/';
-documentEditor.appendTo('#documentEditor');
-documentEditor.selectionChange = (): void => {
- // Check whether selection is in header
- if (documentEditor.selection.contextType.indexOf('Header') > -1 ||
- // Check whether selection is in Footer
- documentEditor.selection.contextType.indexOf('Footer') > -1) {
- // Change the document to read only mode
- documentEditor.isReadOnly = true;
- } else {
- // Change the document to editable mode
- documentEditor.isReadOnly = false;
- }
-};
-```
diff --git a/ej2-javascript/document-editor/how-to/disable-optimized-text-measuring.md b/ej2-javascript/document-editor/how-to/disable-optimized-text-measuring.md
deleted file mode 100644
index f5051a912..000000000
--- a/ej2-javascript/document-editor/how-to/disable-optimized-text-measuring.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: Disable optimized text measuring in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Disable optimized text measuring in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Disable optimized text measuring
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable optimized text measuring in ##Platform_Name## Document editor control
-
-Starting from v19.3.0.x, the accuracy of text size measurements in Document editor is improved such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [`enableOptimizedTextMeasuring`](../../api/document-editor/documentEditorSettingsModel/#enableoptimizedtextmeasuring) in Document editor settings.
-
-If you want the Document editor component to retain the document pagination (display page-by-page) behavior like v19.2.0.x and older versions. Then you can disable this optimized text measuring improvement, by setting `false` to [`enableOptimizedTextMeasuring`](../../api/document-editor/documentEditorSettingsModel/#enableoptimizedtextmeasuring) property of JavaScript Document Editor component.
-
-## Disable optimized text measuring in `DocumentEditorContainer` instance
-
-The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditorContainer` instance.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-// Disable optimized text measuring improvement
-container.documentEditorSettings = { enableOptimizedTextMeasuring: false };
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-```
-
-## Disable optimized text measuring in `DocumentEditor` instance
-
-The following example code illustrates how to disable optimized text measuring improvement in `DocumentEditor` instance.
-
-```ts
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
-
-let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
-
-documenteditor.enableAllModules();
-
-// Disable optimized text measuring improvement
-documenteditor.documentEditorSettings = { enableOptimizedTextMeasuring: false };
-
-documenteditor.appendTo('#DocumentEditor');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/enable-ruler-in-document-editor-component.md b/ej2-javascript/document-editor/how-to/enable-ruler-in-document-editor-component.md
deleted file mode 100644
index 493f4bcbf..000000000
--- a/ej2-javascript/document-editor/how-to/enable-ruler-in-document-editor-component.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-layout: post
-title: how to enable ruler in ##Platform_Name## Document editor control | Syncfusion
-component: "DocumentEditor"
-description: Learn how to enable ruler in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Enable ruler
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Enable ruler
-
-## How to enable ruler in Document Editor component
-
-Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.
-
-The following example illustrates how to enable ruler in Document Editor
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/ruler-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/ruler-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/ruler-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/ruler-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/ruler-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/ruler-cs1" %}
-{% endif %}
-
-## How to enable ruler in Document Editor Container component
-
-Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor Container.
-
-The following example illustrates how to enable ruler in Document Editor Container.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/ruler-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/ruler-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/ruler-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/ruler-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/ruler-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/ruler-cs2" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/export-document-as-pdf.md b/ej2-javascript/document-editor/how-to/export-document-as-pdf.md
deleted file mode 100644
index 9b3168188..000000000
--- a/ej2-javascript/document-editor/how-to/export-document-as-pdf.md
+++ /dev/null
@@ -1,210 +0,0 @@
----
-layout: post
-title: Export document as pdf in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Export document as pdf in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Export document as pdf
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Export document as pdf in ##Platform_Name## Document editor control
-
-In this article, we are going to see how to export the document as Pdf format. You can export the document as Pdf in following ways:
-
-## Export the document as pdf in client-side
-
-Use [`pdf export component`](https://www.npmjs.com/package/@syncfusion/ej2-pdf-export) in application level to export the document as pdf using [`exportasimage`](../../api/document-editor/#exportasimage) API. Here, all pages will be converted to image and inserted as pdf pages(works like print as PDF).
-
->Note:
-* You can install the pdf export packages from this [`link`](https://www.npmjs.com/package/@syncfusion/ej2-pdf-export).
-* There is one limitation we can’t search the text because we are exporting the pdf as image.
-
-The following example code illustrates how to export the document as pdf in client-side.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-import {
- DocumentEditorContainer,
- ImageFormat,
- Toolbar,
-} from '@syncfusion/ej2-documenteditor';
-import {
- PdfBitmap,
- PdfDocument,
- PdfPageOrientation,
- PdfPageSettings,
- PdfSection,
- SizeF,
-} from '@syncfusion/ej2-pdf-export';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl =
- 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-
-document.getElementById('export').addEventListener('click', function () {
- let obj = this;
- let pdfdocument: PdfDocument = new PdfDocument();
- let count: number = container.documentEditor.pageCount;
- container.documentEditor.documentEditorSettings.printDevicePixelRatio = 2;
- let loadedPage = 0;
- for (let i = 1; i <= count; i++) {
- setTimeout(() => {
- let format: ImageFormat = 'image/jpeg' as ImageFormat;
- // Getting pages as image
- let image = container.documentEditor.exportAsImage(i, format);
- image.onload = function () {
- let imageHeight = parseInt(
- image.style.height.toString().replace('px', '')
- );
- let imageWidth = parseInt(
- image.style.width.toString().replace('px', '')
- );
- let section: PdfSection = pdfdocument.sections.add() as PdfSection;
- let settings: PdfPageSettings = new PdfPageSettings(0);
- if (imageWidth > imageHeight) {
- settings.orientation = PdfPageOrientation.Landscape;
- }
- settings.size = new SizeF(imageWidth, imageHeight);
- (section as PdfSection).setPageSettings(settings);
- let page = section.pages.add();
- let graphics = page.graphics;
- let imageStr = image.src.replace('data:image/jpeg;base64,', '');
- let pdfImage = new PdfBitmap(imageStr);
- graphics.drawImage(pdfImage, 0, 0, imageWidth, imageHeight);
- loadedPage++;
- if (loadedPage == count) {
- // Exporting the document as pdf
- pdfdocument.save(
- (container.documentEditor.documentName === ''
- ? 'sample'
- : container.documentEditor.documentName) + '.pdf'
- );
- }
- };
- }, 500);
- }
-});
-```
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-// Initialize DocumentEditorContainer component.
- var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' });
- ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
- documenteditorContainer.serviceUrl = 'http://localhost:62870/api/documenteditor/';
- //DocumentEditorContainer control rendering starts
- documenteditorContainer.appendTo('#DocumentEditor');
-
- document.getElementById('export').addEventListener('click', function () {
- let pdfdocument = new ej.pdfexport.PdfDocument();
- let count = container.documentEditor.pageCount;
- container.documentEditor.documentEditorSettings.printDevicePixelRatio = 2;
- let loadedPage = 0;
- for (let i = 1; i <= count; i++) {
- setTimeout(() => {
- let format = 'image/jpeg';
- // Getting pages as image
- let image = container.documentEditor.exportAsImage(i, format);
- image.onload = function () {
- let imageHeight = parseInt(image.style.height.toString().replace('px', ''));
- let imageWidth = parseInt(image.style.width.toString().replace('px', ''));
- let section = pdfdocument.sections.add();
- let settings = new ej.pdfexport.PdfPageSettings(0);
- if (imageWidth > imageHeight) {
- settings.orientation = PdfPageOrientation.Landscape;
- }
- settings.size = new ej.pdfexport.SizeF(imageWidth, imageHeight);
- section.setPageSettings(settings);
- let page = section.pages.add();
- let graphics = page.graphics;
- let imageStr = image.src.replace('data:image/jpeg;base64,', '');
- let pdfImage = new ej.pdfexport.PdfBitmap(imageStr);
- graphics.drawImage(pdfImage, 0, 0, imageWidth, imageHeight);
- loadedPage++;
- if (loadedPage == count) {
- // Exporting the document as pdf
- pdfdocument.save((container.documentEditor.documentName === ''? 'sample': container.documentEditor.documentName) + '.pdf');
- }
- };
- }, 500);
- }
- })
-```
-{% endif %}
-
-## Export document as pdf in server-side using Syncfusion® DocIO
-
-With the help of [`Synfusion DocIO`](https://help.syncfusion.com/file-formats/docio/word-to-pdf), you can export the document as Pdf in server-side. Here, you can search the text.
-
-The following way illustrates how to convert the document as Pdf:
-
-* Using [`serialize`](../../api/document-editor/#serialize) API, convert the document as Sfdt and send it to server-side.
-
-The following example code illustrates how to convert the document to sfdt and pass it to server-side.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl =
- 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-
-document.getElementById('export').addEventListener('click', function () {
- let http: XMLHttpRequest = new XMLHttpRequest();
- // Replace your running web service Url here
- http.open('POST', 'http://localhost:62869/api/documenteditor/ExportPdf');
- http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
- http.responseType = 'json';
- //Serialize document content as SFDT.
- let sfdt: any = { content: container.documentEditor.serialize() };
- //Send the sfdt content to server side.
- http.send(JSON.stringify(sfdt));
-});
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-* Using Save API in server-side, you can convert the sfdt to stream.
-* Finally, convert the stream to Pdf using [`Syncfusion.DocIORenderer.Net.Core`](https://www.nuget.org/packages/Syncfusion.DocIORenderer.Net.Core) library.
-
-The following example code illustrates how to process the sfdt in server-side.
-
-```c#
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("ExportPdf")]
-public void ExportPdf([FromBody]SaveParameter data)
-{
- // Converts the sfdt to stream
- Stream document = WordDocument.Save(data.content, FormatType.Docx);
- Syncfusion.DocIO.DLS.WordDocument doc = new Syncfusion.DocIO.DLS.WordDocument(document, Syncfusion.DocIO.FormatType.Docx);
- //Instantiation of DocIORenderer for Word to PDF conversion
- DocIORenderer render = new DocIORenderer();
- //Converts Word document into PDF document
- PdfDocument pdfDocument = render.ConvertToPDF(doc);
- // Saves the document to server machine file system, you can customize here to save into databases or file servers based on requirement.
- FileStream fileStream = new FileStream("sample.pdf", FileMode.OpenOrCreate, FileAccess.ReadWrite);
- //Saves the PDF file
- pdfDocument.Save(fileStream);
- pdfDocument.Close();
- fileStream.Close();
- document.Close();
-}
-```
-
-Get the complete working sample in this [`link`](https://github.com/SyncfusionExamples/Export-document-as-PDF-in-Document-Editor/).
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/get-current-word.md b/ej2-javascript/document-editor/how-to/get-current-word.md
deleted file mode 100644
index 011a7cec1..000000000
--- a/ej2-javascript/document-editor/how-to/get-current-word.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Get current word in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Get current word in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Get current word
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Get current word in ##Platform_Name## Document editor control
-
-You can get the current word or paragraph content from the JavaScript Document Editor component as plain text and SFDT (rich text).
-
-## Select and get the word in current cursor position
-
-You can use [`selectCurrentWord`](../../api/document-editor/selection#selectcurrentword) API in selection module to select the current word at cursor position and use [`text`](../../api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the selected content as plain text from JavaScript Document Editor component.
-
-The following example code illustrates how to select and get the current word as plain text.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To select the current word in document
-container.documentEditor.selection.selectCurrentWord();
-
-// To get the selected content as text
-let selectedContentText: string = container.documentEditor.selection.text;
-// To get the selected content as SFDT (rich text)
-let selectedContentSFDT: string = container.documentEditor.selection.sfdt;
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-To get the bookmark content as SFDT (rich text), please check this [`link`](../../document-editor/how-to/get-the-selected-content/#get-the-selected-content-as-sfdt-rich-text)
-
-## Select and get the paragraph in current cursor position
-
-You can use [`selectParagraph`](../../api/document-editor/selection/#selectparagraph) API in selection module to select the current paragraph at cursor position and use [`text`](../../api/document-editor/selection/#text-code-classlanguage-textstringcode) API or [`sfdt`](../../api/document-editor/selection/#sfdt-code-classlanguage-textstringcode) API to get the selected content as plain text or SFDT from JavaScript Document Editor component.
-
-The following example code illustrates how to select and get the current paragraph as SFDT.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To select the current paragraph in document
-container.documentEditor.selection.selectParagraph();
-
-// To get the selected content as text
-let selectedContentText: string = container.documentEditor.selection.text;
-// To get the selected content as SFDT (rich text)
-let selectedContentSFDT: string = container.documentEditor.selection.sfdt;
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/get-the-selected-content.md b/ej2-javascript/document-editor/how-to/get-the-selected-content.md
deleted file mode 100644
index a3cff6404..000000000
--- a/ej2-javascript/document-editor/how-to/get-the-selected-content.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-layout: post
-title: Get the selected content in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Get the selected content in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Get the selected content
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Get the selected content in ##Platform_Name## Document editor control
-
-You can get the selected content from the JavaScript Document Editor component as plain text and SFDT (rich text).
-
-## Get the selected content as plain text
-
-You can use [`text`](../../api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the selected content as plain text from JavaScript Document Editor component.
-
-The following example code illustrates how to add search in google option in context menu for the selected text.
-
-```ts
-import { DocumentEditorContainer, Toolbar, CustomContentMenuEventArgs } from '@syncfusion/ej2-documenteditor';
-import { MenuItemModel } from '@syncfusion/ej2-navigations';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-
-//Creating custom menu items
-let menuItems: MenuItemModel[] = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-de-ctnr-find'
- }];
-//Adding custom options
-container.documentEditor.contextMenu.addCustomMenu(menuItems, false);
-//To handle contextmenu select event
-container.documentEditor.customContextMenuSelect = (args: CustomContentMenuEventArgs): void => {
- let item: string = args.id;
- let id: string = container.documentEditor.element.id;
- switch (item) {
- case id + 'search_in_google':
- // To get the selected content as plain text
- let searchContent: string = container.documentEditor.selection.text;
- if (!container.documentEditor.selection.isEmpty && /\S/.test(searchContent)) {
- window.open('http://google.com/search?q=' + searchContent);
- }
- break;
- }
-};
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-You can add the following custom options using this API,
-
-* Save or export the selected text as text file.
-* Search the selected text in Google or other search engines.
-* Show synonyms for the selected word in context menu and replace with selected synonym using the setter method of same API.
-
-## Get the selected content as SFDT (rich text)
-
-{% if page.publishingplatform == "typescript" %}
-
-You can use [`sfdt`](../../api/document-editor/selection/#sfdt-code-classlanguage-textstringcode) API to get the selected content as rich text from TypeScript Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-You can use [`sfdt`](../../api/document-editor/selection/#sfdt-code-classlanguage-textstringcode) API to get the selected content as rich text from JavaScript Document Editor component.
-
-{% endif %}
-
-The following example code illustrates how to get the content of a bookmark and export it as SFDT.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To select all the content in document
-container.documentEditor.selection.selectAll();
-// Insert bookmark to selected content
-container.documentEditor.editor.insertBookmark('Bookmark1');
-//Select the bookmark
-container.documentEditor.selection.selectBookmark('Bookmark1');
-// To get the selected content as sfdt
-let selectedContent: string = container.documentEditor.selection.sfdt;
-// Insert the sfdt content in cursor position using paste API
-container.documentEditor.editor.paste(selectedContent);
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-You can add the following custom options using this API,
-
-* Save or export the selected content as SFDT file.
-* Get the content of a bookmark in Word document as SFDT by selecting a bookmark using [`selectbookmark`](../../api/document-editor/selection/#selectbookmark) API.
-* Create template content that can be inserted to multiple documents in cursor position using [`paste`](../../api/document-editor/editor/#paste) API.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/hide-tool-bar-and-properties-pane.md b/ej2-javascript/document-editor/how-to/hide-tool-bar-and-properties-pane.md
deleted file mode 100644
index 75263328b..000000000
--- a/ej2-javascript/document-editor/how-to/hide-tool-bar-and-properties-pane.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: post
-title: Hide tool bar and properties pane in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Hide tool bar and properties pane in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Hide tool bar and properties pane
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Hide tool bar and properties pane in ##Platform_Name## Document editor control
-
-**Document editor container** provides the main document view area along with the built-in toolbar and properties pane.
-
-**Document editor** provides just the main document view area. Here, the user can compose, view, and edit the Word documents. You may prefer to use this component when you want to design your own UI options for your application.
-
-## Hide the properties pane
-
-By default, Document editor container has built-in properties pane which contains options for formatting text, table, image and header and footer. You can use [`showPropertiesPane`](../../api/document-editor-container/documentEditorContainerModel/#showpropertiespane) API in [`DocumentEditorContainer`](../../api/document-editor-container/documentEditorContainerModel/) to hide the properties pane.
-
-The following example code illustrates how to hide the properties pane.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px', showPropertiesPane:false });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
->Note: Positioning and customizing the properties pane in Document editor container is not possible. Instead, you can hide the exiting properties pane and create your own pane using public API's.
-
-## Hide the toolbar
-
-You can use [`enableToolbar`](../../api/document-editor-container/documentEditorContainerModel/#enabletoolbar) API in [`DocumentEditorContainer`](../../api/document-editor-container/documentEditorContainerModel/) to hide the existing toolbar.
-
-The following example code illustrates how to hide the existing toolbar.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: false, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-## See Also
-
-* [How to customize the toolbar](../../document-editor/how-to/customize-tool-bar)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/insert-page-number-and-navigate-to-page.md b/ej2-javascript/document-editor/how-to/insert-page-number-and-navigate-to-page.md
deleted file mode 100644
index 0b6354c9e..000000000
--- a/ej2-javascript/document-editor/how-to/insert-page-number-and-navigate-to-page.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-layout: post
-title: Page number and navigate Page in Document editor control | Syncfusion
-description: Learn here all about Insert page number and navigate to page in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Insert page number and navigate to page
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Insert page number and navigate to page in ##Platform_Name## Document editor control
-
-You can insert page number and navigate to specific page in JavaScript Document Editor component by following ways.
-
-## Insert page number
-
-You can use [`insertPageNumber`](../../api/document-editor/editor/#insertpagenumber) API in editor module to insert the page number in current cursor position. By default, Page number will insert in Arabic number style. You can change it, by providing the number style in parameter.
-
->Note: Currently, Documenteditor have options to insert page number at current cursor position.
-
-The following example code illustrates how to insert page number in header.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To move the selection to header
-container.documentEditor.selection.goToHeader();
-// Insert page number in the current cursor position
-container.documentEditor.editor.insertPageNumber();
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Also, you use [`insertField`](../../api/document-editor/editor/#insertfield) API in Editor module to insert the Page number in current position
-
-```ts
-//Current page number
-container.documentEditor.editor.insertField('PAGE \* MERGEFORMAT', '1');
-```
-
-## Get page count
-
-You can use [`pageCount`](../../api/document-editor/#pagecount) API to gets the total number of pages in Document.
-
-The following example code illustrates how to get the number of pages in Document.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To get the total number of pages
-let pageCount : number=container.documentEditor.pageCount;
-```
-
-
-## Navigate to specific page
-
-You can use [`goToPage`](../../api/document-editor/selection/#gotopage) API in Selection module to move selection to the start of the specified page number.
-
-The following example code illustrates how to move selection to specific page.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-let sfdt: any = {sfdt: 'UEsDBAoAAAAIAPaKZVrvd0ouRgMAAPguAAAEAAAAc2ZkdO1ZW2/aMBj9K8h7RRVJICF5mzqhPUxTpT1WPDiJTaw5lznuaIv63+dbuBRC05ZLNJmXY+LY5/g7nw3ytwJlxUlOntEvnHIQcfaAhqBGCYjuV0BgxUC0AtUSRL7jDkGVgSgIRYPmoiGQGeQGY4NZCiLPHwJsMMUViEYCS6QbMdEgmMBPtLyDCwSGABUYRGI4lii6GWkQKSS4AJEjEGmsFkUtJvjKYEwSMb5ISlqrHvRnqZDGPFFDdc/9/EWQqtVVWC4tTlktkQtZK9FHuUa20Bib75mGvxIE1ryQwkuWQyp4qdSpOhI9q1gdhrRG4glRbPvPORWUABNWc/AiZJ1VkdFhaSyNpbE0lsbSWBpLY2ksjaWxNJbG0lgaS2NpLM1/QdN+4VajpCxSe+NmaSyNpbE0H6KZi4G6Z74ueZiDVr1iWrh+BpHjiIZ4BdxCSmJGxLQPqiJTc10CggoyXaYRQ+SZrQfJ1tYwmGxmxnCnC+MCo60nQumn4kBJYQpPGrFBrsXGtQKowZScqFlQSdcVLqP2t2Rt2sti3V4mTcltE2hcG0UcU91I+VIX0UwlC5niWCbEArH22iDONX+lIc14rpVgrAUmZV6ZyD/x2KiUcQCyCvdlpj5AZcGT+g3dyQUz+eei+jqdiscNhUxeyfgdwZQUi4FzKtI3rZSlzW0vb0ZB6Pi+PxkFgTsKx8Guuc5+wU9nur+b6YMfZJFx6YyKrzubjEMfvErezUu7KWye63Ll1o7cDtDgNoMMvBHF5iWuc+Aicr8hDB8oH9xBBhcMVtlgVhZ8ra2le0fjy+uFuBdLh/dlg9uWDd5ls8Htkg1uezZ418qGRpvXU4O9NoPdoxFzZl7geyc02OtisNdu8PnkdjR43FODx/sGk+aH+ZI7eNzF4PEhg88tt6PBk54aPDmwgy/o66SLr5ODG/eqdvo9tdN/l50nP4f9Lnb677TzAsdv0FM7g48dvyf3Nejia/DR4/cCBk97avC07Q/U6GZyNGae+pzQ4mkXi6ftf6HOKbijyWFPTQ6P7eLruB12cTs8vqH7YDtip/H88HXV/qXMTkBV7IyKRtSsLPn1RRkV8gqSqmtJMRnVmOQamfn6qJHki1pN+w9QSwECFAAKAAAACAD2imVa73dKLkYDAAD4LgAABAAAAAAAAAAAAAAAAAAAAAAAc2ZkdFBLBQYAAAAAAQABADIAAABoAwAAAAA=',};
-container.documentEditor.open(sfdt);
-// To move selection to page number 2
-container.documentEditor.selection.goToPage(2);
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/insert-text-in-current-position.md b/ej2-javascript/document-editor/how-to/insert-text-in-current-position.md
deleted file mode 100644
index 4d7598589..000000000
--- a/ej2-javascript/document-editor/how-to/insert-text-in-current-position.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-layout: post
-title: How to insert text in ##Platform_Name## Document editor | Syncfusion
-description: Learn here all about Insert text in current position in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Insert text in current position
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Insert text in current position in ##Platform_Name## Document editor
-
-You can insert the text, paragraph and rich-text content in JavaScript Document Editor component.
-
-## Insert text in current cursor position
-
-You can use [`insertText`](../../api/document-editor/editor/#inserttext) API in editor module to insert the text in current cursor position.
-
-The following example illustrates how to add the text in current selection.
-
-```ts
- let hostUrl: string = 'https://services.syncfusion.com/js/production/';
- let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
- DocumentEditorContainer.Inject(Toolbar);
- container.serviceUrl = hostUrl + 'api/documenteditor/';
- container.appendTo('#container');
-
- document.getElementById('insert').addEventListener('click',function(){
- // It will insert the provided text in current selection
- container.documentEditor.editor.insertText('Syncfusion');
- });
-```
-
-Please check below gif which illustrates how to insert text in current cursor position on button click:
-
-
-
-## Insert paragraph in current cursor position
-
-To insert new paragraph at current selection, you can can use [`insertText`](../../api/document-editor/editor/#inserttext) API with parameter as `\r\n` or `\n`.
-
-The following example code illustrates how to add the new paragraph in current selection.
-
-```ts
-// It will add the new paragraph in current selection
-container.documentEditor.editor.insertText('\n');
-```
-
-## Insert the rich-text content
-
-To insert the HTML content, you have to convert the HTML content to SFDT Format using [`web service`](../../document-editor/web-services-overview). Then use [`paste`](../../api/document-editor/editor/#paste) API to insert the sfdt at current cursor position.
-
->Note: HTML string should be well formatted. [`DocIO`](https://help.syncfusion.com/file-formats/docio/html) support only well formatted XHTML.
-
-The following example illustrates how to insert the HTML content at current cursor position.
-
-* Send the HTML content to server side for SFDT conversion. Refer to the following example to send the HTML content to server side and inserting it in current cursor position.
-
-```ts
-import {
- DocumentEditorContainer,
- Toolbar,
-} from '@syncfusion/ej2-documenteditor';
-
-let hostUrl: string =
- 'https://services.syncfusion.com/js/production/';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = hostUrl + 'api/documenteditor/';
-container.appendTo('#container');
-
-let htmltags: string =
- "
The img element
";
-document.getElementById('export').addEventListener('click', () => {
- let http: XMLHttpRequest = new XMLHttpRequest();
- http.open('POST', 'http://localhost:5000/api/documenteditor/LoadString');
- http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
- http.responseType = 'json';
- http.onreadystatechange = function () {
- if (http.readyState === 4) {
- if (http.status === 200 || http.status === 304) {
- // Insert the sfdt content in cursor position using paste API
- container.documentEditor.editor.paste(http.response);
- } else {
- alert('failed;');
- }
- }
- };
-
- let htmlContent: any = { content: htmltags };
- http.send(JSON.stringify(htmlContent));
-});
-```
-
-* Please refer the following code example for server-side web implementation for HTML conversion using DocumentEditor.
-
-```c#
-//API controller for the conversion.
-[HttpPost]
-public string LoadString([FromBody]InputParameter data)
-{
- // You can also load HTML file/string from server side.
- Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.LoadString(data.content, FormatType.Html); // Convert the HTML to SFDT format.
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- return json;
-}
-
-public class InputParameter
-{
- public string content {get; set; }
-}
-```
-
->Note: The above example illustrates inserting HTML content. Similarly, you can insert any rich-text content by converting any of the supported file formats (DOCX, DOC, WordML, HTML, RTF) to SFDT.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/insert-text-or-image-in-table-programmatically.md b/ej2-javascript/document-editor/how-to/insert-text-or-image-in-table-programmatically.md
deleted file mode 100644
index 43fa73ff1..000000000
--- a/ej2-javascript/document-editor/how-to/insert-text-or-image-in-table-programmatically.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Insert text or image in table programmatically in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Insert text or image in table programmatically in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Insert text or image in table programmatically
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Insert text or image in table programmatically in ##Platform_Name## Document editor control
-
-Using Document editor API's, you can insert [`text`](../../document-editor/how-to/insert-text-in-current-position/#insert-text-in-current-cursor-position) or [`image`](../../document-editor/image/#images) in [`table`](../../document-editor/table/#create-a-table) programmatically based on your requirement.
-
-Use [`selection`](../../document-editor/how-to/move-selection-to-specific-position/#selects-content-based-on-start-and-end-hierarchical-index) API's to navigate between rows and cells.
-
-The following example illustrates how to create 2*2 table and then add text and image programmatically.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert the table in cursor position
-container.documentEditor.editor.insertTable(2,2);
-// To insert the image at table first cell
-container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
-// To move the cursor to next cell
-moveCursorToNextCell();
-// To insert the image at table second cell
-container.documentEditor.editor.insertImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 //8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
-// To move the cursor to next row
-moveCursorToNextRow();
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Text');
-// To move the cursor to next cell
-moveCursorToNextCell();
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Text');
-
-function moveCursorToNextCell() {
-// To get current selection start offset
-var startOffset=container.documentEditor.selection.startOffset;
-// Increasing cell index to consider next cell
-var cellIndex= parseInt(startOffset.substring(6, 7)) + 1;
-// Changing start offset
-startOffset = startOffset.substring(0, 6) + cellIndex.toString() + startOffset.substring(7, startOffset.length);
-// Navigating selection using select method
-container.documentEditor.selection.select(startOffset, startOffset);
-}
-
-function moveCursorToNextRow() {
-// To get current selection start offset
-var startOffset=container.documentEditor.selection.startOffset;
-// Increasing row index to consider next row
-var rowIndex= parseInt(startOffset.substring(4, 5)) + 1;
-var cellIndex= parseInt(startOffset.substring(6,7)) != 0? parseInt(startOffset.substring(6,7)) - 1:0;
-// Changing start offset
-startOffset = startOffset.substring(0, 4) + rowIndex.toString() + startOffset.substring(5, 6) + cellIndex + startOffset.substring(7, startOffset.length);
-// Navigating selection using select method
-container.documentEditor.selection.select(startOffset, startOffset);
-}
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-The output will be like below.
-
diff --git a/ej2-javascript/document-editor/how-to/move-selection-to-specific-position.md b/ej2-javascript/document-editor/how-to/move-selection-to-specific-position.md
deleted file mode 100644
index ce86b5fbc..000000000
--- a/ej2-javascript/document-editor/how-to/move-selection-to-specific-position.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-layout: post
-title: Move to specific position in ##Platform_Name## Document editor | Syncfusion
-description: Learn here all about Move selection to specific position in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Move selection to specific position
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Move selection to specific position in ##Platform_Name## Document editor
-
-Using [`select`](../../api/document-editor/selection/#select) API in selection module, You can set cursor position to anywhere in the document.
-
-## Selects content based on start and end hierarchical index
-
-Hierarchical index will be in below format.
-
-`sectionIndex;blockIndex;offset`
-
-The following code snippet illustrate how to select using hierarchical index.
-
-```ts
-// Selection will occur between provided start and end offset
-documentEdContainerIns.documentEditor.editor.insertText("Welcome");
-// The below code will select the letters “We” from inserted text “Welcome”
-documentEdContainerIns.documentEditor.selection.select("0;0;0", "0;0;2");
-```
-
-The following table illustrates about Hierarchical index in detail.
-
-| Element |Hierarchical Format | Explanation |
-|-----------------|-------------|----|
-|Move selection to Paragraph |sectionIndex;blockIndex;offset **Ex:** 0;0;0|It moves the cursor to the start of paragraph.|
-|Move selection to Table|sectionIndex;tableIndex;rowIndex;cellIndex;blockIndex;offset **Ex:** 0;0;0;0;1;0|It moves the cursor to the second paragraph which is inside first row and cell of table.|
-|Move selection to header|pageIndex;H;sectionIndex;blockIndex;offset **Ex:** 1;H;0;0;0|It moves cursor to the header in second page.|
-|Move selection to Footer|pageIndex;F;sectionIndex;blockIndex;offset **Ex:** 1;F;0;0;0|It moves cursor to the footer in second page.|
-
-## Get the selection start and end hierarchical index
-
-Using [`startOffset`](../../api/document-editor/selection/#startoffset), you can get start hierarchical index which denotes the start index of current selection. Similarly, using [`endOffset`](../../api/document-editor/selection/#endoffset), you can get end hierarchical index which denotes the end index of current selection.
-
-The following code snippet illustrate how to get the selection start and end offset on selection changes in document.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let hostUrl: string = 'https://services.syncfusion.com/js/production/';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = hostUrl + 'api/documenteditor/';
-container.appendTo('#container');
-// Event gets triggered on selection change in document
-container.selectionChange = (): void => {
-//Get the start index of current selection
-let startOffset:string = container.documentEditor.selection.startOffset;
-//Get the end index of current selection
-let endOffset:string = container.documentEditor.selection.endOffset;
-};
-```
-
-Document editor have [`selectionChange`](../../api/document-editor/#selectionchange) event which is triggered whenever the selection changes in Document.
-
-## Selects the content based on left and top position
-
-Here, you can specify the [`selection settings`](../../api/document-editor/selectionSettings/) to select the content based on left and top position.
-
-x denotes the left position and y denotes the top position and extend denotes whether to extend or update selection.
-
-Please check below code sample for reference.
-
-```ts
-Container.documentEditor.selection.select({ x: 188.4814208984375 , y: 662.00005, extend: true });
-```
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/open-default-document.md b/ej2-javascript/document-editor/how-to/open-default-document.md
deleted file mode 100644
index d704bf15b..000000000
--- a/ej2-javascript/document-editor/how-to/open-default-document.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-layout: post
-title: Open default document in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Open default document in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Open default document
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open default document in ##Platform_Name## Document editor control
-
-In this article, we are going to see how to open a default document when DocumentEditor & DocumentEditorContainer is initialized.
-
-## Opening a default document in DocumentEditor
-
-By default, Document Editor will open blank document. You can use [`open`](../../api/document-editor/#open) API in Document Editor to open the sfdt content.
-
-Document editor have [`created`](../../api/document-editor/#created) event which gets triggered once Document editor control created. So, if you want to open the document by default, you can use [`open`](../../api/document-editor/#open) and [`created`](../../api/document-editor/#created) API.
-
-The following example illustrates how to open the default SFDT content once Document editor control gets created.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/open-default-document-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-default-document-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/open-default-document-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-default-document-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-default-document-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/open-default-document-cs1" %}
-{% endif %}
-
-## Opening a default document in DocumentEditorContainer
-
-By default, Document Editor Container will open a blank document. You can use [`open`](../../api/document-editor/#open) API in Document Editor to open the SFDT content.
-
-Document editor Container have [`created`](../../api/document-editor-container/#created) event which gets triggered once Document editor container control created. So, if you want to open the document by default, you can use [`open`](../../api/document-editor/#open) and [`created`](../../api/document-editor-container/#created) API.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/open-default-document-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-default-document-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/open-default-document-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-default-document-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-default-document-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/open-default-document-cs2" %}
-{% endif %}
diff --git a/ej2-javascript/document-editor/how-to/open-document-by-address.md b/ej2-javascript/document-editor/how-to/open-document-by-address.md
deleted file mode 100644
index 4234328a4..000000000
--- a/ej2-javascript/document-editor/how-to/open-document-by-address.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: post
-title: Open document by address in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Open document by address in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Open document by address
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document by address in ##Platform_Name## Document editor control
-
-## How to open a document from URL in DocumentEditor
-
-In this article, we are going to see how to open a document from URL in DocumentEditor
-
-please refer below example for client-side code
-
-```ts
-//Initialize Document Editor Container component.
-let container: DocumentEditorContainer = new DocumentEditorContainer();
-
-container.appendTo('#DocumentEditorContainer');
-
-document.getElementById('import').addEventListener('click', () => {
- let http: XMLHttpRequest = new XMLHttpRequest();
- //add your url in which you want to open document inside the ""
- let content = { fileUrl: "" };
- let baseurl: string = "/api/documenteditor/ImportFileURL";
- http.open("POST", baseurl, true);
- http.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
- http.onreadystatechange = () => {
- if (http.readyState === 4) {
- if (http.status === 200 || http.status === 304) {
- //open the SFDT text in Document Editor
- container.documentEditor.open(http.responseText);
- }
- }
- };
- http.send(JSON.stringify(content));
-});
-```
-
-please refer below example for server-side code
-
-```c#
- [AcceptVerbs("Post")]
- public string ImportFileURL([FromBody]FileUrlInfo param)
- {
- try {
- using(WebClient client = new WebClient())
- {
- MemoryStream stream = new MemoryStream(client.DownloadData(param.fileUrl));
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Dispose();
- return json;
- }
- }
- catch (Exception) {
- return "";
- }
- }
- public class FileUrlInfo {
- public string fileUrl { get; set; }
- public string Content { get; set; }
- }
-```
diff --git a/ej2-javascript/document-editor/how-to/override-the-keyboard-shortcuts.md b/ej2-javascript/document-editor/how-to/override-the-keyboard-shortcuts.md
deleted file mode 100644
index be7c960cc..000000000
--- a/ej2-javascript/document-editor/how-to/override-the-keyboard-shortcuts.md
+++ /dev/null
@@ -1,46 +0,0 @@
----
-layout: post
-title: Override the keyboard shortcuts in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Override the keyboard shortcuts in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Override the keyboard shortcuts
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Override the keyboard shortcuts in ##Platform_Name## Document editor control
-
-Document Editor triggers the [`keyDown`](../../api/document-editor#keydown) event every time when any key is entered and provides an instance of [`DocumentEditorKeyDownEventArgs`](../../api/document-editor/documentEditorKeyDownEventArgs/). You can use the [`isHandled`](../../api/document-editor/documentEditorKeyDownEventArgs#ishandled) property to override the keyboard shortcut behavior.
-
-## Preventing default keyboard shortcut
-
-The following code shows how to prevent the `CTRL + C` keyboard shortcut for copying selected content in Document Editor.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/prevent-keyboard-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/prevent-keyboard-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/prevent-keyboard-cs2" %}
-
-## Override or define the keyboard shortcut
-
-Override or define a new keyboard shortcut behavior instead of preventing the keyboard shortcut.
-
-For example, `Ctrl + S` keyboard shortcut saves the document in SFDT format by default, and there is no behavior for `Ctrl + Alt + S`. The following code demonstrates how to override the `Ctrl + S` shortcut to save a document in DOCX format and define `Ctrl + Alt + S` to save the document in SFDT format.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/override-keyboard-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/override-keyboard-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/override-keyboard-cs2" %}
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/read-only-default.md b/ej2-javascript/document-editor/how-to/read-only-default.md
deleted file mode 100644
index a9ceaace3..000000000
--- a/ej2-javascript/document-editor/how-to/read-only-default.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: post
-title: Read only default in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Read only default in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Read only default
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Read only default in ##Platform_Name## Document editor control
-
-In this article, we are going to see how to open a document in read only mode by default in DocumentEditor & DocumentEditorContainer.
-
-## Opening a document in read only mode by default in DocumentEditor
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/read-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/read-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/read-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/read-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/read-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/read-cs1" %}
-{% endif %}
-
-## Opening a document in ready only mode by default in DocumentEditorContainer
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/read-container-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/read-container-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/read-container-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/read-container-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/read-container-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/read-container-cs1" %}
-{% endif %}
-
->Note: You can use the [`restrictEditing`](../../api/document-editor-container#restrictediting) in DocumentEditorContainer and [`isReadOnly`](../../api/document-editor/#isreadonly) in DocumentEditor based on your requirement to change component to read only mode.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/resize-document-editor.md b/ej2-javascript/document-editor/how-to/resize-document-editor.md
deleted file mode 100644
index 28a4c1a3d..000000000
--- a/ej2-javascript/document-editor/how-to/resize-document-editor.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-layout: post
-title: Resize document editor in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Resize document editor in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Resize document editor
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Resize document editor in ##Platform_Name## Document editor control
-
-In this article, we are going to see how to change height and width of Documenteditor.
-
-## Change height of Document Editor
-
-DocumentEditorContainer initially render with default height. You can change height of documenteditor using [`height`](../../api/document-editor-container/documentEditorContainerModel/#height) property, the value which is in pixel.
-
-The following example code illustrates how to change height of Document Editor.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true, height: "590px"
-});
-container.appendTo('#DocumentEditor');
-```
-
-Similarly, you can use [`height`](../../api/document-editor#height) property for DocumentEditor also.
-
-## Change width of Document Editor
-
-DocumentEditorContainer initially render with default width. You can change width of documenteditor using [`width`](../../api/document-editor-container/documentEditorContainerModel/#width) property, the value which is in percent.
-
-The following example code illustrates how to change width of Document Editor.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true, width: "100%"
-});
-container.appendTo('#DocumentEditor');
-```
-
-Similarly, you can use [`width`](../../api/document-editor#width) property for DocumentEditor also.
-
-## Resize Document Editor
-
-Using [`resize`](../../api/document-editor-container#resize) method, you change height and width of Document editor.
-
-The following example code illustrates how to fit Document Editor to browser window size.
-
-```ts
-import {
- DocumentEditorContainer,
- Toolbar,
-} from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl =
- 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.created = (): void => {
- setInterval(() => {
- updateDocumentEditorSize();
- }, 100);
- //Adds event listener for browser window resize event.
- window.addEventListener('resize', onWindowResize);
-};
-container.appendTo('#container');
-
-function onWindowResize() {
- //Resizes the document editor component to fit full browser window automatically whenever the browser resized.
- updateDocumentEditorSize();
-}
-function updateDocumentEditorSize() {
- //Resizes the document editor component to fit full browser window.
- var windowWidth = window.innerWidth;
- var windowHeight = window.innerHeight;
- container.resize(windowWidth, windowHeight);
-}
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/retrieve-the-bookmark-content-as-text.md b/ej2-javascript/document-editor/how-to/retrieve-the-bookmark-content-as-text.md
deleted file mode 100644
index a0e27e662..000000000
--- a/ej2-javascript/document-editor/how-to/retrieve-the-bookmark-content-as-text.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: post
-title: Retrieve the bookmark content as text in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Retrieve the bookmark content as text in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Retrieve the bookmark content as text
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Retrieve the bookmark content as text in ##Platform_Name## Document editor control
-
-You can get the bookmark or whole document content from the JavaScript Document Editor component as plain text and SFDT (rich text).
-
-## Get the bookmark content as plain text
-
-You can [`selectBookmark`](../../document-editor/bookmark#select-bookmark) API to navigate to the bookmark and use [`text`](../../api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the bookmark content as plain text from JavaScript Document Editor component.
-
-The following example code illustrates how to get the bookmark content as plain text.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To select all the content in document
-container.documentEditor.selection.selectAll();
-// Insert bookmark to selected content
-container.documentEditor.editor.insertBookmark('Bookmark1');
-
-// Provide your bookmark name to navigate to specific bookmark
-container.documentEditor.selection.selectBookmark('Bookmark1');
-
-// To get the selected content as text
- let selectedContent: string = container.documentEditor.selection.text;
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-To get the bookmark content as SFDT (rich text), please check this [`link`](../../document-editor/how-to/get-the-selected-content/#get-the-selected-content-as-sfdt-rich-text)
-
-## Get the whole document content as text
-
-You can use [`text`](../../api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the whole document content as plain text from JavaScript Document Editor component.
-
-The following example code illustrates how to get the whole document content as plain text.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To select all the content in document
-container.documentEditor.selection.selectAll();
-
-// To get the content as text
- let selectedContent: string = container.documentEditor.selection.text;
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-## Get the whole document content as SFDT(rich text)
-
-You can use [`serialize`](../../api/document-editor/#serialize) API to get the whole document content as SFDT string from JavaScript Document Editor component.
-
-The following example code illustrates how to get the whole document content as SFDT.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-
-// To get the content as SFDT
- let selectedContent: string = container.documentEditor.serialize();
-```
-
-
-## Get the header content as text
-
-You can use [`goToHeader`](../../api/document-editor/selection/#gotoheader) API to navigate the selection to the header and then use [`text`](../../api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the content as plain text.
-
-The following example code illustrates how to get the header content as plain text.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-
-container.appendTo('#container');
-// To navigate the selection to header
-container.documentEditor.selection.goToHeader();
-// To insert text in cursor position
-container.documentEditor.editor.insertText('Document editor');
-// To select all the content in document
-container.documentEditor.selection.selectAll();
-
-// To get the selected content as text
- let selectedContent: string = container.documentEditor.selection.text;
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Similarly, you can use [`goToFooter`](../../api/document-editor/selection/#gotofooter) API to navigate the selection to the footer and then use [`text`](../../api/document-editor/selection/#text-code-classlanguage-textstringcode) API to get the content as plain text.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/set-default-format-in-document-editor.md b/ej2-javascript/document-editor/how-to/set-default-format-in-document-editor.md
deleted file mode 100644
index 82ed41262..000000000
--- a/ej2-javascript/document-editor/how-to/set-default-format-in-document-editor.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-layout: post
-title: Set default format in document editor in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Set default format in document editor in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Set default format in document editor
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Set default format in document editor in ##Platform_Name## Document editor control
-
-You can set the default character format, paragraph format and section format in Document editor.
-
-## Set the default character format
-
-You can use [`setDefaultCharacterFormat`](../../api/document-editor/#setdefaultcharacterformat) method to set the default character format. For example, Document editor default font size is 11 and you can change it as any valid value.
-
-The following example code illustrates how to change the default font size in Document editor.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ height: "590px" });
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-DocumentEditorContainer.Inject(Toolbar);
-// Default font size set as 20
-container.setDefaultCharacterFormat({ fontSize: 20 });
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Similarly, you can change the required [`CharacterFormatProperties`](../../api/document-editor/characterFormatProperties) default value.
-
-The following example code illustrates how to change other character format default value in Document editor.
-
-```ts
-import { CharacterFormatProperties, DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ height: "590px" });
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-DocumentEditorContainer.Inject(Toolbar);
-// Set default value
-let defaultCharacterFormat: CharacterFormatProperties = {
- bold: false,
- italic: false,
- baselineAlignment: 'Normal',
- underline: 'None',
- fontColor: "#000000",
- fontFamily: 'Algerian',
- fontSize: 12
-};
-container.setDefaultCharacterFormat(defaultCharacterFormat);
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-## Set the default paragraph format
-
-You can use [`setDefaultParagraphFormat`](../../api/document-editor/#setdefaultparagraphformat) API to set the default paragraph format. You can change the required [`ParagraphFormatProperties`](../../api/document-editor/paragraphFormatProperties) default value.
-
-The following example code illustrates how to change the paragraph format(before spacing, line spacing etc.,) default value in Document editor.
-
-```ts
-import { ParagraphFormatProperties, DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ height: "590px" });
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-DocumentEditorContainer.Inject(Toolbar);
-
-let defaultParagraphFormat: ParagraphFormatProperties = {
- beforeSpacing: 8,
- lineSpacing: 1.5,
- leftIndent: 24,
- textAlignment: "Center"
-};
-container.setDefaultParagraphFormat(defaultParagraphFormat);
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-## Set the default section format
-
-You can use [`setDefaultSectionFormat`](../../api/document-editor/#setdefaultsectionformat) API to set the default section format. You can change the required [`SectionFormatProperties`](../../api/document-editor/sectionFormatProperties) default value.
-
-The following example code illustrates how to change the section format(header and footer distance, page width and height, etc.,) default value in Document editor.
-
-```ts
-import { SectionFormatProperties, DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ height: "590px" });
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-DocumentEditorContainer.Inject(Toolbar);
-
-let defaultSectionFormat: SectionFormatProperties = {
- pageWidth: 500,
- pageHeight: 800,
- headerDistance: 56,
- footerDistance: 48,
- leftMargin: 12,
- rightMargin: 12,
- topMargin: 0,
- bottomMargin: 0
-
-};
-container.setDefaultSectionFormat(defaultSectionFormat);
-container.appendTo('#container');
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/how-to/show-hide-spinner.md b/ej2-javascript/document-editor/how-to/show-hide-spinner.md
deleted file mode 100644
index 12e3c4352..000000000
--- a/ej2-javascript/document-editor/how-to/show-hide-spinner.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-layout: post
-title: Show hide spinner in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Show hide spinner in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Show hide spinner
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Show hide spinner in ##Platform_Name## Document editor control
-
-Using [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started/#create-the-spinner-globally) component, you can show/hide spinner while opening document in DocumentEditor .
-
-Example code snippet to show/hide spinner
-
-```ts
-// showSpinner() will make the spinner visible
-showSpinner(document.getElementById('container'));
-
-// hideSpinner() method used hide spinner
-hideSpinner(document.getElementById('container'));
-```
-
-Refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/spinner-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/spinner-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/spinner-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/spinner-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/spinner-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/spinner-cs1" %}
-{% endif %}
-
->Note: In above example, we have used setInterval to hide spinner, just for demo purpose.
diff --git a/ej2-javascript/document-editor/image.md b/ej2-javascript/document-editor/image.md
deleted file mode 100644
index 8f28414cb..000000000
--- a/ej2-javascript/document-editor/image.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-layout: post
-title: Image in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Image in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Image
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Image in ##Platform_Name## Document editor control
-
-Document Editor supports common raster format images like PNG, BMP, JPEG, SVG and GIF. You can insert an image file or online image in the document using the [`insertImage()`](../api/document-editor/editor/#insertimage) method. Refer to the following sample code.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/image-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/image-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/image-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/image-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/image-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/image-cs1" %}
-{% endif %}
-
-N> 1. Image files will be internally converted to base64 string. Whereas, online images are preserved as URL. N> 2. EMF and WMF images can't be inserted, but these types of images will be preserved in Document Editor when using ASP.NET MVC Web API.
-
-## Alternate text
-
-Document Editor expose API to get or set the alternate text of the selected image. Refer to the following sample code.
-
-```ts
-documenteditor.selection.imageFormat.alternateText = 'Adventure Cycle';
-```
-
-## Image resizing
-
-Document Editor provides built-in image resizer that can be injected into your application based on the requirements. This allows you to resize the image by dragging the resizing points using mouse or touch interactions. This resizer appears as follows.
-
-
-
-## Changing size
-
-Document Editor expose API to get or set the size of the selected image. Refer to the following sample code.
-
-```ts
-documenteditor.selection.imageFormat.width = 800;
-documenteditor.selection.imageFormat.height = 800;
-```
-
->Note: Images are stored and processed(read/write) as base64 string in DocumentEditor. The online image URL is preserved as a URL in DocumentEditor upon saving.
-
-## Text wrapping style
-
-Text wrapping refers to how images fit with surrounding text in a document. Please [refer to this page](../document-editor/text-wrapping-style) for more information about text wrapping styles available in Word documents.
-
-## Positioning the image
-
-DocumentEditor preserves the position properties of the image and displays the image based on position properties. It does not support modifying the position properties. Whereas the image will be automatically moved along with text edited if it is positioned relative to the line or paragraph.
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module/)
diff --git a/ej2-javascript/document-editor/images/ApplyBorderToSelectedCell_viaPropertiesPane.gif b/ej2-javascript/document-editor/images/ApplyBorderToSelectedCell_viaPropertiesPane.gif
deleted file mode 100644
index 6fc826460..000000000
Binary files a/ej2-javascript/document-editor/images/ApplyBorderToSelectedCell_viaPropertiesPane.gif and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Column_Limit_Alert.png b/ej2-javascript/document-editor/images/Column_Limit_Alert.png
deleted file mode 100644
index 01d15c9af..000000000
Binary files a/ej2-javascript/document-editor/images/Column_Limit_Alert.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Row_Limit_Alert.png b/ej2-javascript/document-editor/images/Row_Limit_Alert.png
deleted file mode 100644
index 147f9050a..000000000
Binary files a/ej2-javascript/document-editor/images/Row_Limit_Alert.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Shapes_images/shape_resizer.png b/ej2-javascript/document-editor/images/Shapes_images/shape_resizer.png
deleted file mode 100644
index d9df37635..000000000
Binary files a/ej2-javascript/document-editor/images/Shapes_images/shape_resizer.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Shapes_images/supported_shapes.png b/ej2-javascript/document-editor/images/Shapes_images/supported_shapes.png
deleted file mode 100644
index 4c21f90a9..000000000
Binary files a/ej2-javascript/document-editor/images/Shapes_images/supported_shapes.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Shapes_images/textbox_shape.png b/ej2-javascript/document-editor/images/Shapes_images/textbox_shape.png
deleted file mode 100644
index fd46f8d8f..000000000
Binary files a/ej2-javascript/document-editor/images/Shapes_images/textbox_shape.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/behind-textwrapping.PNG b/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/behind-textwrapping.PNG
deleted file mode 100644
index 946af7afb..000000000
Binary files a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/behind-textwrapping.PNG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/infront-textwrapping.PNG b/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/infront-textwrapping.PNG
deleted file mode 100644
index 914a54c14..000000000
Binary files a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/infront-textwrapping.PNG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/inline-textwrapping.PNG b/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/inline-textwrapping.PNG
deleted file mode 100644
index 7551b2dd5..000000000
Binary files a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/inline-textwrapping.PNG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/square-textwrapping.PNG b/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/square-textwrapping.PNG
deleted file mode 100644
index 2339e6cdf..000000000
Binary files a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/square-textwrapping.PNG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/topandbottom-textwrapping.PNG b/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/topandbottom-textwrapping.PNG
deleted file mode 100644
index f6201f314..000000000
Binary files a/ej2-javascript/document-editor/images/Text-Wrapping-Style_images/topandbottom-textwrapping.PNG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/azure_documenteditor.png b/ej2-javascript/document-editor/images/azure_documenteditor.png
deleted file mode 100644
index 13b593416..000000000
Binary files a/ej2-javascript/document-editor/images/azure_documenteditor.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/azure_java_advancedtools.png b/ej2-javascript/document-editor/images/azure_java_advancedtools.png
deleted file mode 100644
index df6a54639..000000000
Binary files a/ej2-javascript/document-editor/images/azure_java_advancedtools.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/azure_java_debugconsole.png b/ej2-javascript/document-editor/images/azure_java_debugconsole.png
deleted file mode 100644
index 049bf3b9d..000000000
Binary files a/ej2-javascript/document-editor/images/azure_java_debugconsole.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/azure_publish.png b/ej2-javascript/document-editor/images/azure_publish.png
deleted file mode 100644
index b5a1eaed9..000000000
Binary files a/ej2-javascript/document-editor/images/azure_publish.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/azure_target.png b/ej2-javascript/document-editor/images/azure_target.png
deleted file mode 100644
index 8a15cd104..000000000
Binary files a/ej2-javascript/document-editor/images/azure_target.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/commentsonly.png b/ej2-javascript/document-editor/images/commentsonly.png
deleted file mode 100644
index f88ce7903..000000000
Binary files a/ej2-javascript/document-editor/images/commentsonly.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/cursor-css.png b/ej2-javascript/document-editor/images/cursor-css.png
deleted file mode 100644
index f9ec9b864..000000000
Binary files a/ej2-javascript/document-editor/images/cursor-css.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/font-family.png b/ej2-javascript/document-editor/images/font-family.png
deleted file mode 100644
index 39bc94df9..000000000
Binary files a/ej2-javascript/document-editor/images/font-family.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/fontColor.png b/ej2-javascript/document-editor/images/fontColor.png
deleted file mode 100644
index 3568c2c6c..000000000
Binary files a/ej2-javascript/document-editor/images/fontColor.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/image.JPG b/ej2-javascript/document-editor/images/image.JPG
deleted file mode 100644
index 8ab357854..000000000
Binary files a/ej2-javascript/document-editor/images/image.JPG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/image.png b/ej2-javascript/document-editor/images/image.png
deleted file mode 100644
index 383c9913c..000000000
Binary files a/ej2-javascript/document-editor/images/image.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/insert_text.gif b/ej2-javascript/document-editor/images/insert_text.gif
deleted file mode 100644
index 183c6c7d9..000000000
Binary files a/ej2-javascript/document-editor/images/insert_text.gif and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/java_azure_uploaded.png b/ej2-javascript/document-editor/images/java_azure_uploaded.png
deleted file mode 100644
index 4235e9d68..000000000
Binary files a/ej2-javascript/document-editor/images/java_azure_uploaded.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/list.JPG b/ej2-javascript/document-editor/images/list.JPG
deleted file mode 100644
index 777649712..000000000
Binary files a/ej2-javascript/document-editor/images/list.JPG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/list.png b/ej2-javascript/document-editor/images/list.png
deleted file mode 100644
index 35794621d..000000000
Binary files a/ej2-javascript/document-editor/images/list.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/note-toolbar.jpg b/ej2-javascript/document-editor/images/note-toolbar.jpg
deleted file mode 100644
index f88dc8598..000000000
Binary files a/ej2-javascript/document-editor/images/note-toolbar.jpg and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/notes-option.jpg b/ej2-javascript/document-editor/images/notes-option.jpg
deleted file mode 100644
index eecbbb249..000000000
Binary files a/ej2-javascript/document-editor/images/notes-option.jpg and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/paste.PNG b/ej2-javascript/document-editor/images/paste.PNG
deleted file mode 100644
index 3f677f113..000000000
Binary files a/ej2-javascript/document-editor/images/paste.PNG and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/screentip.png b/ej2-javascript/document-editor/images/screentip.png
deleted file mode 100644
index 2e21aaf71..000000000
Binary files a/ej2-javascript/document-editor/images/screentip.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/search-color.png b/ej2-javascript/document-editor/images/search-color.png
deleted file mode 100644
index f1f52c23d..000000000
Binary files a/ej2-javascript/document-editor/images/search-color.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/spell-check-dialog.png b/ej2-javascript/document-editor/images/spell-check-dialog.png
deleted file mode 100644
index ffbebbdb0..000000000
Binary files a/ej2-javascript/document-editor/images/spell-check-dialog.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/spell-check-menu.png b/ej2-javascript/document-editor/images/spell-check-menu.png
deleted file mode 100644
index 49fe61e67..000000000
Binary files a/ej2-javascript/document-editor/images/spell-check-menu.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/table-image.png b/ej2-javascript/document-editor/images/table-image.png
deleted file mode 100644
index 187bf400d..000000000
Binary files a/ej2-javascript/document-editor/images/table-image.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/table-of-contents.jpeg b/ej2-javascript/document-editor/images/table-of-contents.jpeg
deleted file mode 100644
index a85ed5a23..000000000
Binary files a/ej2-javascript/document-editor/images/table-of-contents.jpeg and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/table-of-contents.png b/ej2-javascript/document-editor/images/table-of-contents.png
deleted file mode 100644
index 63244b302..000000000
Binary files a/ej2-javascript/document-editor/images/table-of-contents.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/toolbar-form-fields.png b/ej2-javascript/document-editor/images/toolbar-form-fields.png
deleted file mode 100644
index db87eab74..000000000
Binary files a/ej2-javascript/document-editor/images/toolbar-form-fields.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/track-changes.png b/ej2-javascript/document-editor/images/track-changes.png
deleted file mode 100644
index d200e5475..000000000
Binary files a/ej2-javascript/document-editor/images/track-changes.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/tracked-changes.png b/ej2-javascript/document-editor/images/tracked-changes.png
deleted file mode 100644
index 7659bb1cb..000000000
Binary files a/ej2-javascript/document-editor/images/tracked-changes.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/updatefields.png b/ej2-javascript/document-editor/images/updatefields.png
deleted file mode 100644
index 466950271..000000000
Binary files a/ej2-javascript/document-editor/images/updatefields.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/images/word2013justification.png b/ej2-javascript/document-editor/images/word2013justification.png
deleted file mode 100644
index b56a3c3a3..000000000
Binary files a/ej2-javascript/document-editor/images/word2013justification.png and /dev/null differ
diff --git a/ej2-javascript/document-editor/import.md b/ej2-javascript/document-editor/import.md
deleted file mode 100644
index faf7f0add..000000000
--- a/ej2-javascript/document-editor/import.md
+++ /dev/null
@@ -1,209 +0,0 @@
----
-layout: post
-title: Import in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Import in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Import
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Import in ##Platform_Name## Document editor control
-
-In Document Editor, the documents are stored in its own format called **Syncfusion Document Text (SFDT)**.
-
-The following example shows how to open SFDT data in Document Editor.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/import-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/import-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/import-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/import-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/import-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/import-cs1" %}
-{% endif %}
-
-## Import document from local machine
-
-The following example shows how to import document from local machine.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/import-sfdt-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/import-sfdt-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/import-sfdt-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/import-sfdt-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/import-sfdt-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/import-sfdt-cs1" %}
-{% endif %}
-
-## Convert word documents into SFDT
-
-You can convert word documents into SFDT format using the .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`]() by the web API service implementation. This library helps you to convert word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format.
-
->Note: The Syncfusion® Document Editor component's document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application. For more information about [why the document pagination (page-by-page display) differs from Microsoft Word](../document-editor/import/#why-the-document-pagination-differs-from-microsoft-word)
-
-Please refer the following example for converting word documents into SFDT.
-
-```ts
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
-
-// Initialize the Document Editor component.
-let documenteditor: DocumentEditor = new DocumentEditor();
-
-documenteditor.appendTo('#DocumentEditor');
-
-document.getElementById('file_upload').setAttribute('accept', '.dotx,.docx,.docm,.dot,.doc,.rtf,.txt,.xml,.sfdt');
-
-//Open file picker.
-document.getElementById("import").addEventListener("click", (): void => {
- document.getElementById('file_upload').click();
-});
-
-document.getElementById('file_upload').addEventListener("change", (e: any): void => {
- if (e.target.files[0]) {
- //Get the selected file.
- let file = e.target.files[0];
- if (file.name.substr(file.name.lastIndexOf('.')) !== '.sfdt') {
- loadFile(file);
- }
- }
-});
-
-function loadFile(file: File): void {
- let ajax: XMLHttpRequest = new XMLHttpRequest();
- ajax.open('POST', 'https://localhost:4000/api/documenteditor/Import', true);
- ajax.onreadystatechange = () => {
- if (ajax.readyState === 4) {
- if (ajax.status === 200 || ajax.status === 304) {
- //Open SFDT text in Document Editor
- documenteditor.open(ajax.responseText);
- }
- }
- }
- let formData: FormData = new FormData();
- formData.append('files', file);
- //Send the selected file to web api for converting it into sfdt.
- ajax.send(formData);
-}
-```
-
-Here’s how to handle the server-side action for converting word document in to SFDT.
-
-```c#
- [AcceptVerbs("Post")]
- public string Import(Microsoft.AspNetCore.Http.IFormCollection data)
- {
- if (data.Files.Count == 0)
- return null;
- System.IO.Stream stream = new System.IO.MemoryStream();
- Microsoft.AspNetCore.Http.IFormFile file = data.Files[0];
- int index = file.FileName.LastIndexOf('.');
- string type = index > -1 && index < file.FileName.Length - 1 ?
- file.FileName.Substring(index) : ".docx";
- file.CopyTo(stream);
- stream.Position = 0;
-
- Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, GetFormatType(type.ToLower()));
- string sfdt = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- return sfdt;
- }
-
- internal static Syncfusion.EJ2.DocumentEditor.FormatType GetFormatType(string format)
- {
- if (string.IsNullOrEmpty(format))
- throw new System.NotSupportedException("EJ2 DocumentEditor does not support this file format.");
- switch (format.ToLower()) {
- case ".dotx":
- case ".docx":
- case ".docm":
- case ".dotm":
- return Syncfusion.EJ2.DocumentEditor.FormatType.Docx;
- case ".dot":
- case ".doc":
- return Syncfusion.EJ2.DocumentEditor.FormatType.Doc;
- case ".rtf":
- return Syncfusion.EJ2.DocumentEditor.FormatType.Rtf;
- case ".txt":
- return Syncfusion.EJ2.DocumentEditor.FormatType.Txt;
- case ".xml":
- return Syncfusion.EJ2.DocumentEditor.FormatType.WordML;
- default:
- throw new System.NotSupportedException("EJ2 DocumentEditor does not support this file format.");
- }
- }
-
-```
-
-To know about server-side action, please refer this [page](../document-editor/web-services-overview).
-
-## Compatibility with Microsoft Word
-
-Syncfusion® Document Editor is a minimal viable Word document viewer/editor product for web applications. As most compatible Word editor, the product vision is adding valuable feature sets of Microsoft Word, and not to cover 100% feature sets of Microsoft Word desktop application. You can even see the feature sets difference between Microsoft Word desktop and their Word online application. So kindly don't misunderstand this component as a complete replacement for Microsoft Word desktop application and expect 100% feature sets of it.
-
-### How Syncfusion® accepts the feature request for Document Editor
-
-Syncfusion accepts new feature request as valid based on feature value and technological feasibility, then plan to implement unsupported features incrementally in future releases in a phase-by-phase manner.
-
-### How to report the problems in Document Editor
-
-You can report the problems with displaying, or editing Word documents in Document Editor component through [`support forum`](https://www.syncfusion.com/forums/), [`Direct-Trac`](https://www.syncfusion.com/support/directtrac/), or [`feedback portal`](https://www.syncfusion.com/feedback/). Kindly share the Word document for replicating the problem easily in minimal time. If you have confidential data, you can replace it and attach the document.
-
-### Why the document pagination differs from Microsoft Word
-
-For your understanding about the Word document structure and the workflow of Word viewer/editor components, the Word document is a flow document in which content will not be preserved page by page; instead, the content will be preserved sequentially like a HTML file. Only the Word viewer/editor paginates the content of the Word document page by page dynamically, when opened for viewing or editing and this page-wise position information will not be preserved in the document level (it is Word file format specification standard). Syncfusion® Document Editor component also does the same.
-
-At present there is a known technical limitation related to slight difference in text size calculated using HTML element based text measuring approach. Even though the text size is calculated with correct font and font size values, the difference lies; it is as low as 0.00XX to 0. XXXX values compared to that of Microsoft Word application’s display. Hence the document pagination (page-by-page display) can't be guaranteed for all the Word documents to match the pagination of Microsoft Word application.
-
-### How Syncfusion® address the document pagination difference compared to Microsoft Word
-
-The following table illustrates the reasons for pagination (page-by-page display) difference compared to Microsoft Word in your documents and how Syncfusion® address it.
-
-| Root causes | How is it solved? |
-|-----------------|-------------|
-|Any mistake (wrong behavior handled) in lay outing the supported elements and formatting |Customer can report to Syncfusion® support and track the status through bug report link. Syncfusion® fixes the bugs in next possible weekly patch release and service pack or main releases. |
-|Font missing in deployment environment|Customer can either report to Syncfusion® support and get suggestion or solve it on their own by installing the missing fonts in their deployment environment.|
-|Any unsupported elements or formatting present in your document |Customer can report to Syncfusion® support and track the status through feature request link. Syncfusion® implements unsupported features incrementally in future releases based on feature importance, customer interest, efforts involved, and technological feasibility. Also, suggests alternate approach for possible cases.|
-|Technical limitation related to framework For example, there is a known case with slight fractional difference in text size measured using HTML and Microsoft Word’s display.|Customer can report to Syncfusion® support and track the status through feature request link. Syncfusion® does research about alternate approaches to overcome the technical limitation/behaviors and process it same as a feature. >Note: Here the challenge is, time schedule for implementation varies based on the alternate solution and its reliability.|
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module)
-* [How to show and hide spinner while opening document in DocumentEditor](../document-editor/how-to/show-hide-spinner)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/js/getting-started.md b/ej2-javascript/document-editor/js/getting-started.md
deleted file mode 100644
index 9f21d3b36..000000000
--- a/ej2-javascript/document-editor/js/getting-started.md
+++ /dev/null
@@ -1,383 +0,0 @@
----
-layout: post
-title: Getting started with ##Platform_Name## Document editor control | Syncfusion
-description: Checkout and learn about Getting started with ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Getting started
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Getting started in ##Platform_Name## Document editor control
-
-The Essential® JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.
-
-## Component Initialization
-
-The Essential® JS 2 JavaScript components can be initialized by using either of the following ways.
-
-* Using local script and style references in a HTML page.
-* Using CDN link for script and style reference.
-
-### Using local script and style references in a HTML page
-
-**Step 1:** Create an app folder `app` for Essential® JS 2 JavaScript components.
-
-**Step 2:** You can get the global scripts and styles from the [Essential Studio® JavaScript (Essential® JS 2)](https://www.syncfusion.com/downloads/essential-js2/) build installed location.
-
-**Syntax:**
-> Script: `**(installed location)**/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js`
->
-> Styles: `**(installed location)**/JavaScript - EJ2/{RELEASE_VERSION}/Web (Essential JS 2)/JavaScript/{PACKAGE_NAME}/styles/material.css`
-
-**Example:**
-
-> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/23.1.36/Web (Essential JS 2)/JavaScript/ej2-documenteditor/dist/global/ej2-documenteditor.min.js`
->
-> Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/23.1.36/Web (Essential JS 2)/JavaScript/ej2-documenteditor/styles/material.css`
-
-**Step 3:** Create a folder `app/resources` and copy/paste the global scripts and styles from the above installed location to `app/resources` location.
-
-**Step 4:** Create a HTML page (index.html) in `app` location and add the Essentials JS 2 script and style references.
-
-```html
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-**Step 5:** Now, add the `Div` element and initiate the **Essential® JS 2 DocumentEditor** component in the `index.html` by using following code
-
-```html
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditor** component.
-
-**Step 7:** To render DocumentEditorContainer component, add the `Div` element and initiate the **Essential® JS 2 DocumentEditorContainer** component in the `index.html` by using following code
-
-```html
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditorContainer** component.
-
-### Using CDN link for script and style reference
-
-**Step 1:** Create an app folder `app` for the Essential® JS 2 JavaScript components.
-
-**Step 2:** The Essential® JS 2 component's global scripts and styles are already hosted in the below CDN link formats.
-
-**Syntax:**
-> Script: `https://cdn.syncfusion.com/ej2/23.1.36/{PACKAGE_NAME}/dist/global/{PACKAGE_NAME}.min.js`
->
-> Styles: `https://cdn.syncfusion.com/ej2/23.1.36/{PACKAGE_NAME}/styles/material.css`
-
-**Example:**
-> Script: [`https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/dist/global/ej2-documenteditor.min.js`](https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/dist/global/ej2-documenteditor.min.js)
->
-> Styles: [`https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/styles/material.css`](https://cdn.syncfusion.com/ej2/23.1.36/ej2-documenteditor/styles/material.css)
-
-**Step 3:** Create a HTML page (index.html) in `app` location and add the CDN link references. Now, add the `Div` element and initiate the **Essential® JS 2 DocumentEditor** component in the index.html by using following code.
-
-```html
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-{% previewsample "page.domainurl/code-snippet/document-editor/es5-getting-started-cs1" %}
-
-**Step 4:** Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditor** component.
-
-**Step 5:** To render DocumentEditorContainer component, add the `Div` element and initiate the **Essential® JS 2 DocumentEditorContainer** component in the index.html by using following code.
-
-```html
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-{% previewsample "page.domainurl/code-snippet/document-editor/es5-getting-started-cs2" %}
-
-Now, run the `index.html` in web browser, it will render the **Essential® JS 2 DocumentEditorContainer** component.
-
-## Server side dependencies
-
-The Document Editor component requires server-side interactions for the following operations:
-
-* [Open file formats other than SFDT](../document-editor/import#convert-word-documents-into-sfdt)
-* [Paste with formatting](../document-editor/clipboard#paste-with-formatting)
-* [Restrict editing](../document-editor/document-management)
-* [Spell check](../document-editor/spell-check)
-* [Save as file formats other than SFDT and DOCX](../document-editor/server-side-export)
-
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
-
-Please refer the [example from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) to configure the web service and set the [serviceUrl](../api/document-editor-container/#serviceurl).
-
-Syncfusion® provides a predefined [Word Processor server docker image](https://hub.docker.com/r/syncfusion/word-processor-server) targeting ASP.NET Core 2.1 framework. You can directly pull this docker image and deploy it in server on the go. You can also create own docker image by customizing the existing [docker project from GitHub](https://github.com/SyncfusionExamples/Word-Processor-Server-Docker).
-
->Note: Staring from `v19.3.0.x`, we have optimized the accuracy of text size measurements such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [to disable it and retain the document pagination behavior of older versions](../document-editor/how-to/disable-optimized-text-measuring)..
-
-## Frequently Asked Questions
-
-* [How to localize the Documenteditor container](../document-editor/global-local).
-* [How to load the document by default](../document-editor/how-to/open-default-document).
-* [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
-* [How to resize Document editor component?](../document-editor/how-to/resize-document-editor)
-* [How to add a save button to the DocumentEditorContainer component toolbar](../document-editor/how-to/add-save-button-in-toolbar)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/js/how-to/customize-ribbon.md b/ej2-javascript/document-editor/js/how-to/customize-ribbon.md
deleted file mode 100644
index 44655ef4e..000000000
--- a/ej2-javascript/document-editor/js/how-to/customize-ribbon.md
+++ /dev/null
@@ -1,246 +0,0 @@
----
-layout: post
-title: Customize Ribbon in ##Platform_Name## Document Editor | Syncfusion
-description: Learn how to customize the ribbon in Syncfusion ##Platform_Name## Document Editor - file menu, backstage, tabs, groups, and items.
-platform: ej2-javascript
-control: Ribbon Customization
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize Ribbon in ##Platform_Name## Document Editor
-
-The Syncfusion Document Editor provides an extensive and flexible API to customize the built-in ribbon UI. You can:
-
-- Customize the File menu.
-- Add the Backstage menu instead of File menu.
-- Show, hide, or add Ribbon tabs.
-- Show, hide, or add groups within tabs.
-- Show, hide, add, enable, or disable items within groups.
-
-Below are detailed examples for each ribbon customization scenario.
-
-## File Menu Customization
-
-Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](../api/document-editor-container/#filemenuitems) property.
-
-In below code example, In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added.
-
-```js
-import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor';
-
-var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,
-toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar'
-ribbonLayout: 'Classic', // Options: 'Simplified' or 'Classic',
-fileMenuItems: ["New", "Print", { text: 'Export', id: 'custom_item',iconCss: 'e-icons e-export' }
-],
-fileMenuItemClick: function (args) {
- if (args.item.id) {
- container.documentEditor.save('Sample', 'Docx');
- }
-},
-height: '590px' });
-ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Ribbon);
-documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-//DocumentEditorContainer control rendering starts
-documenteditorContainer.appendTo('#DocumentEditor');
-```
-
-## Backstage Menu Customization
-
-The Document Editor provides an [`backStageMenu`](../api/document-editor-container/#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
-
-The following code example shows how to add the backstage menu items.
-
-```ts
-import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor';
-
-var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,
-toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar'
-ribbonLayout: 'Classic', // Options: 'Simplified' or 'Classic',
-backstageMenu: {
- text: 'File',
- backButton: { text: 'close' },
- items: [
- { id: 'new', text: 'New', iconCss: 'e-icons e-de-ctnr-new' }],
-},
-height: '590px' });
-ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Ribbon);
-documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-//DocumentEditorContainer control rendering starts
-documenteditorContainer.appendTo('#DocumentEditor');
-
-```
-
-Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
-
-## Tab Customization
-
-You can customize the ribbon tabs in the Document Editor by showing, hiding, or adding tabs according to your application's requirements.
-
-### Show/Hide Tab
-
-Document editor provides the [`showTab`](../api/document-editor-container/ribbon/#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.
-
-The following code example how to show/hide existing tab using existing tab type and tab id.
-```ts
-// To hide the Home tab using the built-in `RibbonTabType`
-container.ribbon.showTab('Home', false);
-
-// To hide a tab by its tab id (for example, a custom tab)
-container.ribbon.showTab('custom_tab', false);
-```
-
-### Add Tab
-
-The Document Editor provides the [`addTab`](../api/document-editor-container/ribbon/#addtab) API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs.
-
-```ts
-import { RibbonTabModel } from '@syncfusion/ej2-ribbon';
-
-// To add the tab at end of tab
-let ribbonTab: RibbonTabModel = {
- header: 'Custom Tab', id: 'custom_tab', groups: [{
- header: 'Custom Group', collections: [{
- items: [{
- type: 'Button',
- buttonSettings: {
- content: 'New',
- iconCss: 'e-icons e-de-ctnr-new',
- clicked: function () {
- container.documentEditor.openBlank();
- }
- }
- }]
- }]
- }]
-};
-container.ribbon.addTab(ribbonTab);
-
-// To add the tab before the Insert tab(exising tab)
-container.ribbon.addTab(ribbonTab,'Insert');
-```
-
-
-## Group Customization
-
-You can also customize ribbon groups within a tab to better organize commands or add new functionalities as per your needs.
-
-### Show/Hide Group
-
-Document Editor provides an [`showGroup`](../api/document-editor-container/ribbon/#showgroup) API to show or hide existing groups within a ribbon tab.
-
-The following code example show how to show/hide the group using group Id or [`RibbonGroupInfo`](../api/document-editor-container/#ribbongroupinfo).
-
-```ts
-
-// To hide the clipboard group using group index
-container.ribbon.showGroup({tabId: 'Home', index: 1} , false);
-
-// To show the clipboard group using group index
-container.ribbon.showGroup({tabId: 'Home', index: 1} , true);
-
-// To hide the group using id
-container.ribbon.showGroup('custom_group', false);
-
-```
-
-### Add Group
-
-To extend the ribbon's functionality, you can add custom groups to any tab. This allows you to organize related commands together within a tab.
-
-```ts
-
-import { RibbonGroupModel } from '@syncfusion/ej2-ribbon';
-
-// Add the new group at the end of the Home tab
-let ribbonGroup: RibbonGroupModel =
-{
- header: 'Custom Group', collections: [{
- items: [{
- type: 'Button',
- buttonSettings: {
- content: 'New',
- iconCss: 'e-icons e-de-ctnr-new',
- clicked: function () {
- container.documentEditor.openBlank();
- }
- }
- }]
- }]
-};
-container.ribbon.addGroup('Home', ribbonGroup);
-
-// Add the new group at the specified index of the Home tab (before the Clipboard group)
-
-container.ribbon.addGroup('Home', ribbonGroup, 1);
-
-```
-
-## Item Customization
-
-You can customize individual items within ribbon groups. This includes showing, hiding, enabling, disabling, or adding new items to any group within a ribbon tab.
-
-### Show/Hide Item
-
-Using [`showItems`](../api/document-editor-container/ribbon/#showitems) API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or [`RibbonItemInfo`].
-
-The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](../api/document-editor-container/#ribboniteminfo).
-
-```ts
-// To hide the Bold and Italic items using ribbon item information
-container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false);
-
-// To show the Bold and Italic items using ribbon item information
-container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , true);
-
-// To hide the item using item id
-container.ribbon.showItems('custom_item', false);
-```
-
-### Enable/Disable Item
-
-Using [`enableItems`](../api/document-editor-container/ribbon/#enableitems) API in Document editor ribbon to enable/disable the existing item.
-
-```ts
-// To disable the underline using ribbon item info
-container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false);
-
-// To enable the underline using ribbon item info
-container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },true);
-
-// To disable the item using id
-container.ribbon.enableItems('custom_item', false);
-
-```
-
-### Add Item
-
-You can use the [`addItem`](../api/document-editor-container/ribbon/#additem) API in the Document Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed.
-
-```ts
-
-// To add the item at the end of the specified group (the item will be added at the end of the Undo group)
-let ribbonItem: RibbonItemModel = {
- type: 'Button',
- buttonSettings: {
- content: 'New',
- iconCss: 'e-icons e-de-ctnr-new',
- clicked: function () {
- container.documentEditor.openBlank();
- }
- }
-};
-container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem);
-
-// To add the item before the specified item index (the item will be added before the Redo item in the Undo group)
-
-container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem, 1);
-
-```
-
-
-## Related Links
-
-- [File menu Customization Demo](https://ej2.syncfusion.com/demos/#/material/document-editor/ribbon-customization)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/js/how-to/optimize-sfdt.md b/ej2-javascript/document-editor/js/how-to/optimize-sfdt.md
deleted file mode 100644
index beb113167..000000000
--- a/ej2-javascript/document-editor/js/how-to/optimize-sfdt.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-layout: post
-title: Optimize sfdt in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Optimize sfdt in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Optimize sfdt
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Optimize sfdt in ##Platform_Name## Document editor control
-
-Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits,
-* File transfer between client and server through the internet gets faster.
-* The new optimized SFDT files require less storage space than the old SFDT files.
-Hence, the optimized SFDT file can't be directly manipulated as JSON string.
-
-> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility.
-
-As a backward compatibility to create older format SFDT files, refer the following code changes,
-
-
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/js/ribbon.md b/ej2-javascript/document-editor/js/ribbon.md
deleted file mode 100644
index c2753c506..000000000
--- a/ej2-javascript/document-editor/js/ribbon.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-layout: post
-title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
-platform: ej2-javascript
-control: Ribbon
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Ribbon in ##Platform_Name## Document Editor Control
-
-The Document Editor provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document.
-
-You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
-
-## Enable Ribbon Mode
-
-To enable Ribbon in Document Editor, use the [`toolbarMode`](../api/document-editor-container/#toolbarmode) property of `DocumentEditorContainer`. The available toolbar modes are:
-
-- **'Toolbar'** - The traditional toolbar UI.
-- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
-
-By default, `toolbarMode` is `Toolbar`.
-
-The following code shows the how to enable the `Ribbon` in Document Editor.
-
-```js
-
-import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor';
-
-var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,
-toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar'
-height: '590px' });
-ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Ribbon);
-documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-//DocumentEditorContainer control rendering starts
-documenteditorContainer.appendTo('#DocumentEditor');
-```
-
-## Ribbon Layouts
-
-Document Editor provides two different Ribbon layouts:
-
-- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
-- **Simplified**: A more compact ribbon design with streamlined controls
-
-By default, `ribbonLayout` is set to `Simplified`.
-
-The following code shows the how to configure the ribbon layout in Document Editor:
-
-```ts
-
-import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor';
-
-var documenteditorContainer = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true,
-toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar'
-ribbonLayout: 'Classic', // Options: 'Simplified' or 'Classic'
-height: '590px' });
-ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Ribbon);
-documenteditorContainer.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-//DocumentEditorContainer control rendering starts
-documenteditorContainer.appendTo('#DocumentEditor');
-```
-
-## See Also
-
-* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/js/styles.md b/ej2-javascript/document-editor/js/styles.md
deleted file mode 100644
index f0e5ab04d..000000000
--- a/ej2-javascript/document-editor/js/styles.md
+++ /dev/null
@@ -1,228 +0,0 @@
----
-layout: post
-title: Styles in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Styles in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Styles
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Styles in ##Platform_Name## Document editor control
-
-Styles are useful for applying a set of formatting consistently throughout the document. In Document Editor, styles are created and added to a document programmatically or via the built-in Styles dialog.
-
-## Styles definition overview
-
-A Style in Document Editor should have the following properties:
-
-* **name**: Name of the style. All styles in a document have a unique name, which is used as an identifier when applying the style.
-* **type**: Specifies the document elements that the style will target. For example, paragraph or character.
-* **next**: Specifies that the current style inherits the style set to this property. This is how hierarchical styles are defined.
-* **link**: Provides a relation between the paragraph and character style.
-* **characterFormat**: Specifies the properties of paragraph and character style.
-* **paragraphFormat**: Specifies the properties of paragraph style.
-* **basedOn**: Specifies that the current style inherits the style set to this property. This is how hierarchical styles are defined. It can be optional.
-
-> The style type should match the inherited style type. For example, it is not possible to have a character style inherit a paragraph style.
-
-## Default style
-
-The default style for span and paragraph properties is normal. It internally inherits the default style of the document loaded or Document Editor component.
-
-## Style hierarchy
-
-Each style initially checks its local value for the property that is being evaluated and turns to the style it is based on. If no local value is found, it turns to its default style.
-
-Style inheritance of different styles are listed as follows:
-
-### Character style
-
-Character styles are based only on other character styles.
-
-The inheritance is: Character properties are inherited from the base character style.
-
-### Paragraph style
-
-Paragraph styles are based on other paragraph styles or on linked styles. When a paragraph style is based on another paragraph style, the inheritance of the properties is as follows:
-* Paragraph properties are inherited from the base paragraph style.
-* Span properties are inherited from the base paragraph style.
-
-When a paragraph style is based on a linked style, the inheritance of the properties is as follows:
-* Paragraph properties are inherited from the paragraph style part in its base linked style.
-* Span properties are inherited from the span style part in its base linked style.
-
-### Linked style
-
-Linked styles are composite styles and their components are paragraph and character styles with link between them. To apply paragraph properties, take the properties from the linked paragraph style. Similarly, to apply character properties, take the properties from linked character style. Linked styles are based on other linked styles or on paragraph styles.
-
-When a linked style is based on a paragraph style, the hierarchy of the properties is as follows:
-
-* Paragraph properties are inherited from the ‘basedOn’ paragraph style.
-* Character properties are inherited from the ‘basedOn’ paragraph style.
-
-When a linked style is based on another linked style, the hierarchy of the properties is as follows:
-
-* Paragraph properties are inherited from the paragraph style part in its base linked style.
-* Span properties are inherited from the span style part in its base linked style.
-
-## Defining new styles
-
-New Styles are defined and added to the style collection of the document. In this way, they will be discovered by the default UI and applied to the parts of a document.
-
-### Defining a character style
-
-The following example shows how to programmatically create a character style.
-
-```javascript
-
-//Initialize Document Editor component.
-var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
-
-// Create custom style object.
-var styleJson = {
- "type": "Character",
- "name": "New CharacterStyle",
- "basedOn": "Default Paragraph Font",
- "characterFormat": {
- "fontSize": 16.0,
- "fontFamily": "Calibri Light",
- "fontColor": "#2F5496",
- "bold": true,
- "italic": true,
- "underline": "Single"
- }
-};
-
-//Created new style using `createStyle` method.
-documentEditor.editor.createStyle(JSON.stringify(styleJson));
-```
-
-### Defining a paragraph style
-
-The following example shows how to programmatically create a paragraph style.
-
-```javascript
-
-//Initialize Document Editor component.
-var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
-
-// Create custom style object.
-var styleJson = {
- "type": "Paragraph",
- "name": "New ParagraphStyle",
- "basedOn": "Normal",
- "characterFormat": {
- "fontSize": 16.0,
- "fontFamily": "Calibri Light",
- "fontColor": "#2F5496",
- "bold": true,
- "italic": true,
- "underline": "Single"
- },
- "paragraphFormat": {
- "leftIndent": 0.0,
- "rightIndent": 0.0,
- "firstLineIndent": 0.0,
- "beforeSpacing": 12.0,
- "afterSpacing": 0.0,
- "lineSpacing": 1.0791666507720947,
- "lineSpacingType": "Multiple",
- "textAlignment": "Left",
- "outlineLevel": "Level1"
- }
-};
-
-//Created new style using `createStyle` method.
-documentEditor.editor.createStyle(JSON.stringify(styleJson));
-```
-
-### Defining a linked style
-
-The following example shows how to programmatically create linked style.
-
-```javascript
-
-//Initialize Document Editor component.
-var documentEditor = new ej.documenteditor.DocumentEditor({ enableEditor: true,isReadOnly: false, enableSelection: true });
-
-// Create custom style object.
-var styleJson = {
- "type": "Paragraph",
- "name": "New Linked",
- "basedOn": "Normal",
- "next": "Normal",
- "link": "New Linked Char",
- "characterFormat": {
- "fontSize": 16.0,
- "fontFamily": "Calibri Light",
- "fontColor": "#2F5496"
- },
- "paragraphFormat": {
- "leftIndent": 0.0,
- "rightIndent": 0.0,
- "firstLineIndent": 0.0,
- "beforeSpacing": 12.0,
- "afterSpacing": 0.0,
- "lineSpacing": 1.0791666507720947,
- "lineSpacingType": "Multiple",
- "textAlignment": "Left",
- "outlineLevel": "Level1"
- }
-};
-
-//Created new style using `createStyle` method.
-documentEditor.editor.createStyle(JSON.stringify(styleJson));
-```
-
-## Applying a style
-
-The styles are applied using the **applyStyle** method of **editorModule**, the parameter should be passed is the **Name** of the Style.
-
-The styles of the **Character** type is applied to the currently selected part of the document. If there is no selection, the values that will be applied to the word at caret position. The styles of **Paragraph** type follow the same logic and are applied to all paragraphs in the selection or the current paragraph.
-
-When there is no selection, styles of **Linked** type will change the values of the paragraph, and apply both the Paragraph and Character properties. When there is selection, Linked Style changes only the character properties of the selected text.
-
-For example, the following line will apply the "New Linked" to the current paragraph.
-
-```javascript
-//Apply specified style for selected paragraph.
-editor.editorModule.applyStyle('New Linked');
-
-//Clear direct formatting and apply the specified style
-editor.editorModule.applyStyle('New Linked', true);
-```
-
-## Get Styles
-
-You can get the styles in the document using the below code snippet.
-
-```ts
-//Get paragraph styles
-let paragraphStyles = documentEditor.getStyles('Paragraph');
-//Get character styles
-let paragraphStyles = documentEditor.getStyles('Character');
-```
-
-## Modify an existing style
-
-You can modify a existing style with the specified style properties using [`createStyle`](../api/document-editor/editor/#createStyle) method. If modifyExistingStyle parameter is set to `true` the style properties is updated to the existing style.
-
-The following illustrate to modify an existing style.
-
-```ts
-let styleJson: any = {
- "type": "Paragraph",
- "name": "Heading 1",
- "characterFormat": {
- "fontSize": 32,
- "fontFamily": "Calibri"
- }
-};
-documentEditor.editor.createStyle(styleName, true);
-```
-
-> If modifyExistingStyle parameter is set to true and a style already exists with same name, it modifies the specified properties in the existing style.
-> If modifyExistingStyle parameter is set to false and a style already exists with same name, it creates a new style with unique name by appending ‘_1’. Hence, the newly style will not have the specified name.
-> If no style exists with same name, it creates a new style.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/js/web-services-overview.md b/ej2-javascript/document-editor/js/web-services-overview.md
deleted file mode 100644
index 82e37e41a..000000000
--- a/ej2-javascript/document-editor/js/web-services-overview.md
+++ /dev/null
@@ -1,120 +0,0 @@
----
-layout: post
-title: Web services in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Web services in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Web services
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Web services in ##Platform_Name## Document editor control
-
-You can deploy web APIs for server-side dependencies of Document Editor component in the following platforms.
-
-* [ASP.NET Core](../document-editor/web-services/core)
-* [ASP.NET MVC](../document-editor/web-services/mvc)
-* [Java](../document-editor/web-services/java)
-
-## Which operations require server-side interaction
-
-|Operations|When client-server communication will be triggered?|What type of data will be transferred between client and server?|
-|------------|--------------------------------------|------------------------|
-|[Open file formats other than SFDT](../document-editor/import#convert-word-documents-into-sfdt)|When opening the document other than SFDT (Syncfusion® Document Editor's native file format), the server-side web API is invoked from client-side script.|**Client**: Sends the input file. **Server**: Receives the input file and sends the converted SFDT back to the client.
The server-side web API internally extracts the content from the document (DOCX, DOC, WordML, RTF, HTML) using Syncfusion® Word library (DocIO) and converts it into SFDT for opening the document in Document Editor.|
-|[Paste with formatting](../document-editor/clipboard#paste-with-formatting)|When pasting the formatted content (HTML/RTF) received from system clipboard. For converting HTML/RTF to SFDT format.
**Note**: Whereas plain text received from system clipboard will be pasted directly in the client-side.|**Client**: Sends the input Html or Rtf string. **Server**: Receives the input Html or Rtf string and sends the converted SFDT back to the client.|
-|[Restrict editing](../document-editor/document-management)|When protecting the document, for generating hash.|**Client**: Sends the input data for hashing algorithm. **Server**: Receives the input data for hashing algorithm and sends the result hash information back to the client.|
-|[Spellcheck](../document-editor/spell-check)(default)|When the spellchecker is enabled on client-side Document Editor, and it performs the spell check validation for words in the document.|**Client**: Sends the words (string) with their language for spelling validation. **Server**: Receives the words (string) with their language for spelling validation and sends the validation result as JSON back to the client.|
-|[SpellCheckByPage](../document-editor/spell-check)|Document editor provides options to spellcheck page by page when loading the documents. By [enabling optimized spell check](../document-editor/spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents.|**Client**: Sends the words (string) with their language for spelling validation. **Server**: Receives the words (string) with their language for spelling validation and sends the validation result as JSON back to the client.|
-|[Save as file formats other than SFDT and DOCX](../document-editor/server-side-export) (optional API)|You can configure this API, if you want to save the document in file format other than DOCX and SFDT.
For saving the files as WordML, DOC, RTF, HTML, ODT, Text using Syncfusion® Word library (DocIO) and PDF using Syncfusion® Word (DocIO) and PDF libraries.|You can transfer document from client to server either as SFDT or DOCX format.
First option (SFDT): **Client**: Sends the SFDT. **Server**: Receives the SFDT and saves the converted document as any file format supported by [Syncfusion® Word library (DocIO)](https://www.syncfusion.com/word-framework/net/word-library) in server or sends the saved file to the client browser.
Second option (DOCX): **Client**: Sends the DOCX file. **Server**: Receives the DOCX file and saves the converted document as any file format supported by [Syncfusion® Word library (DocIO)](https://www.syncfusion.com/word-framework/net/word-library) in server or sends the saved file to the client browser.|
-
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
-
-Please refer the [example from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) to configure the web service and set the [serviceUrl](../api/document-editor-container#serviceurl).
-
-If your running web service Url is `http://localhost:62869/`, set the serviceUrl like below:
-
-```ts
-container.serviceUrl = "http://localhost:62869/api/documenteditor/";
-```
-
-## Required Web API structure
-
-Please check below table for expected web API structure.
-
-|Expected method name |Parameters |Return type |
-|-----|----|----|
-|Import |Files(IFormCollection) |json(sfdt format) |
-|SystemClipboard|CustomerParameter: content(type string either rtf or html) and type(either .rtf or .html) |json(sfdt format) |
-|RestrictEditing |Parameter of type CustomRestrictParameter public class CustomRestrictParameter { public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } } |result hash information |
-|SpellCheck(default) |Parameter: SpellCheckJsonData public class SpellCheckJsonData { public int LanguageID { get; set; } public string TexttoCheck { get; set; } public bool CheckSpelling { get; set; } public bool CheckSuggestion { get; set; } public bool AddWord { get; set; } } |Json type of Spellcheck containing details of spell checked word |
-|SpellCheckByPage |Parameter: SpellCheckJsonData public class SpellCheckJsonData { public int LanguageID { get; set; } public string TexttoCheck { get; set; } public bool CheckSpelling { get; set; } public bool CheckSuggestion { get; set; } public bool AddWord { get; set; } } |Json type of Spellcheck containing details of spell checked word
**Note**: Document editor provides options to spellcheck page by page when loading the documents. By [enabling optimized spell check](../document-editor/spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents. |
-|Save(optional API) |parameter: SaveParameter public class SaveParameter { public string Content { get; set; } public string FileName { get; set; } } |void(Save the file as file stream) |
-|ExportSFDT(optional API) |parameter: SaveParameter public class SaveParameter { public string Content { get; set; } public string FileName { get; set; } } |FileStreamResult (to save the document in client-side) |
-|Export(optional API) |Files(IFormCollection) |FileStreamResult (to save the document in client-side) |
-
-## Customize the expected method name
-
-Document editor component provides an option to customize the expected method name for Import, SystemClipboard, RestrictEditing and SpellCheck using [serverActionSettings](../api/document-editor-container/documentEditorContainerModel/#serveractionsettings).
-
-The following example code illustrates how to customize the method name using serverActionSettings.
-
-```javascript
-
- var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px' ,enableSpellCheck:true});
- ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
- container.serviceUrl = hostUrl + 'api/documenteditor/';
- // Customize the API name
- var settings = { import: 'Import1', systemClipboard: 'SystemClipboard1', spellCheck: 'SpellCheck1', restrictEditing: 'RestrictEditing1' }
- container.serverActionSettings = settings;
- container.appendTo('#container');
-
-```
-
-## Add the custom headers to XMLHttpRequest
-
-Document editor component provides an an option to add custom headers of XMLHttpRequest using the [`headers`](../api/document-editor-container/documentEditorContainerModel/#headers).
-
-```javascript
-
- var container = new ej.documenteditor.DocumentEditorContainer({ enableToolbar: true, height: '590px'});
- ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
- container.serviceUrl = hostUrl + 'api/documenteditor/';
- // custom headers
- var customHeaders = [{ 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }, { 'Content-Type': 'application/json' }];
- container.headers = customHeaders;
- container.appendTo('#container');
-
-```
-
-## Modify the XMLHttpRequest before request send
-
-Document editor component provides an option to modify the XMLHttpRequest object (setting additional headers, if needed) using [`beforeXmlHttpRequestSend`](../api/document-editor-container/#beforexmlhttprequestsend) event and it gets triggered before a server request.
-
-You can customize the required [`XMLHttpRequest`](../api/document-editor/xmlHttpRequestEventArgs/) properties.
-
-The following example code illustrates how to modify the XMLHttpRequest using beforeXmlHttpRequestSend.
-
-```javascript
-var container = new ej.documenteditor.DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-// Below action, cancel all server-side interactions expect spell check
-container.beforeXmlHttpRequestSend = function(args) {
- //Here, modifying the request headers
- args.headers = [{ syncfusion: 'true' }];;
- args.withCredentials = true;
- switch (args.serverActionType) {
- case 'Import':
- case 'RestrictEditing':
- case 'SystemClipboard':
- args.cancel = true;
- break;
- }
-};
-container.appendTo('#container');
-
-```
-
-Note: Find the customizable serverActionType values are `'Import' | 'RestrictEditing' | 'SpellCheck' | 'SystemClipboard'`.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/keyboard-shortcut.md b/ej2-javascript/document-editor/keyboard-shortcut.md
deleted file mode 100644
index af8b22fc7..000000000
--- a/ej2-javascript/document-editor/keyboard-shortcut.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-layout: post
-title: Keyboard shortcut in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Keyboard shortcut in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Keyboard shortcut
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Keyboard shortcut in ##Platform_Name## Document editor control
-
-## Text formatting
-
-The following table lists the default keyboard shortcuts in Document Editor for formatting text:
-
-| Key combination | Description |
-|-----------------|-------------|
-|Ctrl + B |Toggles the bold property of selected text.|
-|Ctrl + I | Toggles the italic property of selected text.|
-|Ctrl + U | Toggles the underline property of selected text.|
-|Ctrl + + | Toggles the subscript formatting of selected text.|
-|Ctrl + Shift + + | Toggles the superscript formatting of selected contents.|
-| Ctrl + } | Increases the actual font size of selected text by one point.|
-| Ctrl + { | Decreases the actual font size of selected text by one point.|
-
-## Paragraph formatting
-
-The following table lists the default keyboard shortcuts for formatting the paragraph:
-
-| Key combination | Description |
-|-----------------|-------------|
-|Ctrl + E | Selected paragraphs are center aligned.|
-|Ctrl + J |Selected paragraphs are justified.|
-|Ctrl + L | Selected paragraphs are left aligned.|
-|Ctrl + R | Selected paragraphs are right aligned.|
-|Ctrl + 1 | Single line spacing is applied for selected paragraphs.|
-|Ctrl + 5 | 1.5 line spacing is applied for selected paragraphs.|
-|Ctrl + 2 | Double spacing is applied for selected paragraphs.|
-|Ctrl + 0 | No spacing is applied before the selected paragraphs.|
-|Ctrl + M | Increases the left indent of selected paragraphs by a factor of 36 points.|
-|Ctrl + Shift + M | Decreases the left indent of selected paragraphs by a factor of 36 points.|
-|Ctrl + * | Show/Hide the hidden characters like spaces, tab, paragraph marks, and breaks.|
-
-## Clipboard
-
-|Key Combination| Description |
-|---------------|-------------|
-|Ctrl + C | Copies selected contents to the clipboard.|
-|Ctrl + V | Pastes plain text content from the clipboard.|
-|Ctrl + X | Moves selected content to the clipboard.|
-
-## Keyboard shortcut to navigate around the document
-
-|Key Combination| Description |
-|---------------|-------------|
-|Left arrow| Moves the cursor position one character to the left.|
-|Right arrow| Moves the cursor position one character to the right.|
-|Down arrow| Moves the cursor position down one line.|
-|Up arrow| Moves the cursor position up one line.|
-|Ctrl + Left arrow| Moves the cursor position one word to the left.|
-|Ctrl + Right arrow| Moves the cursor position one word to the right.|
-|Ctrl + Up arrow| Moves the cursor position one paragraph up.|
-|Ctrl + Down arrow| Moves the cursor position one paragraph down.|
-|Tab (in table)| Moves the cursor position one cell to the right.|
-|Shift + Tab (in table)| Moves the cursor position one cell to the left.|
-|Home| Moves the cursor position to the start of a line.|
-|End| Moves the cursor position to the end of a line.|
-|Page up| Moves the cursor position one screen up.|
-|Page down| Moves the cursor position one screen down.|
-|Ctrl + Home| Moves the cursor position to the start of a document.|
-|Ctrl + End| Moves the cursor position to the end of a document.|
-
-## Keyboard shortcut to extend selection
-
-|Key Combination| Description|
-|---------------|------------|
-|Shift + Left arrow| Extends selection one character to the left.|
-|Shift + Right arrow| Extends selection one character to the right.|
-|Shift + Down arrow| Extends selection one line downward.|
-|Shift + Up arrow| Extends selection one line upward.|
-|Shift + Home| Extends selection to the start of a line.|
-|Shift + End| Extends Selection to the end of a line.|
-|Ctrl + A| Extends selection to the entire document.|
-|Ctrl + Shift + Left arrow| Extends selection one word to the left.|
-|Ctrl + Shift + Right arrow| Extends selection one word to the right.|
-|Ctrl + Shift + Down arrow| Extends selection to the end of a paragraph.|
-|Ctrl + Shift + Up arrow| Extends selection to the start of a paragraph.|
-|Ctrl + Shift + Home| Extends selection to the start of a document.|
-|Ctrl + Shift + End| Extends selection to the end of a document.|
-
-## Find and Replace
-
-|Key Combination|Description|
-|---------------|-----------|
-|Ctrl + F| Opens options pane.|
-|Ctrl + H| Opens replace tab in options pane.|
-
-## Create, Save and Print document
-
-|Key Combination|Description|
-|---------------|-----------|
-|Ctrl + N| Opens empty document.|
-|Ctrl + S| Saves the document in SFDT format.|
-|Ctrl + P| Prints the document.|
-
-## Edit Operation
-
-|Key Combination|Description|
-|---------------|-----------|
-|Backspace | Deletes one character to the left.|
-|Delete | Deletes one character to the right.|
-|Ctrl + Z | Undo last performed action.|
-|Ctrl + Y | Redo last undo action.|
-
-## Insert special characters
-
-|Key Combination|Description|
-|---------------|-----------|
-|Ctrl + Enter | Inserts page break.|
-|Shift + Enter | Inserts line break.|
-
-## Dialog
-
-|Key Combination|Description|
-|---------------|-----------|
-|Ctrl + F| Opens options pane.|
-|Ctrl + D| Opens font dialog.|
-|Ctrl + K| Opens hyperlink dialog.|
-
-## See Also
-
-* [How to override the keyboard shortcuts](../document-editor/how-to/override-the-keyboard-shortcuts)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/link.md b/ej2-javascript/document-editor/link.md
deleted file mode 100644
index 28659816d..000000000
--- a/ej2-javascript/document-editor/link.md
+++ /dev/null
@@ -1,204 +0,0 @@
----
-layout: post
-title: Link in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Link in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Link
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Link in ##Platform_Name## Document editor control
-
-Document Editor supports hyperlink field. You can link a part of the document content to Internet or file location, mail address, or any text within the document.
-
-## Navigate a hyperlink
-
-Document Editor triggers ‘requestNavigate’ event whenever user clicks Ctrl key or tap a hyperlink within the document. This event provides necessary details about link type, navigation URL, and local URL (if any) as arguments, and allows you to easily customize the hyperlink navigation functionality.
-
-### Add the requestNavigate event for DocumentEditor
-
-The following example illustrates how to add requestNavigate event for DocumentEditor.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/hyperlink-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/hyperlink-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/hyperlink-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/hyperlink-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/hyperlink-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/hyperlink-cs1" %}
-{% endif %}
-
-### Add the requestNavigate event for DocumentEditorContainer component
-
-The following example illustrates how to add requestNavigate event for DocumentEditorContainer component.
-
-```ts
-import { DocumentEditor, SfdtExport, Selection, RequestNavigateEventArgs } from '@syncfusion/ej2-documenteditor';
-
-let hostUrl: string =
- 'https://services.syncfusion.com/js/production/';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = hostUrl + 'api/documenteditor/';
-container.appendTo('#container');
-
-// Add event listener for requestNavigate event to customize hyperlink navigation functionality
-container.documentEditor.requestNavigate = (args: RequestNavigateEventArgs) => {
- if (args.linkType !== 'Bookmark') {
- let link: string = args.navigationLink;
- if (args.localReference.length > 0) {
- link += '#' + args.localReference;
- }
- //Navigate to the selected URL.
- window.open(link);
- args.isHandled = true;
- }
-};
-```
-
-If the selection is in hyperlink, trigger this event by calling ‘navigateHyperlink’ method of ‘Selection’ instance. Refer to the following example.
-
-```ts
-documenteditor.selection.navigateHyperlink();
-```
-
-## Copy link
-
-Document Editor copies link text of a hyperlink field to the clipboard if the selection is in hyperlink. Refer to the following example.
-
-```ts
-documenteditor.selection.copyHyperlink();
-```
-
-## Add hyperlink
-
-To create a basic hyperlink in the document, press `ENTER` / `SPACEBAR` / `SHIFT + ENTER` / `TAB` key after typing the address, for instance [`http://www.google.com`](http://www.google.com). Document Editor automatically converts this address to a hyperlink field. The text can be considered as a valid URL if it starts with any of the following.
-
-> ``
-> ``
-> `file:///`
-> `www.`
-> `mailto:`
-
-Refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/hyperlink-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/hyperlink-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/hyperlink-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/hyperlink-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/hyperlink-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/hyperlink-cs2" %}
-{% endif %}
-
-Also Document Editor expose API [`insertHyperlink()`](../api/document-editor/editor/#inserthyperlink)to insert hyperlink.
-
-Refer to the following sample code.
-
-```ts
-documenteditor.editor.insertHyperlink('https://www.google.com', 'Google');
-```
-
-## Customize screen tip
-
-You can customize the screen tip text for the hyperlink by using below sample code.
-
-```ts
-documenteditor.editor.insertHyperlink('https://www.google.com', 'Google', '<>');
-```
-
-Screen tip text can be modified through UI by using the [Hyperlink dialog](../document-editor/dialog#hyperlink-dialog)
-
-
-
-## Remove hyperlink
-
-To remove link from hyperlink in the document, press Backspace key at the end of a hyperlink. By removing the link, it will be converted as plain text. You can use ‘removeHyperlink’ method of ‘Editor’ instance if the selection is in hyperlink. Refer to the following example.
-
-```ts
-documenteditor.editor.removeHyperlink();
-```
-
-## Hyperlink dialog
-
-Document Editor provides dialog support to insert or edit a hyperlink. Refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/dialog-cs16/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs16/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs16" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/dialog-cs16/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/dialog-cs16/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/dialog-cs16" %}
-{% endif %}
-
-You can use the following keyboard shortcut to open the hyperlink dialog if the selection is in hyperlink.
-
-| Key Combination | Description |
-|-----------------|-------------|
-|Ctrl + K | Open hyperlink dialog that allows you to create or edit hyperlink|
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module/)
-* [Hyperlink dialog](../document-editor/dialog#hyperlink-dialog)
diff --git a/ej2-javascript/document-editor/list-format.md b/ej2-javascript/document-editor/list-format.md
deleted file mode 100644
index e1ddaa314..000000000
--- a/ej2-javascript/document-editor/list-format.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-layout: post
-title: List format in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about List format in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: List format
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# List format in ##Platform_Name## Document editor control
-
-Document Editor supports both the single-level and multilevel lists. Lists are used to organize data as step-by-step instructions in documents for easy understanding of key points. You can apply list to the paragraph either using supported APIs.
-
-## Create bullet list
-
-Bullets are usually used for unordered lists. To apply bulleted list for selected paragraphs, use the following method of ‘Editor’ instance.
-
-> applyBullet(bullet, fontFamily);
-
-|Parameter|Type|Description|
-|---------|----|-----------|
-|Bullet|string|Bullet character.|
-|fontFamily|string|Bullet font family.|
-
-Refer to the following sample code.
-
-```ts
-documenteditor.editor.applyBullet('\uf0b7', 'Symbol');
-```
-
-## Create numbered list
-
-Numbered lists are usually used for ordered lists. To apply numbered list for selected paragraphs, use the following method of ‘Editor’ instance.
-
-> applyNumbering(numberFormat,listLevelPattern)
-
-|Parameter|Type|Description|
-|---------|----|-----------|
-|numberFormat|string|“%n” representations in ‘numberFormat’ parameter will be replaced by respective list level’s value.“%1)” will be displayed as “1)”|
-|listLevelPattern(optional)|string|Default value is 'Arabic'.|
-
-Refer to the following example.
-
-```ts
-documenteditor.editor.applyNumbering('%1)', 'UpRoman');
-```
-
-## Clear list
-
-You can also clear the list formatting applied for selected paragraphs. Refer to the following sample code.
-
-```ts
-documenteditor.editor.clearList();
-```
-
-## Working with lists
-
-The following sample demonstrates how to create bullet and numbering lists in Document Editor.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/list-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/list-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/list-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/list-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/list-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/list-cs1" %}
-{% endif %}
-
-## Editing numbered list
-
-Document Editor restarts the numbering or continue numbering for a numbered list. These options are found in the built-in context menu, if the list value is selected. Refer to the following screenshot.
-
-
-
-## See Also
-
-* [List dialog](../document-editor/dialog#list-dialog)
diff --git a/ej2-javascript/document-editor/notes.md b/ej2-javascript/document-editor/notes.md
deleted file mode 100644
index f00cc887c..000000000
--- a/ej2-javascript/document-editor/notes.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: post
-title: Notes in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Notes in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Notes
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Notes in ##Platform_Name## Document editor control
-
-DocumentEditorContainer component provides support for inserting footnotes and endnotes through the in-built toolbar. Refer to the following screenshot.
-
-
-
-The Footnotes and endnotes are both ways of adding extra bits of information to your writing outside of the main text. You can use footnotes and endnotes to add side comments to your work or to place other publications like books, articles, or websites.
-
-## Insert footnotes
-
-Document Editor exposes an API to insert footnotes at cursor position programmatically or can be inserted to the end of selected text.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-//Inject require modules.
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
-});
-container.appendTo('#DocumentEditor');
-//Insert footnote in current selection.
-container.documentEditor.editor.insertFootnote();
-```
-
-## Insert endnotes
-
-Document Editor exposes an API to insert endnotes at cursor position programmatically or can be inserted to the end of selected text.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-//Inject require modules.
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
-});
-container.appendTo('#DocumentEditor');
-//Insert endnote in current selection.
-container.documentEditor.editor.insertEndnote();
-```
-
-## Update or edit footnotes and endnotes
-
-You can update or edit the footnotes and endnotes using the built-in context menu shown up by right-clicking it. The footnote endnote dialog box popup and you can customize the number format and start at. Refer to the following screenshot.
-
-
diff --git a/ej2-javascript/document-editor/opening-documents/aws-s3-bucket.md b/ej2-javascript/document-editor/opening-documents/aws-s3-bucket.md
deleted file mode 100644
index 14e12d4ec..000000000
--- a/ej2-javascript/document-editor/opening-documents/aws-s3-bucket.md
+++ /dev/null
@@ -1,155 +0,0 @@
----
-layout: post
-title: Open document from AWS S3 in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Open document from AWS S3 in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open document from AWS S3
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document from AWS S3
-
-To load a document from AWS S3 in a Document Editor, you can follow the steps below
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 1:** Create a Simple Document Editor Sample in TypeScript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 1:** Create a Simple Document Editor Sample in Javascript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Amazon;
-using Amazon.S3;
-using Amazon.S3.Model;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessKey;
-public readonly string _secretKey;
-public readonly string _bucketName;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessKey = _configuration.GetValue("AccessKey");
- _secretKey = _configuration.GetValue("SecretKey");
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-* Create the `LoadFromS3()` method to load the document from AWS S3.
-
-```csharp
-
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("LoadFromS3")]
-//Post action for Loading the documents
-
-public async Task LoadFromS3([FromBody] Dictionary onObject)
-{
- MemoryStream stream = new MemoryStream();
-
- if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
- {
- return null;
- }
- RegionEndpoint bucketRegion = RegionEndpoint.USEast1;
-
- // Configure the AWS SDK with your access credentials and other settings
- var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion);
-
- string documentName = jsonObject["documentName"];
-
- // Specify the document name or retrieve it from a different source
- var response = await s3Client.GetObjectAsync(_bucketName, documentName);
-
- Stream responseStream = response.ResponseStream;
- responseStream.CopyTo(stream);
- stream.Seek(0, SeekOrigin.Begin);
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Close();
- return json;
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessKey": "Your Access Key from AWS S3",
- "SecretKey": "Your Secret Key from AWS S3",
- "BucketName": "Your Bucket name from AWS S3"
-}
-```
-
-N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name
-
-**Step 3:** Modify the index File in the Document Editor sample
-
-In the client-side, the document is returned from the web service is opening using [`open`](../../api/document-editor/#open) method.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-aws-s3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-aws-s3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-aws-s3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/opening-documents/azure-blob-storage.md b/ej2-javascript/document-editor/opening-documents/azure-blob-storage.md
deleted file mode 100644
index 3cb876f91..000000000
--- a/ej2-javascript/document-editor/opening-documents/azure-blob-storage.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-layout: post
-title: Open document from Azure Blob Storage in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Open document from Azure Blob Storage in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open document from Azure Blob Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document from Azure Blob Storage
-
-To load document from Azure Blob Storage in a Document Editor, you can follow the steps below
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 1:** Create a Simple Document Editor Sample in TypeScript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 1:** Create a Simple Document Editor Sample in Javascript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Azure.Storage.Blobs;
-using Azure.Storage.Blobs.Specialized;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-
-```csharp
-private readonly string _storageConnectionString;
-private readonly string _storageContainerName;
-private readonly ILogger _logger;
-
-public DocumentEditorController(IConfiguration configuration, ILogger logger)
-{
- _storageConnectionString = configuration.GetValue("connectionString");
- _storageContainerName = configuration.GetValue("containerName");
- _logger = logger;
-}
-```
-
-* Modify the `LoadFromAzure()` method to load the document from Azure Blob Storage
-
-```csharp
-
-[HttpPost("LoadFromAzure")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/LoadFromAzure")]
-//Post action for Loading the PDF documents
-
-public IActionResult LoadFromAzure([FromBody] Dictionary jsonObject)
-{
- MemoryStream stream = new MemoryStream();
-
- if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
- {
- return null
- }
- BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);
- string fileName = jsonObject["documentName"];
- BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName);
- BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName);
- blockBlobClient.DownloadTo(stream);
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Close();
- return json;
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "connectionString": "*Your Connection string from Azure*",
- "containerName": "*Your container name in Azure*"
-}
-```
-
-N> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name
-
-**Step 3:** Modify the index File in the Document Editor sample
-
-In the client-side, the document is returned from the web service is opening using [`open`](../../api/document-editor/#open) method.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-azure-blob/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-azure-blob/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-azure-blob/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/opening-documents/box-cloud-file-storage.md b/ej2-javascript/document-editor/opening-documents/box-cloud-file-storage.md
deleted file mode 100644
index 76fb995fe..000000000
--- a/ej2-javascript/document-editor/opening-documents/box-cloud-file-storage.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-layout: post
-title: Opening the document from Box cloud file storage in Syncfusion ##Platform_Name## Document editor control | Syncfusion
-description: Learn here to open a document from Box cloud file storage in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Opening from Box cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document from Box cloud file storage
-
-To load a document from Box cloud file storage in a document Editor, you can follow the steps below
-
-**Step 1:** Set up a Box developer account and create a Box application
-
-To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose.
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in TypeScript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in Javascript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using Box.V2;
-using Box.V2.Auth;
-using Box.V2.Config;
-using Box.V2.Models;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _clientID;
-public readonly string _clientSecret;
-public readonly string _folderID;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _clientID = _configuration.GetValue("ClientID");
- _clientSecret = _configuration.GetValue("ClientSecret");
- _folderID = _configuration.GetValue("FolderID");
-}
-```
-
-* Create the `LoadFromBoxCloud()` method to load the document from Box cloud file storage.
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("LoadFromBoxCloud")]
-//Post action for Loading the documents
-
-public async Task LoadFromBoxCloud([FromBody] Dictionary jsonObject)
-{
- if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
- {
- return null
- }
- MemoryStream stream = new MemoryStream();
- // Initialize the Box API client with your authentication credentials
- var auth = new OAuthSession(_accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
- var config = new BoxConfigBuilder(_clientID, _clientSecret, new Uri("http://boxsdk")).Build();
- var client = new BoxClient(config, auth);
-
- // Download the file from Box storage
- var items = await client.FoldersManager.GetFolderItemsAsync(_folderID, 1000, autoPaginate: true);
- var files = items.Entries.Where(i => i.Type == "file");
-
- // Filter the files based on the objectName
- var matchingFile = files.FirstOrDefault(file => file.Name == objectName);
-
- // Fetch the file from Box storage by its name
- var fileStream = await client.FilesManager.DownloadAsync(matchingFile.Id);
- stream = new MemoryStream();
- await fileStream.CopyToAsync(stream);
-
- // Reset the position to the beginning of the stream
- stream.Position = 0;
-
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Close();
- return json;
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Box_Storage_Access_Token",
- "FolderID": "Your_Folder_ID",
- "ClientID": "Your_Box_Storage_ClientID",
- "ClientSecret": "Your_Box_Storage_ClientSecret"
-}
-```
-
-N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, the document is returned from the web service is opening using [`open`](../../api/document-editor/#open) method.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-box-cloud-file-storage/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-box-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-box-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/opening-documents/dropbox-cloud-file-storage.md b/ej2-javascript/document-editor/opening-documents/dropbox-cloud-file-storage.md
deleted file mode 100644
index db7c8e9fe..000000000
--- a/ej2-javascript/document-editor/opening-documents/dropbox-cloud-file-storage.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-layout: post
-title: Open document from Dropbox cloud file storage in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Open document from Dropbox cloud file storage in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open document from Dropbox cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document from Dropbox cloud file storage
-
-To load a document from Dropbox cloud file storage in a Document editor, you can follow the steps below
-
-**Step 1:** Create a Dropbox API
-
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in TypeScript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in Javascript
-
-Start by following the steps provided in this [link]((../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Dropbox.Api;
-using Dropbox.Api.Files;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _folderName;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _folderName = _configuration.GetValue("FolderName");
-}
-```
-
-* Create the `LoadFromDropBox()` method to load the document from Dropbox cloud file storage.
-
-```csharp
-
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("LoadFromBoxCloud")]
-//Post action for Loading the documents
-
-public async Task LoadFromDropBox([FromBody] Dictionary jsonObject)
-{
- if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
- {
- return null
- }
- MemoryStream stream = new MemoryStream();
-
- using (var dropBox = new DropboxClient(_accessToken))
- {
- using (var response = await dropBox.Files.DownloadAsync(_folderName + "/" + fileName))
- {
- var byteArray = await response.GetContentAsByteArrayAsync();
- stream = new MemoryStream(byteArray);
- }
- }
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Close();
- return json;
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Dropbox_Access_Token",
- "FolderName": "Your_Folder_Name"
-}
-```
-
-N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, the document is returned from the web service is opening using [`open`](../../api/document-editor/#open) method.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-dropbox-cloud-file-storage/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-dropbox-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-dropbox-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/opening-documents/google-cloud-storage.md b/ej2-javascript/document-editor/opening-documents/google-cloud-storage.md
deleted file mode 100644
index 6a1320692..000000000
--- a/ej2-javascript/document-editor/opening-documents/google-cloud-storage.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-layout: post
-title: Open document from Google Cloud Storage in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Open document from Google Cloud Storage in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open document from Google Cloud Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document from Google Cloud Storage
-
-To load a document from Google Cloud Storage in a Document editor, you can follow the steps below
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 1:** Create a Simple Document Editor Sample in TypeScript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 1:** Create a Simple Document Editor Sample in Javascript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Cloud.Storage.V1;
-using Google.Apis.Auth.OAuth2;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-// Private readonly object _storageClient
-private readonly StorageClient _storageClient;
-
-private IConfiguration _configuration;
-
-public readonly string _bucketName;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
-
- // The key file is used to authenticate with Google Cloud Storage.
- string keyFilePath = "path/to/service-account-key.json";
-
- // Load the service account credentials from the key file.
- var credentials = GoogleCredential.FromFile(keyFilePath);
-
- // Create a storage client with Application Default Credentials
- _storageClient = StorageClient.Create(credentials);
-
- _configuration = configuration;
-
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-* Create the `LoadFromGoogleCloud()` method to load the document from Google Cloud Storage.
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("LoadFromGoogleCloud")]
-//Post action for Loading the documents
-
-public async Task LoadFromGoogleCloud([FromBody] Dictionary jsonObject)
-{
- if (jsonObject == null && !jsonObject.ContainsKey("documentName"))
- {
- return null
- }
- MemoryStream stream = new MemoryStream();
-
- string bucketName = _bucketName;
- string objectName = jsonObject["document"];
- _storageClient.DownloadObject(bucketName, objectName, stream);
- stream.Position = 0;
-
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Close();
- return json;
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "BucketName": "Your Bucket name from Google Cloud Storage"
-}
-```
-
-N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket
-
-N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.
-
-**Step 3:** Modify the index File in the Document Editor sample
-
-In the client-side, the document is returned from the web service is opening using [`open`](../../api/document-editor/#open) method.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-google-cloud-storage/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-google-cloud-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-google-cloud-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/opening-documents/google-drive.md b/ej2-javascript/document-editor/opening-documents/google-drive.md
deleted file mode 100644
index fb845b211..000000000
--- a/ej2-javascript/document-editor/opening-documents/google-drive.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-layout: post
-title: Open document from Google Drive in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Open document from Google Drive in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open document from Google Drive
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document from Google Drive
-
-To load a document from Google Drive in a Document editor, you can follow the steps below
-
-**Step 1:** Set up Google Drive API
-
-You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk).
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in TypeScript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in Javascript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Apis.Drive.v3;
-using Google.Apis.Util.Store;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string folderId;
-public readonly string applicationName;
-public readonly string credentialPath;
-private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly};
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- folderId = _configuration.GetValue("FolderId");
- credentialPath = _configuration.GetValue("CredentialPath");
- applicationName = _configuration.GetValue("ApplicationName");
-}
-```
-
-* Create the `LoadFromGoogleDrive()` method to load the document from Google Drive.
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("LoadFromGoogleDrive")]
-//Post action for Loading the documents
-public async Task LoadFromGoogleDrive([FromBody] Dictionary jsonObject)
-{
-
- MemoryStream stream = new MemoryStream();
- UserCredential credential;
- using (var stream1 = new FileStream(credentialPath, FileMode.Open, FileAccess.Read))
- {
- string credPath = "token.json";
- credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
- GoogleClientSecrets.Load(stream1).Secrets,
- Scopes,
- "user",
- CancellationToken.None,
- new FileDataStore(credPath, true));
- }
-
- // Create Google Drive API service.
- var service = new DriveService(new BaseClientService.Initializer()
- {
- HttpClientInitializer = credential,
- ApplicationName = applicationName,
- });
- // List DOCX files in Google Drive
- listRequest.Q = "mimeType='application/vnd.openxmlformats-officedocument.wordprocessingml.document' and '" + folderId + "' in parents and trashed=false";
- listRequest.Fields = "files(id, name)";
- var files = await listRequest.ExecuteAsync();
- string fileIdToDownload = string.Empty;
- foreach (var file in files.Files)
- {
- string fileId = file.Id;
- string fileName = file.Name;
- if (fileName == objectName)
- {
- // Save the matching fileId
- fileIdToDownload = fileId;
- break;
- }
- }
- string fileIds = fileIdToDownload;
- var request = service.Files.Get(fileIds);
- await request.DownloadAsync(stream);
- stream.Position = 0;
-
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Close();
- return json;
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "FolderId": "Your Google Drive Folder ID",
- "CredentialPath": "Your Path to the OAuth 2.0 Client IDs json file",
- "ApplicationName": "Your Application name"
-}
-```
-
-N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file.
-
-N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, the document is returned from the web service is opening using [`open`](../../api/document-editor/#open) method.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-box-cloud-file-storage/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-box-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-box-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Google.Apis.Drive.v3** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/opening-documents/one-drive.md b/ej2-javascript/document-editor/opening-documents/one-drive.md
deleted file mode 100644
index fc8e63230..000000000
--- a/ej2-javascript/document-editor/opening-documents/one-drive.md
+++ /dev/null
@@ -1,185 +0,0 @@
----
-layout: post
-title: Open document from One Drive in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Open document from One Drive in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open document from One Drive
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open document from One Drive
-
-To load a document from One Drive in a Document editor, you can follow the steps below
-
-**Step 1:** Create the Microsoft graph API.
-
-Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in TypeScript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor Sample in Javascript
-
-Start by following the steps provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview)for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Microsoft.Graph;
-using Microsoft.Identity.Client;
-using Helpers;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string folderName;
-public readonly string applicationId;
-public readonly string tenantId;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- folderName = _configuration.GetValue("FolderName");
- tenantId = _configuration.GetValue("TenantId");
- applicationId = _configuration.GetValue("ApplicationId");
-}
-```
-
-* Create the `LoadFromOneDrive()` method to load the document from One Drive.
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("LoadFromBoxCloud")]
-//Post action for Loading the documents
-
-public async Task LoadFromOneDrive([FromBody] Dictionary jsonObject)
-{
- MemoryStream stream = new MemoryStream();
-
- var config = LoadAppSettings();
- var client = GetAuthenticatedGraphClient(config);
-
- var request = client.Me.Drive.Root.Children.Request();
- string folderIdToSearch = string.Empty;
- var results = await request.GetAsync();
-
- var folder = results.FirstOrDefault(f => f.Name == folderName && f.Folder != null);
- if (folder != null)
- {
- // Save the matching folderId
- folderIdToSearch = folder.Id;
- }
-
- var folderRequest = client.Me.Drive.Items[folderIdToSearch].Children.Request();
- var folderContents = await folderRequest.GetAsync();
-
- string fileIdToDownload = string.Empty;
- var file = folderContents.FirstOrDefault(f => f.File != null && f.Name == objectName);
- if (file != null)
- {
- // Save the matching fileId
- fileIdToDownload = file.Id;
- }
-
- string fileIds = fileIdToDownload;
- var fileRequest = client.Me.Drive.Items[fileIdToDownload].Content.Request();
-
- using (var streamResponse = await fileRequest.GetAsync())
- {
- if (streamResponse != null)
- {
- streamResponse.Seek(0, SeekOrigin.Begin);
- await streamResponse.CopyToAsync(stream);
- }
- }
- WordDocument document = WordDocument.Load(stream, FormatType.Docx);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- stream.Close();
- return json;
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "TenantId": "Your_Tenant_ID",
- "applApplicationIdicationId": "Your_Application_ID",
- "FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive"
-}
-
-```
-
-N> Replace **Your_Tenent_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, the document is returned from the web service is opening using [`open`](../../api/document-editor/#open) method.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/open-one-drive/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-one-drive/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/open-one-drive/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The following NuGet packages are required to use the previous code example
-* **Microsoft.Identity.Client**
-* **Microsoft.Graph**
-* **Microsoft.Extensions.Configuration**
-* **Microsoft.Extensions.Configuration.FileExtensions**
-* **Microsoft.Extensions.Configuration.Json**
-
-You can install these packages using the NuGet Package Manager in Visual Studio or Visual Studio Code.
diff --git a/ej2-javascript/document-editor/overview.md b/ej2-javascript/document-editor/overview.md
deleted file mode 100644
index 6f179415a..000000000
--- a/ej2-javascript/document-editor/overview.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-layout: post
-title: Overview of ##Platform_Name## Document editor control | Syncfusion
-description: Document editor for ##Platform_Name## is used to create, edit, view and print word documents.
-platform: ej2-javascript
-control: Index
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Overview
-
-The Document Editor component is used to create, edit, view, and print Word documents in web applications. All the user interactions and editing operations that run purely in the client-side provides much faster editing experience to the users.
-
-## Key Features
-
-* [Opens](../document-editor/import) the native `Syncfusion Document Text (*.sfdt)` format documents in the client-side.
-* [Saves the documents](../document-editor/export) in the client-side as `Syncfusion Document Text (*.sfdt)` and `Word document (*.docx)`.
-* Supports document elements like text, [image](../document-editor/image), [table](../document-editor/table), fields, [bookmark](../document-editor/bookmark),[shapes](../document-editor/shapes), [section](../document-editor/section-format), [header and footer](../document-editor/header-footer).
-* Supports the commonly used fields like [hyperlink](../document-editor/link), page number, page count, and table of contents.
-* Supports formats like [text](../document-editor/text-format), [paragraph](../document-editor/paragraph-format), [bullets and numbering](../document-editor/list-format), [table](../document-editor/table-format), [page settings](../document-editor/section-format), etc.
-* Provides support to create, edit, and apply [paragraph and character styles](../document-editor/styles).
-* Provides support to [find and replace](../document-editor/find-and-replace) text within the document.
-* Supports all the common editing and formatting operations along with [undo and redo](../document-editor/history).
-* Provides support to [cut](../document-editor/clipboard#cut), [copy](../document-editor/clipboard#copy), and [paste](../document-editor/clipboard#paste) rich text contents within the component. Also allows pasting simple text to and from other applications.
-* Provides support to insert, and edit [form fields](../document-editor/form-fields).
-* Provides support to insert, and edit [comments](../document-editor/comments).
-* Provides support to track the [inserted and deleted content](../document-editor/track-changes).
-* Provides support to perform [spell checking](../document-editor/spell-check) for any input text
-* Allows user interactions like [zoom](../document-editor/scrolling-zooming#zooming), [scroll](../document-editor/scrolling-zooming), select contents through touch, mouse, and keyboard.
-* Provides intuitive UI options like context menu, [dialogs](../document-editor/dialog), and [navigation pane](../document-editor/find-and-replace#options-pane).
-* [Localizes](../document-editor/global-local) all the static text to any desired language.
-* Allows to create a lightweight Word viewer using module injection to view and [prints](../document-editor/print) Word documents.
-* Provides a [server-side helper library](../document-editor/web-services-overview) to open the Word documents like DOCX, DOC, WordML, RTF, and Text, by converting it to SFDT file format.
-
-## Supported Web platforms
-
-### Other platforms
-
-* [Javascript(ES5)](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started/)
-* [Javascript](https://ej2.syncfusion.com/documentation/document-editor/getting-started/)
-* [Angular](https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started/)
-* [React](https://ej2.syncfusion.com/react/documentation/document-editor/getting-started/)
-* [Vue](https://ej2.syncfusion.com/vue/documentation/document-editor/getting-started/)
-* [ASP.NET Core](https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/getting-started-core/)
-* [ASP.NET MVC](https://ej2.syncfusion.com/aspnetmvc/documentation/document-editor/getting-started/)
-* [Blazor](https://blazor.syncfusion.com/documentation/document-editor/getting-started/server-side-application/)
-
-### Supported platforms for server-side dependencies
-
-You can deploy web APIs for server-side dependencies of Document Editor component in the following platforms.
-
-* [ASP.NET Core](../document-editor/web-services/core)
-* [ASP.NET MVC](../document-editor/web-services/mvc)
-* [Java](../document-editor/web-services/java)
-
-To know more about server-side dependencies, refer this [page](../document-editor/web-services-overview).
-
-#### Which operations require server-side interaction
-
-* Open file formats other than SFDT
-* Paste with formatting
-* Restrict editing
-* Spellcheck
-* Save as file formats other than SFDT and DOCX
-
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/paragraph-format.md b/ej2-javascript/document-editor/paragraph-format.md
deleted file mode 100644
index 62c009f71..000000000
--- a/ej2-javascript/document-editor/paragraph-format.md
+++ /dev/null
@@ -1,191 +0,0 @@
----
-layout: post
-title: Paragraph format in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Paragraph format in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Paragraph format
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Paragraph format in ##Platform_Name## Document editor control
-
-Document Editor supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.
-
-## Indentation
-
-You can modify the left or right indentation of selected paragraphs using the following sample code.
-
-```ts
-documenteditor.selection.paragraphFormat.leftIndent = 24;
-documenteditor.selection.paragraphFormat.rightIndent = 24;
-```
-
-## Special indentation
-
-You can define special indent for first line of the paragraph using the following sample code.
-
-```ts
-documenteditor.selection.paragraphFormat.firstLineIndent = 24;
-```
-
-## Increase indent
-
-You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code.
-
-```ts
-documenteditor.editor.increaseIndent()
-```
-
-## Decrease indent
-
-You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code.
-
-```ts
-documenteditor.editor.decreaseIndent()
-```
-
-## Text alignment
-
-You can get or set the text alignment of selected paragraphs using the following sample code.
-
-```ts
-documenteditor.selection.paragraphFormat.textAlignment = 'Center' | 'Left' | 'Right' | 'Justify';
-```
-
->Note: Starting from `v19.4.0.x`, the text justification of Document editor component matches alignment of Microsoft Word 2013 and newer versions based on the compatibility mode present in the document. The DOCX document created using Microsoft Word 2013 and newer versions will have the compatibility mode `Word2013` and follows a special behavior in justifying the text. You can retain the text justification behavior like old versions by modifying the compatibility mode as `Word2010`.
-
-```ts
-documenteditor.documentSettings.compatibilityMode = 'Word2010';
-```
-
->Note: The Document editor component assumes the compatibility mode as `Word2013` by default, if it is not defined for a document.
-
-
-
-You can toggle the text alignment of selected paragraphs by specifying a value using the following sample code.
-
-```ts
-documenteditor.editor.toggleTextAlignment('Center' | 'Left' | 'Right' | 'Justify');
-```
-
-## Line spacing and its type
-
-You can define the line spacing and its type for selected paragraphs using the following sample code.
-
-```ts
-documenteditor.selection.paragraphFormat.lineSpacingType = 'AtLeast';
-documenteditor.selection.paragraphFormat.lineSpacing = 6;
-```
-
-## Paragraph spacing
-
-You can define the spacing before or after the paragraph by using the following sample code.
-
-```ts
-documenteditor.selection.paragraphFormat.beforeSpacing = 24;
-documenteditor.selection.paragraphFormat.afterSpacing = 24;
-```
-
-You can also set automatic spacing before and after the paragraph by using the following sample code.
-
-```ts
-documenteditor.selection.paragraphFormat.spaceBeforeAuto = true;
-documenteditor.selection.paragraphFormat.spaceAfterAuto = true;
-```
-
->Note: If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered.
-
-## Pagination properties
-
-You can enable or disable the following pagination properties for the paragraphs in a Word document.
-
-* Widow/Orphan control - whether the first and last lines of the paragraph are to remain on the same page as the rest of the paragraph when paginating the document.
-* Keep with next - whether the specified paragraph remains on the same page as the paragraph that follows it while paginating the document.
-* Keep lines together - whether all lines in the specified paragraphs remain on the same page while paginating the document.
-
-The following example code illustrates how to enable or disable these pagination properties for the selected paragraphs.
-
-```ts
-documenteditor.selection.paragraphFormat.widowControl = false;
-documenteditor.selection.paragraphFormat.keepWithNext = true;
-documenteditor.selection.paragraphFormat.keepLinesTogether = true;
-```
-
-## Paragraph Border
-
-You can apply borders to the paragraphs in a Word document. Using borders, decorate the paragraphs to set them apart from other paragraphs in the document.
-
-The following example code illustrates how to apply box border for the selected paragraphs.
-
-```ts
-// left
-documenteditor.selection.paragraphFormat.borders.left.lineStyle = 'Single';
-documenteditor.selection.paragraphFormat.borders.left.lineWidth = 3;
-documenteditor.selection.paragraphFormat.borders.left.color = "#000000";
-
-//right
-documenteditor.selection.paragraphFormat.borders.right.lineStyle = 'Single';
-documenteditor.selection.paragraphFormat.borders.right.lineWidth = 3;
-documenteditor.selection.paragraphFormat.borders.right.color = "#000000";
-
-//top
-documenteditor.selection.paragraphFormat.borders.top.lineStyle = 'Single';
-documenteditor.selection.paragraphFormat.borders.top.lineWidth = 3;
-documenteditor.selection.paragraphFormat.borders.top.color = "#000000";
-
-//bottom
-documenteditor.selection.paragraphFormat.borders.bottom.lineStyle = 'Single';
-documenteditor.selection.paragraphFormat.borders.bottom.lineWidth = 3;
-documenteditor.selection.paragraphFormat.borders.bottom.color = "#000000";
-```
-
-Note: At present, the Document editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document.
-
-## Show or Hide Paragraph marks
-
-You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document editor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document.
-
-The following example code illustrates how to show or hide paragraph marks.
-
-```ts
-documenteditor.documentEditorSettings.showHiddenMarks = true;
-```
-
-## Toolbar with paragraph formatting options
-
-The following sample demonstrates the paragraph formatting options using a toolbar.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/paragraph-format-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/paragraph-format-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/paragraph-format-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/paragraph-format-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/paragraph-format-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/paragraph-format-cs1" %}
-{% endif %}
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module)
-* [Paragraph dialog](../document-editor/dialog#paragraph-dialog)
-* [Keyboard shortcuts](../document-editor/keyboard-shortcut#paragraph-formatting)
diff --git a/ej2-javascript/document-editor/print.md b/ej2-javascript/document-editor/print.md
deleted file mode 100644
index 09be7d95f..000000000
--- a/ej2-javascript/document-editor/print.md
+++ /dev/null
@@ -1,171 +0,0 @@
----
-layout: post
-title: Print in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Print in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Print
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Print in ##Platform_Name## Document editor control
-
-To print the document, use the [`print`](../api/document-editor#print) method from Document Editor instance.
-
-Refer to the following example for showing a document and print it.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/print-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/print-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/print-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/print-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/print-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/print-cs1" %}
-{% endif %}
-
-Refer to the following example for creating a document and print it.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/print-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/print-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/print-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/print-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/print-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/print-cs2" %}
-{% endif %}
-
-## Improve print quality
-
-Document editor provides an option to improve the print quality using [`printDevicePixelRatio`](../api/document-editor/documentEditorSettingsModel/#printdevicepixelratio) in Document editor settings. Document editor using canvas approach to render content. Then, canvas are converted to image and it process for print. Using printDevicePixelRatio API, you can increase the image quality based on your requirement.
-
-The following example code illustrates how to improve the print quality in Document editor container.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px',
- documentEditorSettings: {
- printDevicePixelRatio: 2
- }
- });
- DocumentEditorContainer.Inject(Toolbar);
- container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
- container.appendTo('#container');
-```
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
->Note: By default, printDevicePixelRatio value is 1
-
-## Print using window object
-
-You can print the document in Document Editor by passing the window instance. This is useful to implement print in third party frameworks such as electron, where the window instance will not be available. Refer to the following example.
-
-```ts
-import { DocumentEditor, Print } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditor.Inject(Print);
-
-let documenteditor: DocumentEditor = new DocumentEditor({
- enablePrint: true, height: '370px'
-});
-documenteditor.appendTo('#DocumentEditor');
-documenteditor.print(window);
-```
-
-## Page setup
-
-Some of the print options cannot be configured using JavaScript. Refer to the following links to learn more about the browser page setup:
-
-* [`Chrome`](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1/)
-* [`Firefox`](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox/)
-
-However, you can customize margins, paper, and layout options by modifying the section format properties using page setup dialog
-
-```ts
-import { DocumentEditor, Print, PageSetupDialog, Editor, Selection, EditorHistory } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditor.Inject(Print, PageSetupDialog, Editor, Selection, EditorHistory);
-
-let documenteditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false,
- enablePrint: true,
- enablePageSetupDialog: true,
- enableEditor: true,
- enableSelection: true,
- enableEditorHistory: true,
- height: '370px'
-});
-documenteditor.appendTo('#DocumentEditor');
-documenteditor.showPageSetupDialog();
-```
-
-By customizing margins, papers, and layouts, the layout of the document will be changed in Document Editor. To modify these options during print operation, serialize the document as SFDT using the [`serialize`](../api/document-editor#serialize) method in Document Editor instance and open the SFDT data in another instance of Document Editor in separate window.
-
-The following example shows how to customize layout options only for printing.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/print-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/print-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/print-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/print-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/print-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/print-cs3" %}
-{% endif %}
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module/)
-* [Page Setup dialog](../document-editor/dialog#page-setup-dialog)
diff --git a/ej2-javascript/document-editor/r-t-l.md b/ej2-javascript/document-editor/r-t-l.md
deleted file mode 100644
index 93deacf18..000000000
--- a/ej2-javascript/document-editor/r-t-l.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: R t l in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about R t l in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: R t l
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# R t l in ##Platform_Name## Document editor control
-
-Document Editor provides RTL (right-to-left) support. This can be enabled using the “enableRtl” property.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/rtl-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/rtl-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/rtl-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/rtl-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/rtl-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/rtl-cs1" %}
-{% endif %}
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/restrict-editing.md b/ej2-javascript/document-editor/restrict-editing.md
deleted file mode 100644
index 23b20a8e4..000000000
--- a/ej2-javascript/document-editor/restrict-editing.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-layout: post
-title: Restrict editing in ##Platform_Name## Document Editor Control | Syncfusion
-description: Learn here all about Restrict editing in Syncfusion ##Platform_Name## Document Editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Restrict editing
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Restrict Editing in ##Platform_Name## Document Editor Control
-
-Document Editor provides support to restrict editing. When the protected document includes range permission, then unique user or user group only authorized to edit separate text area.
-
-## Set current user
-
-You can use the [`currentUser`](../api/document-editor#currentuser) property to authorize the current document user by name, email, or user group name.
-
-The following code shows how to set currentUser
-
-```ts
-documentEditor.currentUser = 'engineer@mycompany.com';
-```
-
-## Highlighting the text area
-
-You can highlight the editable region of the current user using the [`userColor`](../api/document-editor#usercolor) property.
-
-The following code shows how to set userColor.
-
-```ts
-documentEditor.userColor = '#fff000';
-```
-
-## Restrict Editing Pane
-
-Restrict Editing Pane provides the following options to manage the document:
-* To apply formatting restrictions to the current document, select the allow formatting check box.
-* To apply editing restrictions to the current document, select the read only check box.
-* To add users to the current document, select more users option and add user from the popup dialog.
-* To include range permission to the current document, select parts of the document and choose users who are allowed to freely edit them from the listed check box.
-* To apply the chosen editing restrictions, click the **YES,START ENFORCING PROTECTION** button. A dialog box displays asking for a password to protect.
-* To stop protection, select **STOP PROTECTION** button. A dialog box displays asking for a password to stop protection.
-
-The following code shows Restrict Editing Pane. To unprotect the document, use password '123'.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/data-protection-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/data-protection-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/data-protection-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/data-protection-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/data-protection-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/data-protection-cs2" %}
-{% endif %}
-
-### See Also
-
-* [How to protect the document in form filling mode](../document-editor/form-fields/#protect-the-document-in-form-filling-mode)
-* [How to protect the document in comments only mode](../document-editor/comments/#protect-the-document-in-comments-only-mode)
-* [How to protect the document in track changes only mode](../document-editor/track-changes/#protect-the-document-in-track-changes-only-mode)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/saving-documents/aws-s3-bucket.md b/ej2-javascript/document-editor/saving-documents/aws-s3-bucket.md
deleted file mode 100644
index 42313c12f..000000000
--- a/ej2-javascript/document-editor/saving-documents/aws-s3-bucket.md
+++ /dev/null
@@ -1,163 +0,0 @@
----
-layout: post
-title: Save document to AWS S3 in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Save document to AWS S3 in ##Platform_Name## Document editor of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save document to AWS S3
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save document to AWS S3
-
-To save a document to AWS S3, you can follow the steps below
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 1:** Create a Simple Document Editor sample in TypeScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 1:** Create a Simple Document Editor sample in JavaScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Amazon;
-using Amazon.S3;
-using Amazon.S3.Model;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessKey;
-public readonly string _secretKey;
-public readonly string _bucketName;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessKey = _configuration.GetValue("AccessKey");
- _secretKey = _configuration.GetValue("SecretKey");
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-* Create the `SaveToS3()` method to save the document to AWS S3 bucket
-
-```csharp
-
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveToS3")]
-//Post action for save the document to AWS S3
-
-public void SaveToS3(IFormCollection data)
-{
- if (data.Files.Count == 0)
- return;
- RegionEndpoint bucketRegion = RegionEndpoint.USEast1;
- // Configure the AWS SDK with your access credentials and other settings
- var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion);
- string bucketName = _bucketName;
- IFormFile file = data.Files[0];
- string documentName = this.GetValue(data, "documentName");
- string result = Path.GetFileNameWithoutExtension(documentName);
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
- var request = new PutObjectRequest
- {
- BucketName = bucketName,
- Key = result + "_downloaded.docx",
- InputStream = stream,
- };
- // Upload the document to AWS S3
- var response = s3Client.PutObjectAsync(request).Result;
-}
-
-private string GetValue(IFormCollection data, string key)
-{
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessKey": "Your Access Key from AWS S3",
- "SecretKey": "Your Secret Key from AWS S3",
- "BucketName": "Your Bucket name from AWS S3"
-}
-```
-
-N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name
-
-**Step 3:** Modify the index File in the Document Editor sample
-
-In the client-side, to export the document into blob the document using [`saveAsBlob`](../../api/document-editor/#saveAsBlob) and sent to server-side for saving in AWS S3 Bucket.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/save-aws-s3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-aws-s3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-aws-s3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/saving-documents/azure-blob-storage.md b/ej2-javascript/document-editor/saving-documents/azure-blob-storage.md
deleted file mode 100644
index ec371e6a2..000000000
--- a/ej2-javascript/document-editor/saving-documents/azure-blob-storage.md
+++ /dev/null
@@ -1,148 +0,0 @@
----
-layout: post
-title: Save document to Azure Blob Storage in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Save document to Azure Blob Storage in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save document to Azure Blob Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save document to Azure Blob Storage
-
-To save a document to Azure Blob Storage, you can follow the steps below
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 1:** Create a Simple Document Editor sample in TypeScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 1:** Create a Simple Document Editor sample in JavaScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 2:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Azure.Storage.Blobs;
-using Azure.Storage.Blobs.Specialized;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private readonly string _storageConnectionString;
-private readonly string _storageContainerName;
-private readonly ILogger _logger;
-
-public DocumentEditorController(IConfiguration configuration, ILogger logger)
-{
- _storageConnectionString = configuration.GetValue("connectionString");
- _storageContainerName = configuration.GetValue("containerName");
- _logger = logger;
-}
-```
-
-* Create then 'SaveToAzure' method to save the downloaded documents to Azure Blob Storage container
-
-```csharp
-
-[HttpPost("SaveToAzure")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/SaveToAzure")]
-//Post action for downloading the documents
-
-public void Download(IFormCollection data)
-{
- if (data.Files.Count == 0)
- return;
-
- BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);
- BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName);
-
- IFormFile file = data.Files[0];
- string documentName = this.GetValue(data, "documentName");
- string result = Path.GetFileNameWithoutExtension(documentName);
-
- // Get a reference to the blob
- BlobClient blobClient = containerClient.GetBlobClient(result + "_downloaded.docx");
-
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
-
- // Upload the document to Azure Blob Storage
- blobClient.Upload(stream, true);
-}
-
-private string GetValue(IFormCollection data, string key)
-{
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
-}
-
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "connectionString": "*Your Connection string from Azure*",
- "containerName": "*Your container name in Azure*"
-}
-```
-
-N> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name
-
-**Step 3:** Modify the index File in the Document Editor sample
-
-In the client-side, to export the document into blob the document using [`saveAsBlob`](../../api/document-editor/#saveAsBlob) and sent to server-side for saving in Azure Blob Storage container.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/save-azure-blob/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-azure-blob/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-azure-blob/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/saving-documents/box-cloud-file-storage.md b/ej2-javascript/document-editor/saving-documents/box-cloud-file-storage.md
deleted file mode 100644
index 138d66ad6..000000000
--- a/ej2-javascript/document-editor/saving-documents/box-cloud-file-storage.md
+++ /dev/null
@@ -1,172 +0,0 @@
----
-layout: post
-title: Save document to Box cloud file storage in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Save document to Box cloud file storage in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save document to Box cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save document to Box cloud file storage
-
-To save a document to Box cloud file storage, you can follow the steps below
-
-**Step 1:** Set up a Box developer account and create a Box application
-
-To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose.
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor sample in TypeScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor sample in JavaScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using Box.V2;
-using Box.V2.Auth;
-using Box.V2.Config;
-using Box.V2.Models;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _clientID;
-public readonly string _clientSecret;
-public readonly string _folderID;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _clientID = _configuration.GetValue("ClientID");
- _clientSecret = _configuration.GetValue("ClientSecret");
- _folderID = _configuration.GetValue("FolderID");
-}
-```
-
-* Create the `SaveToBoxCloud()` method to save the downloaded document to Box cloud file storage bucket
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveToBoxCloud")]
-//Post action for downloading the document
-
-public void SaveToBoxCloud(IFormCollection data)
-{
- if (data.Files.Count == 0)
- return;
-
- IFormFile file = data.Files[0];
- string documentName = this.GetValue(data, "documentName");
- string result = Path.GetFileNameWithoutExtension(documentName);
-
- // Initialize the Box API client with your authentication credentials
- var auth = new OAuthSession(_accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
- var config = new BoxConfigBuilder(_clientID, _clientSecret, new Uri("http://boxsdk")).Build();
- var client = new BoxClient(config, auth);
-
- var fileRequest = new BoxFileRequest
- {
- Name = result + "_downloaded.docx",
- Parent = new BoxFolderRequest { Id = _folderID },
- };
-
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
-
- var boxFile = await client.FilesManager.UploadAsync(fileRequest, stream);
-}
-
-private string GetValue(IFormCollection data, string key)
-{
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Box_Storage_Access_Token",
- "FolderID": "Your_Folder_ID",
- "ClientID": "Your_Box_Storage_ClientID",
- "ClientSecret": "Your_Box_Storage_ClientSecret"
-}
-```
-
-N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, to export the document into blob the document using [`saveAsBlob`](../../api/document-editor/#saveAsBlob) and sent to server-side for saving in Box cloud file storage.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/save-box-cloud-file-storage/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-box-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-box-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/saving-documents/dropbox-cloud-file-storage.md b/ej2-javascript/document-editor/saving-documents/dropbox-cloud-file-storage.md
deleted file mode 100644
index a223fd2a7..000000000
--- a/ej2-javascript/document-editor/saving-documents/dropbox-cloud-file-storage.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-layout: post
-title: Save document to Dropbox cloud file storage in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Save document to Dropbox cloud file storage in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save document to Dropbox cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save document to Dropbox cloud file storage
-
-To save a document to Dropbox cloud file storage, you can follow the steps below
-
-**Step 1:** Create a Dropbox API
-
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor sample in TypeScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor sample in JavaScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Dropbox.Api;
-using Dropbox.Api.Files;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _folderName;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _folderName = _configuration.GetValue("FolderName");
-}
-```
-
-* Create the `SaveToDropBox()` method to save the downloaded document to Dropbox cloud file storage bucket
-
-```csharp
-
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveToDropBox")]
-//Post action for downloading the document
-
-public void SaveToDropBox(IFormCollection data)
-{
- if (data.Files.Count == 0)
- return;
-
- IFormFile file = data.Files[0];
- string documentName = this.GetValue(data, "documentName");
- string result = Path.GetFileNameWithoutExtension(documentName);
- string fileName = result + "_downloaded.docx";
-
- using (var dropBox = new DropboxClient(_accessToken))
- {
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
-
- // Upload the document to Dropbox
- var uploadedFile = await dropBox.Files.UploadAsync(
- _folderName + "/" + fileName,
- WriteMode.Overwrite.Instance,
- body: stream
- );
- }
-}
-
-private string GetValue(IFormCollection data, string key)
-{
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Dropbox_Access_Token",
- "FolderName": "Your_Folder_Name"
-}
-```
-
-N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, to export the document into blob the document using [`saveAsBlob`](../../api/document-editor/#saveAsBlob) and sent to server-side for saving in Dropbox cloud file storage.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/save-dropbox-cloud-file-storage/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-dropbox-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-dropbox-cloud-file-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/saving-documents/google-cloud-storage.md b/ej2-javascript/document-editor/saving-documents/google-cloud-storage.md
deleted file mode 100644
index cccf0b650..000000000
--- a/ej2-javascript/document-editor/saving-documents/google-cloud-storage.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-layout: post
-title: Save document to Google Cloud Storage in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Save document to Google Cloud Storage in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save document to Google Cloud Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save document to Google Cloud Storage
-
-To save a document to Google Cloud Storage, you can follow the steps below
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 1:** Create a Simple Document Editor sample in TypeScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 1:** Create a Simple Document Editor sample in JavaScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 2:** Create the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Cloud.Storage.V1;
-using Google.Apis.Auth.OAuth2;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-// Private readonly object _storageClient
-private readonly StorageClient _storageClient;
-
-private IConfiguration _configuration;
-
-public readonly string _bucketName;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
-
- // The key file is used to authenticate with Google Cloud Storage.
- string keyFilePath = "path/to/service-account-key.json";
-
- // Load the service account credentials from the key file.
- var credentials = GoogleCredential.FromFile(keyFilePath);
-
- // Create a storage client with Application Default Credentials
- _storageClient = StorageClient.Create(credentials);
-
- _configuration = configuration;
-
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-* Create the `SaveToGoogleCloud()` method to save the downloaded document to Google Cloud Storage bucket
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveToGoogleCloud")]
-//Post action for downloading the document
-public void SaveToGoogleCloud(IFormCollection data)
-{
- if (data.Files.Count == 0)
- return;
-
- IFormFile file = data.Files[0];
- string documentName = this.GetValue(data, "documentName");
- string result = Path.GetFileNameWithoutExtension(documentName);
-
- string bucketName = _bucketName;
-
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
-
- // Upload the document to Google Cloud Storage
- _storageClient.UploadObject(bucketName, result + "_downloaded.docx", null, stream);
-
-}
-
-private string GetValue(IFormCollection data, string key)
-{
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "BucketName": "Your Bucket name from Google Cloud Storage"
-}
-```
-
-N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket
-
-N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, to export the document into blob the document using [`saveAsBlob`](../../api/document-editor/#saveAsBlob) and sent to server-side for saving in Google Cloud Storage.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/save-google-cloud-storage/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-google-cloud-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-google-cloud-storage/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/saving-documents/google-drive.md b/ej2-javascript/document-editor/saving-documents/google-drive.md
deleted file mode 100644
index 45d21e72b..000000000
--- a/ej2-javascript/document-editor/saving-documents/google-drive.md
+++ /dev/null
@@ -1,192 +0,0 @@
----
-layout: post
-title: Save document to Google Drive in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Save document to Google Drive in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save document to Google Drive
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save document to Google Drive
-
-To save a document to Google Drive, you can follow the steps below
-
-**Step 1:** Set up Google Drive API
-
-You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk).
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor sample in TypeScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor sample in JavaScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Apis.Drive.v3;
-using Google.Apis.Util.Store;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string folderId;
-public readonly string applicationName;
-public readonly string credentialPath;
-private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly};
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- folderId = _configuration.GetValue("FolderId");
- credentialPath = _configuration.GetValue("CredentialPath");
- applicationName = _configuration.GetValue("ApplicationName");
-}
-```
-
-* Create the `SaveToGoogleDrive()` method to save the downloaded document to Google Drive bucket
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveToGoogleDrive")]
-//Post action for downloading the document
-
-public void SaveToGoogleDrive(IFormCollection data)
-{
- if (data.Files.Count == 0)
- return;
-
- IFormFile file = data.Files[0];
- string documentName = this.GetValue(data, "documentName");
- string result = Path.GetFileNameWithoutExtension(documentName);
- string fileName = result + "_downloaded.docx";
-
- UserCredential credential;
-
- using (var memStream = new FileStream(credentialPath, FileMode.Open, FileAccess.Read))
- {
- string credPath = "token.json";
- credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
- GoogleClientSecrets.Load(memStream).Secrets,
- Scopes,
- "user",
- CancellationToken.None,
- new FileDataStore(credPath, true));
- }
-
- // Create the Drive API service.
- var service = new DriveService(new BaseClientService.Initializer()
- {
- HttpClientInitializer = credential,
- ApplicationName = applicationName,
- });
-
- var fileMetadata = new Google.Apis.Drive.v3.Data.File()
- {
- Name = fileName,
- Parents = new List { folderId }
- };
-
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
-
- FilesResource.CreateMediaUpload request;
- request = service.Files.Create(fileMetadata, stream, "application/pdf");
- request.Fields = "id";
- object value = await request.UploadAsync();
-}
-
-private string GetValue(IFormCollection data, string key)
-{
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "FolderId": "Your Google Drive Folder ID",
- "CredentialPath": "Your Path to the OAuth 2.0 Client IDs json file",
- "ApplicationName": "Your Application name"
-}
-```
-
-N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file.
-
-N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`.
-
-N> You must use a unique `Client_ID` from json file to interface your application with the Google Drive API in order to save document directly to Google Drive. This Client_ID will serve as the authentication key, allowing you to save files securely.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, to export the document into blob the document using [`saveAsBlob`](../../api/document-editor/#saveAsBlob) and sent to server-side for saving in Google Drive.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/save-google-drive/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-google-drive/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-google-drive/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The **Google.Apis.Drive.v3** NuGet package must be installed in your application to use the previous code example.
diff --git a/ej2-javascript/document-editor/saving-documents/one-drive.md b/ej2-javascript/document-editor/saving-documents/one-drive.md
deleted file mode 100644
index 4117c98ca..000000000
--- a/ej2-javascript/document-editor/saving-documents/one-drive.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-layout: post
-title: Save document to One Drive in ##Platform_Name## Document editor control | Syncfusion
-description: Learn about how to Save document to One Drive in ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save document to One Drive
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save document to One Drive
-
-To save a document to One Drive, you can follow the steps below
-
-**Step 1:** Create the Microsoft graph API.
-
-Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.
-
-{% if page.publishingplatform == "typescript" %}
-
-**Step 2:** Create a Simple Document Editor sample in TypeScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Typescript. This will give you a basic setup of the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-**Step 2:** Create a Simple Document Editor sample in JavaScript
-
-Follow the instructions provided in this [link](../../document-editor/getting-started) to create a simple Document Editor sample in Javascript. This will give you a basic setup of the Document Editor component.
-
-{% endif %}
-
-**Step 3:** Modify the `DocumentEditorController.cs` File in the Web Service Project
-
-{% if page.publishingplatform == "typescript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-* Create a web service project in .NET Core 3.0 or above. You can refer to this [link](../../document-editor/web-services-overview) for instructions on how to create a web service project.
-
-{% endif %}
-
-* Open the `DocumentEditorController.cs` file in your web service project.
-
-* Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Microsoft.Graph;
-using Microsoft.Identity.Client;
-using Helpers;
-```
-
-* Add the following private fields and constructor parameters to the `DocumentEditorController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string folderName;
-public readonly string applicationId;
-public readonly string tenantId;
-
-public DocumentEditorController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- folderName = _configuration.GetValue("FolderName");
- tenantId = _configuration.GetValue("TenantId");
- applicationId = _configuration.GetValue("ApplicationId");
-}
-```
-
-* Create the `SaveToOneDrive()` method to save the downloaded document to One Drive bucket
-
-```csharp
-[AcceptVerbs("Post")]
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveToOneDrive")]
-//Post action for downloading the document
-
-public void SaveToOneDrive(IFormCollection data)
-{
-
- if (data.Files.Count == 0)
- return;
-
- IFormFile file = data.Files[0];
- string documentName = this.GetValue(data, "documentName");
- string result = Path.GetFileNameWithoutExtension(documentName);
- string fileName = result + "_downloaded.docx";
-
- Stream stream = new MemoryStream();
- file.CopyTo(stream);
-
-
- var config = LoadAppSettings();
- var client = GetAuthenticatedGraphClient(config);
-
- var request = client.Me.Drive.Root.Children.Request();
- string folderId = string.Empty;
- var results = await request.GetAsync();
-
- var folder = results.FirstOrDefault(f => f.Name == folderName && f.Folder != null);
- if (folder != null)
- {
- // Save the matching folderId
- folderId = folder.Id;
- }
-
- var uploadedFile = client.Me.Drive.Items[folderId]
- .ItemWithPath(fileName)
- .Content
- .Request()
- .PutAsync(stream)
- .Result;
-
-}
-
-private string GetValue(IFormCollection data, string key)
-{
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
-}
-```
-
-* Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "TenantId": "Your_Tenant_ID",
- "applApplicationIdicationId": "Your_Application_ID",
- "FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive"
-}
-
-```
-
-N> Replace **Your_Tenent_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name.
-
-**Step 4:** Modify the index File in the Document Editor sample
-
-In the client-side, to export the document into blob the document using [`saveAsBlob`](../../api/document-editor/#saveAsBlob) and sent to server-side for saving in One Drive.
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/save-one-drive/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-one-drive/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/save-one-drive/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% endif %}
-
-N> The following NuGet packages are required to use the previous code example
-* **Microsoft.Identity.Client**
-* **Microsoft.Graph**
-* **Microsoft.Extensions.Configuration**
-* **Microsoft.Extensions.Configuration.FileExtensions**
-* **Microsoft.Extensions.Configuration.Json**
-
-You can install these packages using the NuGet Package Manager in Visual Studio or Visual Studio Code.
diff --git a/ej2-javascript/document-editor/saving-documents/server-side-export.md b/ej2-javascript/document-editor/saving-documents/server-side-export.md
deleted file mode 100644
index 6c346407e..000000000
--- a/ej2-javascript/document-editor/saving-documents/server-side-export.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: post
-title: Server side export in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Server side export in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Server side export
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Server side export in ##Platform_Name## Document editor control
-
-## SFDT to DOCX export
-
-Document Editor supports server-side export of **Syncfusion Document Text (.sfdt)** to Doc, DOCX, RTF, Txt, WordML, HTML formats using server-side helper **Syncfusion.EJ2.DocumentEditor** available in ASP.NET Core & ASP.NET MVC platform in the below NuGet's.
-
-* [Syncfusion.EJ2.WordEditor.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core)
-* [Syncfusion.EJ2.WordEditor.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc5)
-* [Syncfusion.EJ2.WordEditor.AspNet.Mvc4](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc4)
-
-Please refer the following code example.
-
-```c#
- //API controller for the conversion.
- [HttpPost]
- public void ExportSFDT([FromBody]SaveParameter data)
- {
- Stream document = WordDocument.Save(data.content, FormatType.Docx);
- FileStream file = new FileStream("sample.docx", FileMode.OpenOrCreate, FileAccess.ReadWrite);
- document.CopyTo(file);
- file.Close();
- document.Close();
- }
-
- public class SaveParameter
- {
- public string content { get; set; }
- }
-```
-
-Please refer the client side example to serialize the sfdt and send to the server.
-
-```ts
-import { DocumentEditor, FormatType, WordExport, SfdtExport } from '@syncfusion/ej2-documenteditor';
-
-//Inject require modules.
-DocumentEditor.Inject(WordExport, SfdtExport);
-
-let documenteditor: DocumentEditor = new DocumentEditor({ enableSfdtExport: true, enableWordExport: true, enableTextExport: true });
-
-documenteditor.appendTo('#DocumentEditor');
-
-//Open the sfdt document.
-documenteditor.open(sfdt);
-
-document.getElementById('export').addEventListener('click', () => {
- let http: XMLHttpRequest = new XMLHttpRequest();
- http.open('POST', 'http://localhost:5000/api/documenteditor/ExportSFDT');
- http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
- http.responseType = 'json';
- //Serialize document content as SFDT.
- let sfdt: any = { content: documenteditor.serialize() };
- //Send the sfdt content to server side.
- http.send(JSON.stringify(sfdt));
-});
-
-```
-
-> DocumentEditor object is available in DocumentEditorContainer component(DocumentEditor packaged with toolbar, statusbar & properties pane) as [`documentEditor`](../../api/document-editor-container#documenteditor)
diff --git a/ej2-javascript/document-editor/scrolling-zooming.md b/ej2-javascript/document-editor/scrolling-zooming.md
deleted file mode 100644
index 57b512715..000000000
--- a/ej2-javascript/document-editor/scrolling-zooming.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-layout: post
-title: Scrolling zooming in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Scrolling zooming in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Scrolling zooming
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Scrolling zooming in ##Platform_Name## Document editor control
-
-The Document Editor renders the document as page by page. You can scroll through the pages by mouse wheel or touch interactions. You can also scroll through the page by using ‘scrollToPage()’ method of Document Editor instance. Refer to the following code example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/scrolling-zooming-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/scrolling-zooming-cs1" %}
-{% endif %}
-
-> Calling this method brings the specified page into view but doesn’t move selection. Hence this method will work by default. That is, it works even if selection is not enabled.
-
-In case, if you wish to move the selection to any page in Document Editor and bring it into view, you can use ‘goToPage()’ method of selection instance. Refer to the following code example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/scrolling-zooming-cs2" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/scrolling-zooming-cs2" %}
-{% endif %}
-
-## Zooming
-
-You can scale the contents in Document Editor ranging from 10% to 500% of the actual size. You can achieve this using mouse or touch interactions. You can also use ‘zoomFactor’ property of Document Editor instance. The value can be specified in a range from 0.1 to 5. Refer to the following code example.
-
-```ts
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
-
-//Initialize the Document Editor module.
-let documenteditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
-});
-
-// Enable all the built in modules.
-documenteditor.enableAllModules();
-
-documenteditor.appendTo('#DocumentEditor');
-//set zoom factor.
-documenteditor.zoomFactor = 3;
-```
-
-## Page Fit Type
-
-Apart from specifying the zoom factor as value, the Document Editor provides option to specify page fit options such as fit to full page or fit to page width. You can set this option using ‘fitPage’ method of Document Editor instance. Refer to the following code example.
-
-```ts
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
-//Initialize the Document Editor module.
-let documenteditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false, serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/'
-});
-
-// Enable all the built in modules.
-documenteditor.enableAllModules();
-
-documenteditor.appendTo('#DocumentEditor');
-//Set zoom factor to fit page width.
-documenteditor.fitPage('FitPageWidth');
-```
-
-## Zoom option using UI
-
-The following code example shows how to provide zoom options in Document Editor.
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs3/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/scrolling-zooming-cs3" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs3/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/scrolling-zooming-cs3/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/scrolling-zooming-cs3" %}
-{% endif %}
diff --git a/ej2-javascript/document-editor/section-format.md b/ej2-javascript/document-editor/section-format.md
deleted file mode 100644
index 85d20bec3..000000000
--- a/ej2-javascript/document-editor/section-format.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-layout: post
-title: Section format in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Section format in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Section format
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Section format in ##Platform_Name## Document editor control
-
-Document Editor supports various section formatting such as page size, page margins, and more.
-
-## Page size
-
-You can get or set the size of a section at cursor position by using the following sample code.
-
-```ts
-documenteditor.selection.sectionFormat.pageWidth = 500;
-documenteditor.selection.sectionFormat.pageHeight = 600;
-```
-
-You can change the orientation of the page by swapping the values of page width and height respectively.
-
-## Page margins
-
-Left and right page margin defines the gap between the document content from left and right side of the page respectively. Top and bottom page margins defines the gap between the document content from header and footer of the page respectively.
-Refer to the following sample code.
-
-```ts
-documenteditor.selection.sectionFormat.leftMargin = 10;
-documenteditor.selection.sectionFormat.rightMargin = 10;
-documenteditor.selection.sectionFormat.bottomMargin = 10;
-documenteditor.selection.sectionFormat.topMargin = 10;
-```
-
->Note: The maximum value of Margin is 1584, as per Microsoft Word application and you can set any value less than or equal to 1584 to this property. If you set any value greater than 1584, then Syncfusion Document editor will automatically reset as 1584.
-
-## Header distance
-
-You can define the distance of header content from the top of the page by using the following sample code.
-
-```ts
-documenteditor.selection.sectionFormat.headerDistance = 72;
-```
-
-## Footer distance
-
-You can define the distance of footer content from the bottom of the page by using the following sample code.
-
-```ts
-documenteditor.selection.sectionFormat.footerDistance = 72;
-```
-
-## Columns
-
-You can define the number of columns, column width, and space between columns for the pages in a section.
-
-The following code example illustrates how to define the two columns layout for the pages in a section.
-
-```ts
-let column: SelectionColumnFormat = new SelectionColumnFormat(container.documentEditor.selection);
-column.width = 216;
-column.space = 36;
-container.documentEditor.selection.sectionFormat.columns = [column, column];
-container.documentEditor.selection.sectionFormat.lineBetweenColumns = true;
-```
-
-## Breaks
-
-You can insert column break. The following code example illustrates how to insert a column break.
-
-```ts
-container.documentEditor.editor.insertColumnBreak();
-```
-
-You can insert next page section break to start the new section on the next page.
-
-The following code example illustrates how to insert a next page section break.
-
-```ts
-container.documentEditor.editor.insertSectionBreak(SectionBreakType.NewPage);
-```
-
-You can insert continuous section break to start the new section on the same page.
-
-The following code example illustrates how to insert a continuous section break.
-
-```ts
-container.documentEditor.editor.insertSectionBreak(SectionBreakType.Continuous);
-```
-
-## See Also
-
-* [Page setup dialog](../document-editor/dialog#page-setup-dialog)
-* [Column dialog](../document-editor/dialog#column-dialog)
diff --git a/ej2-javascript/document-editor/security-advisories.md b/ej2-javascript/document-editor/security-advisories.md
deleted file mode 100644
index 337ee7e07..000000000
--- a/ej2-javascript/document-editor/security-advisories.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: Security Advisories in ##Platform_Name## Document Editor control | Syncfusion
-description: Learn here all about Security Advisories in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Security advisories
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Security Advisories in Syncfusion® EJ2 Controls
-
-Syncfusion® places the utmost priority on the security of our controls. Users can rest assured about the security of our controls, as we have implemented all necessary measures to mitigate security vulnerabilities such as cross-site scripting and insecure dependencies. To meet security standards, Syncfusion® utilizes the [ESLint](https://eslint.org/) and [ESLint plugin security](https://github.com/eslint-community/eslint-plugin-security#rules) tools for static code analysis. Additionally, Syncfusion® packages undergo software composition analysis using the [SOOS](https://soos.io/) security tool.
-
-This document provides a description of the security updates available for Syncfusion® Essential® JS2 controls for volume release.
-
-## Security Updates
-
-The following security updates are available for Syncfusion® DocumentEditor control and are listed based on the release version.
-
-### 2024 Volume 2 (v26.2.4) - July 25, 2024
-
-This release resolves critical and moderate security vulnerabilities affecting the Syncfusion® Document Editor Docker Image.
-
-**Threat:**
-
-* ASP.NET Core Components: Multiple moderate vulnerabilities in Kestrel’s HTTP request handling could expose applications to access control issues and data leakage.
-
-* Npgsql: A potential SQL injection vulnerability via Protocol Message Size Overflow was detected.
-
-* Dynamic LINQ: Vulnerable to remote code execution via untrusted input manipulation.
-
-**Resolution:**
-
-* Updated affected ASP.NET Core packages.
-
-* The Npgsql package and Dynamic LINQ have been removed, as they are no longer required, to enhance security and mitigate the risk of SQL injection attacks.
-
-## Common Security Updates
-
-{% if page.publishingplatform == "typescript" %}
-
-For details on common security updates related to Syncfusion® products, please refer to [this link](https://ej2.syncfusion.com/documentation/common/security). This resource provides information on the latest advisories and best practices to help ensure the security and integrity of your applications.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-For details on common security updates related to Syncfusion® products, please refer to [this link](https://ej2.syncfusion.com/javascript/documentation/common/security). This resource provides information on the latest advisories and best practices to help ensure the security and integrity of your applications.
-
-{% endif %}
-
-## Security Issue
-
-If users discover any security issues or need assistance in resolving them with Syncfusion® controls, please contact us by creating a support ticket on [our support site](https://syncfusion.com/support) or by posting your query on Stack Overflow with the tag `syncfusion-ej2`.
diff --git a/ej2-javascript/document-editor/server-deployment/how-to-deploy-documenteditor-java-web-api-in-azure.md b/ej2-javascript/document-editor/server-deployment/how-to-deploy-documenteditor-java-web-api-in-azure.md
deleted file mode 100644
index 8ad5789a3..000000000
--- a/ej2-javascript/document-editor/server-deployment/how-to-deploy-documenteditor-java-web-api-in-azure.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: post
-title: How to deploy documenteditor java web api in azure in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about How to deploy documenteditor java web api in azure in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: How to deploy documenteditor java web api in azure
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# How to deploy documenteditor java web api in azure in ##Platform_Name## Document editor control
-
-## Prerequisites
-
-Have [`Azure account`](https://azure.microsoft.com/en-gb/) and [`Azure CLI`](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest) setup in your environment.
-
-You can get the example [`web service project from GitHub`](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-Java-WebService) and then perform the following steps to create the packages and host in azure app service.
-
-**Step 1:** Clean the package using following command.
-
-```console
-mvn clean package
-```
-
-**Step 2:** Run the application locally using following command.
-
-```console
-mvn spring-boot:run
-```
-
-**Step 3:** Build the package using following command.
-
-```console
-mvn package
-```
-
-Above package generation command creates the `**tomcat-0.0.1-SNAPSHOT.war**` in the below location in the sample folder.
-
-`target/tomcat-0.0.1-SNAPSHOT.war`
-
-**Step 4:** Create a Azure app service with Java & Tomcat. For example, create the app services name as `documenteditorjava`.
-
-**Step 5:** After creating app service, navigate to `Advanced Tools` options under `Development Tools`.
-
-
-
-Then, click `Go` and select the `CMD` options under `Debug console`.
-
-
-
-**Step 6:** Once the file manager is opened, please navigate to
-
-`site -> wwwroot -> webapps`
-
-**Step 7:** Now, upload the generated war file `tomcat-0.0.1-SNAPSHOT.war`. Uploaded war file gets extracted automatically, it will uploaded like below:
-
-
-
-**Step 8:** Browse to the app.
-
-Browse to the deployed app at `http://.azurewebsites.net`, i.e. `http://documenteditorjava.azurewebsites.net`. Browse this link and it navigate to the Document Editor Web API control `http://documenteditorjava.azurewebsites.net/tomcat-0.0.1-SNAPSHOT`. It returns the default get method response.
-
-Append the app service running the URL `http://documenteditorjava.azurewebsites.net/tomcat-0.0.1-SNAPSHOT` to the service URL in the client-side Document Editor control. For more information about the Document Editor control, refer to this [`getting started page`](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started).
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md b/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md
deleted file mode 100644
index 8100bc481..000000000
--- a/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-amazon-kubernetes-service.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-layout: post
-title: Deploy Syncfusion Word Processor in Amazon Kubernetes Service
-description: Learn here all about How to deploy word processor server docker container in amazon kubernetes service in Syncfusion Document editor.
-platform: ej2-javascript
-control: How to deploy word processor server docker container in amazon kubernetes service
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# How to deploy Word Processor server in Amazon Kubernetes Service
-
-## Prerequisites
-
-* `AWS Account` :Have Amazon account
-* `AWS CLI`: Install the AWS Command Line Interface (CLI) on your local machine.
-* `Kubectl` : Install the Kubernetes command-line tool kubectl on your local machine.
-* `Docker`: Install Docker on your local machine.
-* `Word Processor Docker Image`: Have a Docker image of the Word Processor server ready to deploy.
-
-To deploy the Word Processor server docker image, need to follow the below process
-
-* Push Docker Image to Registry (Amazon Elastic Registry)
-* Deploy Docker Image on Amazon Kubernetes Service
-
-Lets us discuss briefly about the each process
-
-## Push the Docker image to the Amazon Elastic Registry
-
-**Step 1:** Dockerize the Word Processor Server Application with the image name [syncfusion/word-processor-server](https://hub.docker.com/r/syncfusion/word-processor-server)
-
-```
-docker build -t
-```
-
-**Step 2:** Create a private repository name ‘documenteditor’ in Amazon Elastic Container Registry (ECR) using the AWS CLI or AWS Console to push the docker image
-
-```
-aws ecr create-repository --repository-name
-```
-
-**Step 3:** Tag the image to push to ECR
-
-```
-docker tag :latest /:latest
-```
-Refer to the following example to tag the image
-
-```
-docker tag syncfusion/word-processor-server:latest 123456.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest
-```
-
-> Get the ECR registry URI from AWS console or using the below AWS CLI command
-
-```
-aws ecr describe-repositories --repository-names --query 'repositories[*].repositoryUri' --output text
-```
-
-**Step 4:** Login to the ECR registry using the AWS CLI to push the docker image
-
-```
-aws ecr get-login-password --region | docker login --username AWS --password-stdin
-```
-
-Replace with your AWS region and with your ECR registry URI.
-
-**Step 5:** Push the tagged image to ECR
-
-```
-docker push /:latest
-```
-
-## Deploy Docker Image on Amazon Kubernetes Service
-
-Follow the below steps to deploy the Docker image from the Amazon Elastic Registry( ECR) to Amazon Kubernetes Services (EKS)
-
-**Step 1:** DCreate Amazon EKS cluster using the AWS Console
-
-**Step 2:** Authenticate with AWS ECR
-Need to get the authenticate with the AWS ECR to pull the image from the registry
-
-```
-aws ecr get-login-password --region | docker login --username AWS --password-stdin .dkr.ecr..amazonaws.com
-```
-
-**Step 3:** : Configure Kubernetes to Communicate with the Cluster
-
-```
-aws eks --region update-kubeconfig --name
-```
-
-**Step 4:** Tag the Docker Image to the created cluster
-
-```
-docker tag .dkr.ecr..amazonaws.com/:.dkr.ecr..amazonaws.com/:
-```
-
-Refer to the following example
-```
-docker tag 12345.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest 98765ABCD.dkr.ecr.us-east-1.amazonaws.com/documenteditor:latest
-```
-
-In this command:
-* should be replaced with your EKS cluster ID, which is the base part of your EKS cluster endpoint (e.g., abcd1234).
-* should be replaced with your AWS region.
-
-
-**Step 5:** To create Kubernetes deployment write Kubernetes manifest
-
-**i.** Create a Kubernetes Deployment manifest (deployment.yaml) for your application. Specify the Docker image location.
-
-```
-apiVersion: apps/v1
-kind: Deployment
-metadata:
- name: ```your-deployment```
-spec:
- replicas: 3
- selector:
- matchLabels:
- app: ```your-app```
- template:
- metadata:
- labels:
- app: ```your-app```
- spec:
- containers:
- - name: your-container
- image: ```.dkr.ecr..amazonaws.com/your-repository-name:tag```
- ports:
- - containerPort: 80
-```
-**ii.** Apply the Deployment manifest to create the deployment in your EKS cluster
-
-```
-kubectl apply -f deployment.yaml
-```
-
-**iii.** Use port forwarding to access the Word Processor Server application locally and verify its functionality
-
-```
-kubectl port-forward pod-name local-port:container-port
-```
-
-> Get the pod names in AWS Console or using the below AWS CLI command
-
-```
-kubectl get pods
-```
-
-Finally you can get the sample in the localhost http://``````/api/documenteditor/
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-app-service.md b/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-app-service.md
deleted file mode 100644
index 0b4033f36..000000000
--- a/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-app-service.md
+++ /dev/null
@@ -1,57 +0,0 @@
----
-layout: post
-title: How to deploy word processor server docker container in azure app service in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about How to deploy word processor server docker container in azure app service in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: How to deploy word processor server docker container in azure app service
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# How to deploy word processor server docker container in azure app service in ##Platform_Name## Document editor control
-
-## Prerequisites
-
-* Have [`Azure account`](https://azure.microsoft.com/en-gb/) and [`Azure CLI`](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest) setup in your environment.
-
-* Run the following command to open the Azure login page. Sign into your [`Microsoft Azure account`](https://azure.microsoft.com/en-gb/).
-
-```
-az login
-```
-
-**Step 1:** Create a resource group.
-
-Create a resource group using the [`az group create`](https://docs.microsoft.com/en-us/cli/azure/group#az-group-create) command.
-
-The following example creates a resource group named documenteditorresourcegroup in the eastus location.
-
-```
-az group create --name documenteditorresourcegroup --location "East US"
-```
-
-**Step 2:** Create an Azure App Service plan.
-
-Create an App Service plan in the resource group with the [`az appservice plan create`](https://docs.microsoft.com/en-us/cli/azure/appservice/plan?view=azure-cli-latest#az-appservice-plan-create) command.
-
-The following example creates an App Service plan named documenteditorappservice in the Standard pricing tier (--sku S1) and in a Linux container (--is-linux).
-
-```
-az appservice plan create --name documenteditorappservice --resource-group documenteditorresourcegroup --sku S1 --is-linux
-```
-
-**Step 3:** Create a Docker Compose app.
-
-Create a multi-container [`web app`](https://docs.microsoft.com/en-us/azure/app-service/containers/app-service-linux-intro) in the documenteditorappservice App Service plan with the [`az webapp create`](https://docs.microsoft.com/en-us/cli/azure/webapp?view=azure-cli-latest#az-webapp-create) command. The following command creates the web app using the provided Docker compose file. Please look into the section for getting started with Docker compose to create the Docker compose file for the Document Editor server and use the created Docker compose file here.
-
-```
-az webapp create --resource-group documenteditorresourcegroup --plan documenteditorappservice --name documenteditor-server --multicontainer-config-type compose --multicontainer-config-file documenteditor-server-compose.yml
-```
-
-**Step 4:** Browse to the app.
-
-Browse to the deployed app at `http://.azurewebsites.net`, i.e. `http://documenteditor-server.azurewebsites.net`. Browse this link and navigate to the Document Editor Web API control `http://documenteditor-server.azurewebsites.net/api/documenteditor`. It returns the default get method response.
-
-Append the app service running the URL `http://documenteditor-server.azurewebsites.net/api/documenteditor/` to the service URL in the client-side Document Editor control. For more information about the Document Editor control, refer to this [`getting started page`](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started).
-
-For more information about the app container service, please look deeper into the [`Microsoft Azure Container Service`](https://docs.microsoft.com/en-us/azure/app-service/containers/quickstart-multi-container) for a production-ready setup.
diff --git a/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-kubernetes-service.md b/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-kubernetes-service.md
deleted file mode 100644
index a8882ba94..000000000
--- a/ej2-javascript/document-editor/server-deployment/how-to-deploy-word-processor-server-docker-container-in-azure-kubernetes-service.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-layout: post
-title: How to deploy word processor server docker container in azure kubernetes service in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about How to deploy word processor server docker container in azure kubernetes service in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: How to deploy word processor server docker container in azure kubernetes service
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# How to deploy word processor server docker container in azure kubernetes service in ##Platform_Name## Document editor control
-
-## Prerequisites
-
-* Have [`Azure account`](https://azure.microsoft.com/en-gb/) and [`Azure CLI`](https://docs.microsoft.com/en-us/cli/azure/?view=azure-cli-latest) setup in your environment.
-
-* Run the following command to open the Azure login page. Sign into your [`Microsoft Azure account`](https://azure.microsoft.com/en-gb/).
-
-```
-az login
-```
-
-**Step 1:** Create a resource group.
-
-Create a resource group using the [`az group create`](https://docs.microsoft.com/en-us/cli/azure/group#az-group-create) command.
-
-The following example creates a resource group named documenteditorresourcegroup in the eastus location.
-
-```
-az group create --name documenteditorresourcegroup --location "East US"
-```
-
-**Step 2:** Create AKS cluster.
-
-Use the [`az aks create`](https://docs.microsoft.com/en-us/cli/azure/aks?view=azure-cli-latest#az-aks-create) command to create an AKS cluster. The following example creates a cluster named documenteditorcluster with one node.
-
-```
-az aks create --resource-group documenteditorresourcegroup --name documenteditorcluster --node-count 1
-```
-
-**Step 3:** Connect to the cluster.
-
-Install the [`kubectl`](https://kubernetes.io/docs/reference/kubectl/kubectl/) into the workspace using the following command.
-
-```
-az aks install-cli
-```
-
-To configure kubectl to connect to your Kubernetes cluster, use the [`az aks get-credentials`](https://docs.microsoft.com/en-us/cli/azure/aks?view=azure-cli-latest#az-aks-get-credentials) command. This command downloads credentials and configures the Kubernetes CLI to use them.
-
-```
-az aks get-credentials --resource-group documenteditorresourcegroup --name documenteditorcluster
-```
-
-**Step 4:** Create Kubernetes Services and Deployments
-
-[`Kubernetes Services`](https://kubernetes.io/docs/concepts/services-networking/service/) and [`Deployments`](https://kubernetes.io/docs/concepts/workloads/controllers/deployment/) can be configured in a file. To run the Document Editor server, you must define a Service and a Deployment documenteditorserver. To do this, create the documenteditor-server.yml file in the current directory using the following code.
-
-```yaml
- apiVersion: apps/v1
- kind: Deployment
- metadata:
- labels:
- app: documenteditorserver
- name: documenteditorserver
- spec:
- replicas: 1
- selector:
- matchLabels:
- app: documenteditorserver
- strategy: {}
- template:
- metadata:
- labels:
- app: documenteditorserver
- spec:
- containers:
- - image: syncfusion/word-processor-server:latest
- name: documenteditorserver
- ports:
- - containerPort: 80
- env:
- - name: SYNCFUSION_LICENSE_KEY
- value: "YOUR_LICENSE_KEY"
- ---
- apiVersion: v1
- kind: Service
- metadata:
- labels:
- app: documenteditorserver
- name: documenteditorserver
- spec:
- ports:
- - port: 80
- targetPort: 80
- selector:
- app: documenteditorserver
- type: LoadBalancer
-```
-
-**Step 5:** To create all Services and Deployments needed to run the Document Editor server, execute the following.
-
-```console
-kubectl create -f ./documenteditor-server.yml
-```
-
-Run the following command to get the Kubernetes cluster deployed service details and copy the external IP address of the Document Editor service.
-
-```console
-kubectl get all
-```
-
-Browse the copied external IP address and navigate to the Document Editor Web API control `http:///api/documenteditor`. It returns the default get method response.
-
-**Step 6:** Append the Kubernetes service running the URL `http:///api/documenteditor/` to the service URL in the client-side Document Editor control. For more information about the Document Editor control, refer to this [`getting started page`](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started).
-
-For more details about the Azure Kubernetes service, please look deeper into [`Microsoft Azure Kubernetes Service`](https://docs.microsoft.com/en-us/azure/aks/kubernetes-walkthrough) for a production-ready setup.
diff --git a/ej2-javascript/document-editor/server-deployment/how-to-publish-documenteditor-web-api-application-in-azure-app-service-from-visual-studio.md b/ej2-javascript/document-editor/server-deployment/how-to-publish-documenteditor-web-api-application-in-azure-app-service-from-visual-studio.md
deleted file mode 100644
index 86f10c3a4..000000000
--- a/ej2-javascript/document-editor/server-deployment/how-to-publish-documenteditor-web-api-application-in-azure-app-service-from-visual-studio.md
+++ /dev/null
@@ -1,44 +0,0 @@
----
-layout: post
-title: How to publish documenteditor web api application in azure app service from visual studio in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about How to publish documenteditor web api application in azure app service from visual studio in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: How to publish documenteditor web api application in azure app service from visual studio
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# How to publish documenteditor web api application in azure app service from visual studio in ##Platform_Name## Document editor control
-
-## Prerequisites
-
-* Visual Studio 2017 or 2019.
-* An [`Azure subscription`](https://azure.microsoft.com/en-gb/).
-* The Document Editor Web API controller application from [`here`](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices).
-
-Make sure you build the project using the Build > Build Solution menu command before following the deployment steps.
-
-## Publish to Azure App Service
-
-**Step 1:** In Solution Explorer, right-click the project and click Publish (or use the Build > Publish menu item).
-
-
-
-**Step 2:** If you have previously configured any publishing profiles, the Publish pane appears, in which case select Create new profile.
-
-**Step 3:** In the Pick a publish target dialog box, select App Service.
-
-
-
-**Step 4:** Select Publish. The Create App Service dialog box appears. Sign in with your Azure account, if necessary, and then the default app service settings populate the fields.
-
-
-
-**Step 5:** Select Create. Visual Studio deploys the app to your Azure App Service, and the web app loads in your browser with the app name at `http://.azurewebsites.net` (i.e. `http://ej2-documenteditor-server20200514102909.azurewebsites.net`).
-
-**Step 6:** Navigate to Document Editor Web API control `http://ej2-documenteditor-server20200514102909.azurewebsites.net/api/documenteditor`. It returns the default get method response.
-
-Append the app service running the URL `http://ej2-documenteditor-server20200514102909.azurewebsites.net/api/documenteditor` to the service URL in the client-side Document Editor control. For more information about how to get started with the Document Editor control, refer to this [`getting started page`](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started).
-
-For more information about the app container service, please look deeper into the [`Microsoft Azure App Service`](https://docs.microsoft.com/en-us/visualstudio/deployment/) for a production-ready setup.
diff --git a/ej2-javascript/document-editor/server-deployment/word-processor-server-docker-image-overview.md b/ej2-javascript/document-editor/server-deployment/word-processor-server-docker-image-overview.md
deleted file mode 100644
index 712ad9118..000000000
--- a/ej2-javascript/document-editor/server-deployment/word-processor-server-docker-image-overview.md
+++ /dev/null
@@ -1,231 +0,0 @@
----
-layout: post
-title: Overview in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Word processor server docker image overview in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Word processor server docker image overview
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# Word processor server docker image overview in ##Platform_Name## Document editor control
-
-The Syncfusion® **Word Processor (also known as Document Editor)** is a component with editing capabilities like Microsoft Word. It is used to create, edit, view, and print Word documents. It provides all the common word processing abilities, including editing text; formatting contents; resizing images and tables; finding and replacing text; importing, exporting, and printing Word documents; and using bookmarks and tables of contents.
-
-This Docker image is the predefined Docker container of Syncfusion’s Word Processor backend. You can deploy it quickly to your infrastructure.
-
-Word Processor is a commercial product, and it requires a valid license to use it in a production environment [`(request license or trial key).`](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key)
-
-The Word Processor is supported in the JavaScript, Angular, React, Vue, ASP.NET Core, ASP.NET MVC, and Blazor platforms.
-
-## Prerequisites
-
-Have [`Docker`](https://www.docker.com/products/container-runtime#/download) installed in your environment:
-* On Windows, install [`Docker for Windows`](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
-* On macOS, install [`Docker for Mac`](https://hub.docker.com/editions/community/docker-ce-desktop-windows).
-
-## How to deploy Word Processor Docker image
-
-**Step 1:** Pull the word-processor-server image from Docker Hub.
-
-```console
-docker pull syncfusion/word-processor-server
-```
-
-**Step 2:** Create the docker-compose.yml file with the following code in your file system.
-
-```yaml
- version: '3.4'
-
- services:
- word-processor-server:
- image: syncfusion/word-processor-server:latest
- environment:
- #Provide your license key for activation
- SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
- ports:
- - "6002:80"
-```
-
-**Step 3:** In a terminal tab, navigate to the directory where you’ve placed the docker-compose.yml file and execute the following.
-
-```console
-docker-compose up
-```
-
-Now the Word Processor server Docker instance runs in the localhost with the provided port number `http://localhost:6002`. Open this link in a browser and navigate to the Word Processor Web API control `http://localhost:6002/api/documenteditor`. It returns the default get method response.
-
-**Step 4:** Append the Docker instance running the URL `(http://localhost:6002/api/documenteditor)` to the service URL in the client-side Word Processor control. For more information about how to get started with the Word Processor control, refer to this [`getting started page.`](https://ej2.syncfusion.com/javascript/documentation/document-editor/getting-started)
-
-```
-
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## How to configure spell checker dictionaries path in Docker compose file
-
-**Step 1:** In the Docker compose file, mount the local directory as a container volume using the following code.
-
-```yaml
- version: '3.4'
- services:
- word-processor-server:
- image: syncfusion/word-processor-server:latest
- environment:
- #Provide your license key for activation
- SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
- volumes:
- - ./data:/app/data
- ports:
- - "6002:80"
-```
-
-This YAML definition binds the data folder that is available in the Docker compose file directory.
-
-**Step 2:** In the data folder, include the dictionary files (.dic, .aff) and JSON file. The JSON file should contain the language based dictionary file configuration in the following format.
-
-```yaml
- [
- {
- "LanguadeID": 1036,
- "DictionaryPath": "fr_FR.dic",
- "AffixPath": "fr_FR.aff",
- "PersonalDictPath": "customDict.dic"
- },
- {
- "LanguadeID": 1033,
- "DictionaryPath": "en_US.dic",
- "AffixPath": "en_US.aff",
- "PersonalDictPath": "customDict.dic"
- }
- ]
-```
-
->Note: By default, the json file name should be "spellcheck.json". You can also use different file name by mounting the file name to 'SPELLCHECK_JSON_FILENAME' attribute in Docker compose file as below,
-
-```yaml
- version: '3.4'
-
- services:
- word-processor-server:
- image: syncfusion/word-processor-server:latest
- environment:
- #Provide your license key for activation
- SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
- SPELLCHECK_DICTIONARY_PATH: data
- SPELLCHECK_JSON_FILENAME: spellcheck1.json
- volumes:
- - ./data:/app/data
- ports:
- - "6002:80"
-```
-
-**Step 3:** For handling the personal dictionary, place an empty .dic file (e.g.,. customDict.dic file) in the data folder.
-
-**Step 4:** Provide the configured volume path to the environment variable like in the following in the Docker compose file.
-
-```yaml
- version: '3.4'
- services:
- word-processor-server:
- image: syncfusion/word-processo -server:latest
- environment:
- #Provide your license key for activation
- SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
- SPELLCHECK_DICTIONARY_PATH: data
- volumes:
- - ./data:/app/data
- ports:
- - "6002:80"
-```
-
-## How to copy template Word documents to Docker image
-
-You can copy the required template Word documents into docker container while deploying the docker image to server. You can open these Word documents present in the server by passing the document path (name with relative path) to LoadDocument() web API.
-
->Note: Place the word files in the data folder mentioned in the volumes section(i.e., C:/Docker/Data) of the docker-compose.yml file. All the files present in the folder path (C:/Docker/Data) mentioned in the volumes section of ‘docker-compose.yml’ file will be copied to the respective folder (/app/Data) of docker container. The Word documents copied to docker container can be processed using the 'LoadDocument' web API.
-
-The following code example shows how to use LoadDocument() API in Document Editor.
-
-```ts
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' });
-DocumentEditorContainer.Inject(Toolbar);
-
-container.created = function () {
- var dataContext = this;
- var uploadDocument = new FormData();
- uploadDocument.append('DocumentName', 'Getting Started.docx');
- var baseUrl = 'http://localhost:6002/api/documenteditor/LoadDocument';
- var httpRequest = new XMLHttpRequest();
- httpRequest.open('POST', baseUrl, true);
- httpRequest.onreadystatechange = function () {
- if (httpRequest.readyState === 4) {
- if (httpRequest.status === 200 || httpRequest.status === 304) {
- dataContext.container.documentEditor.open(httpRequest.responseText);
- }
- }
- };
- httpRequest.send(uploadDocument);
- dataContext.container.documentEditor.spellChecker.languageID = 1033;
-};
-
-container.appendTo('#container');
-```
-
-Refer to these getting started pages to create a Word Processor in [`Angular`](https://ej2.syncfusion.com/angular/documentation/document-editor/getting-started/), [`React`](https://ej2.syncfusion.com/react/documentation/document-editor/getting-started/), [`Vue`](https://ej2.syncfusion.com/vue/documentation/document-editor/getting-started/), [`ASP.NET MVC`](https://ej2.syncfusion.com/aspnetmvc/documentation/document-editor/getting-started/), [`ASP.NET Core`](https://ej2.syncfusion.com/aspnetcore/documentation/document-editor/getting-started-core/), and [`Blazor`](https://blazor.syncfusion.com/documentation/document-editor/getting-started/server-side-application/).
diff --git a/ej2-javascript/document-editor/shapes.md b/ej2-javascript/document-editor/shapes.md
deleted file mode 100644
index f62db9704..000000000
--- a/ej2-javascript/document-editor/shapes.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: post
-title: Shapes in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Shapes in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Shapes
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Shapes in ##Platform_Name## Document editor control
-
-Shapes are drawing objects that include a text box, rectangles, lines, curves, circles, etc. It can be preset or custom geometry. At present, DocumentEditor does not have support to insert shapes. however, if the document contains a shape while importing, it will be preserved properly.
-
-## Supported shapes
-
-The DocumentEditor has preservation support for Lines, Rectangle, Basic Shapes, Block Arrows, Equation Shapes,Flowchart and Stars and Banners.
-
-
-
->Note: When using ASP.NET MVC service, the unsupported shapes will be converted as image and preserved as image.
-
-## Text box Shape
-
-A text box is a rectangular area on the document where you can enter text. When you click in a text box, a flashing cursor will display indicating that you can begin typing. It allows you to enter multiple lines of text with all text formatting.
-
-
-
-## Shape Resizer
-
-The DocumentEditor also supports a built-in shape resizer to resize the shapes present in the document. The shape resizer accepts both touch and mouse interactions.
-
-
-
-## Text wrapping style
-
-Text wrapping refers to how shapes fit with surrounding text in a document. Please [refer to this page](../document-editor/text-wrapping-style) for more information about text wrapping styles available in Word documents.
-
-## Positioning the shape
-
-DocumentEditor preserves the position properties of the shape and displays the shape based on position properties. It does not support modifying the position properties. Whereas the shape will be automatically moved along with text edited if it is positioned relative to the line or paragraph.
diff --git a/ej2-javascript/document-editor/spell-check.md b/ej2-javascript/document-editor/spell-check.md
deleted file mode 100644
index 3ddd7a3a9..000000000
--- a/ej2-javascript/document-editor/spell-check.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: post
-title: Spell check in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Spell check in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Spell check
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Spell check in ##Platform_Name## Document editor control
-
-Document Editor supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor's spell checker is compatible with [hunspell dictionary files](https://github.com/wooorm/dictionaries).
-
-```ts
-import { DocumentEditorContainer, Toolbar, SpellChecker } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true, enableSpellCheck: true
-});
-container.appendTo('#container');
-//Accessing spell checker.
-let spellChecker: SpellChecker = container.documentEditor.spellChecker;
-//Set language id to map dictionary in server side.;
-spellChecker.languageID = 1033;
-spellChecker.removeUnderline = false;
-//Allow suggetion for miss spelled word/
-spellChecker.allowSpellCheckAndSuggestion = true;
-```
-
->Note: Document Editor requires server-side dependencies for spell check configuration.
-Refer to the [Document Editor Web API service projects from GitHub](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/tree/master/ASP.NET%20Core#spell-check) link for configuring spell checker in server-side.To know about server-side dependencies, please refer this [page](../document-editor/web-services-overview).
-
-## Features
-
-* Supports context menu suggestions.
-* Provides built-in options to Ignore, Ignore All, Change, Change All for error words in spell checker dialog.
-
-## Enable SpellCheck
-
-To enable spell check in DocumentEditor, set [`enableSpellCheck`](../api/document-editor#enablespellcheck) property as `true` and then configure SpellCheckSettings.
-
-## Disable SpellCheck
-
-To disable spell check in DocumentEditor, set [`enableSpellCheck`](../api/document-editor#enablespellcheck) property as `false` or remove [`enableSpellCheck`](../api/document-editor#enablespellcheck) property initialization code. The default value of this property is false.
-
-## Spell check settings
-
-### Remove Underline
-
-By default, mis-spelled words are marked with squiggly line. You can also disable this behavior by enabling the [`removeUnderline`](../api/document-editor/spellChecker#removeunderline) API and now, the squiggly lines will never be rendered for mis-spelled words.
-
-```ts
-documentEditor.spellChecker.removeUnderline = false;
-```
-
-### AllowSpellCheckAndSuggestion
-
-By default, on performing spell check in Document Editor, both spelling and suggestions of the mis-spelled words will be retrieved, and this mis-spelled words can be corrected through context menu suggestions. You can modify this behavior using the [`allowSpellCheckAndSuggestion`](../api/document-editor/spellChecker#allowspellcheckandsuggestion) API, which will perform only spell check.
-
-```ts
-documentEditor.spellChecker.allowSpellCheckAndSuggestion = false;
-```
-
-### LanguageID
-
-Document Editor provides multi-language spell check support. You can add as many languages (dictionaries) in the server-side and to use that language for spell checking in Document Editor, it must be matched with [`languageID`](../api/document-editor/spellChecker#languageid) you pass in the Document Editor.
-
-```ts
-documentEditor.spellChecker.languageID = 1033; //LCID of "en-us";
-```
-
-### EnableOptimizedSpellCheck
-
-Document Editor provides option to spellcheck page by page when loading the documents. The default value of this property is false, so when opening the document spellcheck web API will be called for each word in the document. To optimize the frequency of spellcheck web API calls, you can enable this property.
-
-The following code example illustrates how to enable optimized spell checking.
-
-```ts
-documentEditor.spellChecker.enableOptimizedSpellCheck = true;
-```
-
-### Spell check dictionary cache
-
-Starting from `v20.1.0.xx`, we have optimized the performance and memory usage of spell checker by adding a static method to initialize the dictionaries with specified cache count.
-
-By default, the spell checker holds only one language dictionary in memory. If you want to hold multiple dictionaries in memory, you need to set the cache limit by using `InitializeDictionaries` method as in the below example.
-
-```c#
- List spellDictCollection = new List();
- string personalDictPath = string.Empty;
- int cacheCount = 2;
-
- // Initialize dictionaries
- SpellChecker.InitializeDictionaries(spellDictCollection, personalDictPath, cacheCount);
-```
-
-If dictionaries are initialized using `InitializeDictionaries` method, then we should use default constructor of the `SpellChecker`to check spelling and get suggestion as in the below example code, it will prevent reinitialization of already loaded dictionaries.
-
-```c#
-public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)
-{
- try {
- SpellChecker spellCheck = new SpellChecker();
- spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);
- return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- }
- catch
- {
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
-}
-```
-
-Previously on every `SpellChecker.GetSuggestion()` method call, the `.aff` and dictionary data will be parsed to generate suggestion for miss spelled word. But, starting from `v20.1.0.xx`, the `.aff` and dictionary data will be parsed only for the first time alone while calling `SpellChecker.GetSuggestion()` method.
-
-### Add new root word and possible words to dictionary
-
-If you find any root word is missing in the dictionary file, then you can add that new root word and the rule to form the possible words to dictionary file using `AddNewWord` API in the server-side Spell check library.
-
->Note:
->1. The rules are framed automatically using the root word, the possible words and affix file.
->2. If you pass null for the parameters `affPath` and `possibleWords`, then it will add a single root word to dictionary.
->3. This API is included starting from `v20.2.0.xx`.
-
-The following code example demonstrates how to add a new root word to the dictionary along with the rule to form the possible words.
-
-```c#
-SpellChecker spellChecker = new SpellChecker();
-// Adds the specified new root word to the dictionary along with the rule to form the possible words.
-spellChecker.AddNewWord("en.dic","en.aff", "construct", new string[] { "constructs", "reconstruct", "constructed", "constructive" });
-```
-
-## Context menu
-
-Right click on error word to open the context menu with spell check options. Please see below screenshot for your reference.
-
-
-
-### Suggestions
-
-Context menu shows the suggestions for mis-spelled words. By clicking on the required word from suggestion, the error word gets replaced automatically.
-
-### Add To Dictionary
-
-Using this option, you can add the current word to the dictionary. So that the spell checker does not consider that word as error in future.
-
-### Ignore Once and Ignore All
-
-If you do not wish to add the word to dictionary and do not want to show error, use Ignore Once or Ignore All options.
-
-Ignore: ignore only the current occurrence of a word from error.
-
-Ignore All: ignore all occurrence of a word from error in the entire document.
-
-### Spelling
-
-Using this option, you can open spell check dialog. Please see below screenshot for your reference.
-
-
diff --git a/ej2-javascript/document-editor/table-format.md b/ej2-javascript/document-editor/table-format.md
deleted file mode 100644
index 15a26d87a..000000000
--- a/ej2-javascript/document-editor/table-format.md
+++ /dev/null
@@ -1,211 +0,0 @@
----
-layout: post
-title: Table format in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Table format in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Table format
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Table format in ##Platform_Name## Document editor control
-
-Document Editor customizes the formatting of table, or table cells such as table width, cell margins, cell spacing, background color, and table alignment. This section describes how to customize these formatting for selected cells, rows, or table in detail.
-
-## Cell margins
-
-You can customize the cell margins by using the following sample code.
-
-```ts
-//To change the left margin
-documenteditor.selection.cellFormat.leftMargin = 5.4;
-//To change the right margin
-documenteditor.selection.cellFormat.rightMargin = 5.4;
-//To change the top margin
-documenteditor.selection.cellFormat.topMargin = 5.4;
-//To change the bottom margin
-documenteditor.selection.cellFormat.bottomMargin = 5.4;
-```
-
-You can also define the default cell margins for a table. If the specific cell margin value is not defined explicitly in the cell formatting, the corresponding value will be retrieved from default cells margin of the table. Refer to the following sample code.
-
-```ts
-//To change the left margin
-documenteditor.selection.tableFormat.leftMargin = 5.4;
-//To change the right margin
-documenteditor.selection.tableFormat.rightMargin = 5.4;
-//To change the top margin
-documenteditor.selection.tableFormat.topMargin = 5.4;
-//To change the bottom margin
-documenteditor.selection.tableFormat.bottomMargin = 5.4;
-```
-
-## Background color
-
-You can explicitly set the background color of selected cells using the following sample code.
-
-```ts
-documenteditor.selection.cellFormat.background = '#E0E0E0';
-```
-
-Refer to the following sample code to customize the background color of the table.
-
-```ts
-documenteditor.selection.tableFormat.background = '#E0E0E0';
-```
-
-## Cell spacing
-
-Refer to the following sample code to customize the spacing between each cell in a table.
-
-```ts
-documenteditor.selection.tableFormat.cellSpacing = 2;
-```
-
-## Cell vertical alignment
-
-The content is aligned within a table cell to ‘Top’, ‘Center’, or ‘Bottom’. You can customize this property of selected cells. Refer to the following sample code.
-
-```ts
-documenteditor.selection.cellFormat.verticalAlignment = 'Bottom';
-```
-
-## Table alignment
-
-The tables are aligned in Document Editor to ‘Left’, ‘Right’, or ‘Center’. Refer to the following sample code.
-
-```ts
-documenteditor.selection.tableFormat.tableAlignment = 'Center';
-```
-
-## Cell width
-
-Set the desired width of table cells that will be considered when the table is layouted. Refer to the following sample code.
-
-```ts
-import { DocumentEditor, Editor, Selection, SfdtExport } from '@syncfusion/ej2-documenteditor';
-//Inject the required module
-DocumentEditor.Inject(Editor, Selection, SfdtExport);
-let documenteditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false,
- enableSelection: true,
- enableEditor: true,
- enableSfdtExport: true
-});
-documenteditor.appendTo('#DocumentEditor');
-documenteditor.editor.insertTable(2, 2);
-//To change the width of a cell
-documenteditor.selection.cellFormat.preferredWidthType = 'Point';
-documenteditor.selection.cellFormat.preferredWidth = 100;
-```
-
-## Table width
-
-You can set the desired width of a table in ‘Point ‘or ‘Percent’ type. Refer to the following sample code.
-
-```ts
-import { DocumentEditor, Editor, Selection, SfdtExport } from '@syncfusion/ej2-documenteditor';
-//Inject the required module
-DocumentEditor.Inject(Editor, Selection, SfdtExport);
-let documenteditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false,
- enableSelection: true,
- enableEditor: true,
- enableSfdtExport: true
-});
-documenteditor.appendTo('#DocumentEditor');
-documenteditor.editor.insertTable(2, 2);
-//To change the width of a table
-documenteditor.selection.tableFormat.preferredWidthType = 'Point';
-documenteditor.selection.tableFormat.preferredWidth = 300;
-```
-
-## Apply borders
-
-Document Editor exposes API to customize the borders for table cells by specifying the settings. Refer to the following sample code.
-
-```ts
-import { DocumentEditor, Editor, Selection, SfdtExport, BorderSettings } from '@syncfusion/ej2-documenteditor';
-//Inject the required module
-DocumentEditor.Inject(Editor, Selection, SfdtExport);
-let documenteditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false,
- enableSelection: true,
- enableEditor: true,
- enableSfdtExport: true
-});
-documenteditor.appendTo('#DocumentEditor');
-documenteditor.editor.insertTable(2, 2);
-//To apply border
-let borderSettings: BorderSettings = {
- type: 'AllBorders',
- lineWidth: 12
-};
-documenteditor.editor.applyBorders(borderSettings);
-```
-
-Please check below gif which illustrates how to apply border for selected cells through properties pane options - border color, line size and no border:
-
-
-
-## Working with row formatting
-
-Document Editor allows various row formatting such as height and repeat header.
-
-### Row height
-
-You can customize the height of a table row as ‘Auto’, ‘AtLeast’, or ‘Exactly’. Refer to the following sample code.
-
-```ts
-import { DocumentEditor, Editor, Selection, SfdtExport } from '@syncfusion/ej2-documenteditor';
-//Inject the required module
-DocumentEditor.Inject(Editor, Selection, SfdtExport);
-let documenteditor: DocumentEditor = new DocumentEditor({
- isReadOnly: false,
- enableSelection: true,
- enableEditor: true,
- enableSfdtExport: true
-});
-documenteditor.appendTo('#DocumentEditor');
-documenteditor.editor.insertTable(2, 2);
-//To change row height of first row
-documenteditor.selection.rowFormat.heightType = 'Exactly';
-documenteditor.selection.rowFormat.height = 20;
-```
-
-### Header row
-
-The header row describes the content of a table. A table can optionally have a header row. Only the first row of a table can be the header row. If the cursor position is at first row of the table, then you can define whether it as header row or not, using the following sample code.
-
-```ts
-documenteditor.selection.rowFormat.isHeader = true;
-```
-
-### Allow row break across pages
-
-This property is valid if a table row does not fit in the current page during table layout. It defines whether a table row can be allowed to break. If the value is false, the entire row will be moved to the start of next page. You can modify this property for selected rows using the following sample code.
-
-```ts
-documenteditor.selection.rowFormat.allowRowBreakAcrossPages = false;
-```
-
-### Title
-
-Document Editor expose API to get or set the table title of the selected table. Refer to the following sample code to set title.
-
-```ts
-documenteditor.selection.tableFormat.title = 'Shipping Details';
-```
-
-### Description
-
-Document Editor expose API to get or set the table description of the selected image. Refer to the following sample code to set description.
-
-```ts
-documenteditor.selection.tableFormat.description = 'Freight cost and shipping details';
-```
-
-## See Also
-
-* [Table properties dialog](../document-editor/dialog#table-properties-dialog)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/table-of-contents.md b/ej2-javascript/document-editor/table-of-contents.md
deleted file mode 100644
index ee5b41dca..000000000
--- a/ej2-javascript/document-editor/table-of-contents.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-layout: post
-title: Table of contents in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Table of contents in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Table of contents
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Table of contents in ##Platform_Name## Document editor control
-
-The table of contents in a document is same as the list of chapters at the beginning of a book. It lists each heading in the document and the page number, where that heading starts with various options to customize the appearance.
-
-## Inserting table of contents
-
-Document Editor exposes an API to insert table of contents at cursor position programmatically. You can specify the settings for table of contents explicitly. Otherwise, the default settings will be applied.
-
-[`TableOfContentsSettings`](../api/document-editor/tableOfContentsSettings/) contain the following properties:
-* **startLevel**: Specifies the start level for constructing table of contents.
-* **endLevel**: Specifies the end level for constructing table of contents.
-* **includeHyperlink**: Specifies whether the link for headings is included.
-* **includePageNumber**: Specified whether the page number of the headings is included.
-* **rightAlign**: Specifies whether the page number is right aligned.
-* **tabLeader**: Specifies the tab leader styles such as none, dot, hyphen, and underscore.
-* **includeOutlineLevels**: Specifies whether the outline levels are included.
-
-The following code illustrates how to insert table of content in Document Editor.
-
-```ts
-let tocSettings: TableOfContentsSettings =
-{
- startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
-};
-//Insert table of contents in Document Editor.
-editor.editorModule.insertTableOfContents(tocSettings);
-```
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/table-of-contents-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/table-of-contents-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/table-of-contents-cs1" %}
-
-## Update or edit table of contents
-
-You can update or edit the table of contents using the built-in context menu shown up by right-clicking it. Refer to the following screenshot.
-
-
-
-* **Update Field**: Updates the headings in table of contents with same settings by searching the entire document.
-* **Edit Field**: Opens the built-in table of contents dialog and allows you to modify its settings.
-
-You can also do it programmatically by using the exposed API. Refer to the following sample code.
-
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
-documentEditor.appendTo('#DocumentEditor');
-/*Open any existing document*/
-documentEditor.open('');
-//Table of contents settings.
-let tocSettings: TableOfContentsSettings =
-{
- startLevel: 1, endLevel: 3, includeHyperlink: true, includePageNumber: true, rightAlign: true
-};
-//Insert table of contents in Document Editor.
-documentEditor.editorModule.insertTableOfContents(tocSettings);
-```
-
->Same method is used for inserting, updating, and editing table of contents. This will work based on the current element at cursor position and the optional settings parameter. If table of contents is present at cursor position, the update operation will be done based on the optional settings parameter. Otherwise, the insert operation will be done.
-
-## See Also
-
-* [Table of contents dialog](../document-editor/dialog#table-of-contents-dialog)
diff --git a/ej2-javascript/document-editor/table.md b/ej2-javascript/document-editor/table.md
deleted file mode 100644
index df4c57c82..000000000
--- a/ej2-javascript/document-editor/table.md
+++ /dev/null
@@ -1,223 +0,0 @@
----
-layout: post
-title: Table in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Table in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Table
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Table in ##Platform_Name## Document editor control
-
-Tables are an efficient way to present information. Document Editor can display and edit the tables. You can select and edit tables through keyboard, mouse, or touch interactions. Document Editor exposes a rich set of APIs to perform these operations programmatically.
-
-## Create a table
-
-You can create and insert a table at cursor position by specifying the required number of rows and columns.
-
-Refer to the following sample code.
-
-```ts
- documenteditor.editor.insertTable(3,3);
-```
-## Set the maximum number of rows when inserting a table
-
-{% if page.publishingplatform == "typescript" %}
-
-You can use the [maximumRows](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettings/#maximumrows) property to set the maximum number of rows allowed while inserting a table in the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-You can use the [maximumRows](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettings/#maximumrows) property to set the maximum number of rows allowed while inserting a table in the Document Editor component.
-
-{% endif %}
-
-Refer to the following sample code.
-
-```ts
- let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { maximumRows: 4 } });
-```
-
-When the maximum row limit is reached, an alert will appear, as follow
-
-
-
->Note: The maximum value of Row is 32767, as per Microsoft Word application and you can set any value less than or equal to 32767 to this property.
-## Set the maximum number of Columns when inserting a table
-
-{% if page.publishingplatform == "typescript" %}
-
-You can use the [maximumColumns](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettings/#maximumcolumns) property to set the maximum number of columns allowed while inserting a table in the Document Editor component.
-
-{% elsif page.publishingplatform == "javascript" %}
-
-You can use the [maximumColumns](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettings/#maximumcolumns) property to set the maximum number of columns allowed while inserting a table in the Document Editor component.
-
-{% endif %}
-
-Refer to the following sample code.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ documentEditorSettings: { maximumColumns: 4 } });
-```
-
-When the maximum column limit is reached, an alert will appear, as follow
-
-
-
->Note: The maximum value of Column is 63, as per Microsoft Word application and you can set any value less than or equal to 63 to this property.
-
-## Insert rows
-
-You can add a row (or several rows) above or below the row at cursor position by using the [`insertRow`](../api/document-editor/editor/#insertrow) method. This method accepts the following parameters:
-
-Parameter | Type | Description
-----------|------|-------------
-above(optional) | boolean | This is optional and if omitted, it takes the value as false and inserts below the row at cursor position.
-count(optional) | number | This is optional and if omitted, it takes the value as 1.
-
-Refer to the following sample code.
-
-```ts
-//Inserts a row below the row at cursor position
-documentedior.editor.insertRow();
-
-//Inserts a row above the row at cursor position
-documentedior.editor.insertRow(false);
-
-//Inserts three rows below the row at cursor position
-documentedior.editor.insertRow(true, 3)
-```
-
-## Insert columns
-
-You can add a column (or several columns) to the left or right of the column at cursor position by using the [`insertColumn`](../api/document-editor/editor/#insertcolumn) method. This method accepts the following parameters:
-
-Parameter | Type | Description
-----------|------|-------------
-left(optional) | boolean| This is optional and if omitted, it takes the value as false and inserts to the right of column at cursor position.
-count(optional) | number | This is optional and if omitted, it takes the value as 1.
-
-Refer to the following sample code.
-
-```ts
-//Insert a column to the right of the column at cursor position.
-documentedior.editor.insertColumn();
-
-//Insert a column to the left of the column at cursor position.
-documentedior.editor.insertColumn(false);
-
-//Insert two columns to the left of the column at cursor position.
-documentedior.editor.insertColumn(false, 2);
-```
-
-### Select an entire table
-
-If the cursor position is inside a table, you can select the entire table by using the following sample code.
-
-```ts
-documenteditor.selection.selectTable();
-```
-
-### Select row
-
-You can select the entire row at cursor position by using the following sample code.
-
-```ts
-documenteditor.selection.selectRow();
-```
-
-If current selection spans across cells of different rows, all these rows will be selected.
-
-### Select column
-
-You can select the entire column at cursor position by using the following sample code.
-
-```ts
-documenteditor.selection.selectColumn();
-```
-
-If current selection spans across cells of different columns, all these columns will be selected.
-
-### Select cell
-
-You can select the cell at cursor position by using the following sample code.
-
-```ts
-documenteditor.selection.selectCell();
-```
-
-## Delete table
-
-Document Editor allows you to delete the entire table. You can use the [`deleteTable()`](../api/document-editor/editor/#deletetable) method of editor instance, if selection is in table. Refer to the following sample code.
-
-```ts
-documenteditor.editor.deleteTable();
-```
-
-## Delete row
-
-Document Editor allows you to delete the selected number of rows. You can use the [`deleteRow()`](../api/document-editor/editor/#deleterow) method of editor instance to delete the selected number of rows, if selection is in table. Refer to the following sample code.
-
-```ts
-documenteditor.editor.deleteRow();
-```
-
-## Delete column
-
-Document Editor allows you to delete the selected number of columns. You can use the [`deleteColumn()`](../api/document-editor/editor/#deletecolumn) method of editor instance to delete the selected number of columns, if selection is in table. Refer to the following sample code.
-
-```ts
-documenteditor.editor.deleteColumn();
-```
-
-## Merge cells
-
-You can merge cells vertically, horizontally, or combination of both to a single cell. To vertically merge the cells, the columns within selection should be even in left and right directions. To horizontally merge the cells, the rows within selection should be even in top and bottom direction.
-Refer to the following sample code.
-
-```ts
-documenteditor.editor.mergeCells()
-```
-
-## Positioning the table
-
-Document Editor preserves the position properties of the table and displays the table based on position properties. It does not support modifying the position properties. Whereas the table will be automatically moved along with text edited if it is positioned relative to the paragraph.
-
-## How to work with tables
-
-The following sample demonstrates how to delete the table row or columns, merge cells and how to bind the API with button.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/table-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/table-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/table-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/table-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/table-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/table-cs1" %}
-{% endif %}
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module/)
-* [Insert table dialog](../document-editor/dialog#table-dialog)
diff --git a/ej2-javascript/document-editor/text-format.md b/ej2-javascript/document-editor/text-format.md
deleted file mode 100644
index afabc075e..000000000
--- a/ej2-javascript/document-editor/text-format.md
+++ /dev/null
@@ -1,230 +0,0 @@
----
-layout: post
-title: Text format in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Text format in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Text format
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Text format in ##Platform_Name## Document editor control
-
-Document Editor supports several formatting options for text like bold, italic, font color, highlight color, and more. This section describes how to modify the formatting for selected text in detail.
-
-## Bold
-
-The bold formatting for selected text can be get or set by using the following sample code.
-
-```ts
-
-//Gets the value for bold formatting of selected text.
-let bold : boolean = documenteditor.selection.characterFormat.bold;
-//Sets bold formatting for selected text.
-documenteditor.selection.characterFormat.bold = true;
-
-```
-
-You can toggle the bold formatting based on existing value at selection. Refer to the following sample code.
-
-```ts
-documenteditor.editor.toggleBold();
-```
-
-## Italic
-
-The Italic formatting for selected text can be get or set by using the following sample code.
-
-```ts
-//Gets the value for italic formatting of selected text.
-let italic : boolean = documenteditor.selection.characterFormat.italic;
-//Sets italic formatting for selected text.
-documenteditor.selection.characterFormat.italic = true|false;
-```
-
-You can toggle the Italic formatting based on existing value at selection. Refer to the following sample code.
-
-```ts
-documenteditor.editor.toggleItalic();
-```
-
-## Underline property
-
-The underline style for selected text can be get or set by using the following sample code.
-
-```ts
-//Gets the value for underline formatting of selected text.
-let underline : Underline = documenteditor.selection.characterFormat.underline;
-//Sets underline formatting for selected text.
-documenteditor.selection.characterFormat.underline = 'Single' | 'None';
-```
-
-You can toggle the underline style of selected text based on existing value at selection by specifying a value. Refer to the following sample code.
-
-```ts
-documenteditor.editor.toggleUnderline('Single');
-```
-
-## Strikethrough property
-
-The strikethrough style for selected text can be get or set by using the following sample code.
-
-```ts
-//Gets the value for strikethrough formatting of selected text.
-let strikethrough : Strikethrough = documenteditor.selection.characterFormat.strikethrough;
-//Sets strikethrough formatting for selected text.
-documenteditor.selection.characterFormat.strikethrough = 'Single' | 'Normal';
-```
-
-You can toggle the strikethrough style of selected text based on existing value at selection by specifying a value. Refer to the following sample code.
-
-```ts
-documenteditor.editor.toggleStrikethrough();
-```
-
-## Superscript property
-
-The selected text can be made superscript by using the following sample code.
-
-```ts
-//Gets the value for baselineAlignment formatting of selected text.
-let baselineAlignment : BaselineAlignment = documenteditor.selection.characterFormat.baselineAlignment;
-//Sets baselineAlignment formatting for selected text.
-documenteditor.selection.characterFormat.baselineAlignment = 'Superscript';
-```
-
-Toggle the selected text as superscript or normal using the following sample code.
-
-```ts
-documenteditor.editor.toggleSuperscript();
-```
-
-## Subscript property
-
-The selected text can be made subscript by using the following sample code.
-
-```ts
-//Gets the value for baselineAlignment formatting of selected text.
-let baselineAlignment : BaselineAlignment = documenteditor.selection.characterFormat.baselineAlignment;
-//Sets baselineAlignment formatting for selected text.
-documenteditor.selection.characterFormat.baselineAlignment = 'Subscript';
-```
-
-Toggle the selected text as subscript or normal using the following sample code.
-
-```ts
-documenteditor.editor.toggleSubscript();
-```
-
-You can make a subscript or superscript text as normal using the following code.
-
-```ts
-documenteditor.selection.characterFormat.baselineAlignment = 'Normal';
-```
-
-## Change case
-
-You can apply different case formatting based on the selected text. Refer to the following sample code.
-
-```ts
-documenteditor.editor.changeCase('Uppercase'|'Lowercase'|'SentenceCase'|'ToggleCase'|'CapitalizeEachWord');
-```
-
-## Size
-
-The size of selected text can be get or set using the following code.
-
-```ts
-//Gets the value for fontSize formatting of selected text.
-let fontSize : number = documenteditor.selection.characterFormat.fontSize;
-//Sets fontSize formatting for selected text.
-documenteditor.selection.characterFormat.fontSize = 32;
-```
-
-## Color
-
-### Change Font Color by UI Option
-
-In the Document Editor, the Text Properties pane features two icons for managing text color within the user interface (UI):
-
-* **Colored Box:** This icon visually represents the **current color** applied to the selected text.
-* **Text (A) Icon:** Clicking this icon allows users **to modify the color** of the selected text by choosing a new color from the available options.
-
-This Font Color option appear as follows.
-
-
-
-### Change Font Color by Code
-
-The color of selected text can be get or set using the following code.
-
-```ts
-//Gets the value for fontColor formatting of selected text.
-let fontColor : string = documenteditor.selection.characterFormat.fontColor;
-//Sets fontColor formatting for selected text.
-documenteditor.selection.characterFormat.fontColor = 'Pink';
-documenteditor.selection.characterFormat.fontColor = '#FFC0CB';
-```
-
-## Font
-
-The font style of selected text can be get or set using the following sample code.
-
-```ts
-//Gets the value for fontFamily formatting of selected text.
-let baselineAlignment : string = documenteditor.selection.characterFormat.fontFamily;
-//Sets fontFamily formatting for selected text.
-documenteditor.selection.characterFormat.fontFamily = 'Arial';
-```
-
-## Highlight color
-
-The highlight color of the selected text can be get or set using the following sample code.
-
-```ts
-//Gets the value for highlightColor formatting of selected text.
-let highlightColor : HighlightColor = documenteditor.selection.characterFormat.highlightColor;
-//Sets highlightColor formatting for selected text.
-documenteditor.selection.characterFormat.highlightColor = 'Pink';
-documenteditor.selection.characterFormat.highlightColor = '#FFC0CB';
-```
-
-N> 1. Character scaling and spacing present in the input Word document will be preserved in the exported Word document. N> 2. Scaling is implemented using the letterSpacing property, which may present compatibility problems. For more information, please refer to this [link](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/letterSpacing#browser_compatibility)
-
-## Toolbar with options for text formatting
-
-Refer to the following example.
-
-{% if page.publishingplatform == "typescript" %}
-
- {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/text-format-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/text-format-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/text-format-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/text-format-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/text-format-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/text-format-cs1" %}
-{% endif %}
-
-## See Also
-
-* [Feature modules](../document-editor/feature-module)
-* [Font dialog](../document-editor/dialog#font-dialog)
-* [Keyboard shortcuts](../document-editor/keyboard-shortcut#text-formatting)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/text-wrapping-style.md b/ej2-javascript/document-editor/text-wrapping-style.md
deleted file mode 100644
index 9347588a6..000000000
--- a/ej2-javascript/document-editor/text-wrapping-style.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: post
-title: Text wrapping style in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Text wrapping style in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Text wrapping style
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Text wrapping style in ##Platform_Name## Document editor control
-
-Text wrapping refers to how images and shapes are fit with surrounding text in a document. Currently, DocumentEditor has only preservation support for image and textbox shape with below wrapping styles.
-
-## In-Line with Text
-
-In this option, the image or shape is placed on the same line surrounding with text like any other word or letter. This image or shape will be automatically moved along with the text while editing, whereas the other options denote that the image or shape stays in a fixed position while the text shifts and wraps around it.
-
-
-
-## In Front of Text
-
-In this option, the image or shape is placed in front of the text. This can be used to place an image around some text or to add shape to highlight the part in a paragraph.
-
-
-
->Note: Starting from v18.2.0.x, the in front of wrapping styles are supported.
-
-## Top and Bottom
-
-In this option, Text wraps above and below the image or shape. No text is to the left or right of the image or shape. This can be used for larger images or shapes that occupy most of the width in a document.
-
->Note: Starting from v19.1.0.x, the top and bottom wrapping style is supported.
-
-
-
-## Behind
-
-In this option, the image or shape is placed behind the text. This can be used when you need to add a watermark or background image to a document.
-
-
-
->Note: Starting from v19.2.0.x, behind text wrapping styles are supported.
-
-## Square
-
-In this option, Text wraps around the image or text box in a square shape.
-
->Note: Tight and Through styles will be preserved as square wrapping style in DocumentEditor which is supported from v19.2.0.x.
-
-
diff --git a/ej2-javascript/document-editor/track-changes.md b/ej2-javascript/document-editor/track-changes.md
deleted file mode 100644
index cdcffbae6..000000000
--- a/ej2-javascript/document-editor/track-changes.md
+++ /dev/null
@@ -1,379 +0,0 @@
----
-layout: post
-title: Track changes in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Track changes in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Track changes
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Track changes in ##Platform_Name## Document editor control
-
-Track Changes allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject the modifications. It is a useful tool for managing changes made by several reviewers to the same document. If track changes option is enabled, all editing operations are preserved as revisions in Document Editor.
-
-## Enable track changes in Document Editor
-
-The following example demonstrates how to enable track changes.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableTrackChanges: true,
-});
-container.appendTo('#container');
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true });
-container.appendTo('#container');
-```
-
-{% endif %}
-
->Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set enableTrackChanges : true in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes during the document change event. The following example demonstrates how to enable Track changes for the all the Document while Opening.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-container.documentChange = (): void => {
- if (container !== null) {
- container.documentEditor.enableTrackChanges = true;
- }
-};
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-container.documentChange = function () {
- if (container !== null) {
- container.documentEditor.enableTrackChanges = true;
- }
-};
-```
-
-{% endif %}
-## Show/Hide Revisions Pane
-
-The Show/Hide Revisions Pane feature in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document.
-
-The following example code illustrates how to show/hide the revisions pane.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableTrackChanges: true,
-});
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-container.documentEditor.showRevisions = true; // To show revisions pane
-container.documentEditor.showRevisions = false; // To hide revisions pane
-
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-
-var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true });
-ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
-container.appendTo('#container');
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.documentEditor.showRevisions = true; // To show revisions pane
-container.documentEditor.showRevisions = false; // To hide revisions pane
-
-```
-
-{% endif %}
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-## Get all tracked revisions
-
-The following example demonstrate how to get all tracked revision from current document.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableTrackChanges: true,
-});
-container.appendTo('#container');
-/**
- * Get revisions from the current document
- */
-let revisions : RevisionCollection = container.documentEditor.revisions;
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true });
-container.appendTo('#container');
-
-/**
- * Get revisions from the current document
- */
-var revisions = container.documentEditor.revisions;
-```
-
-{% endif %}
-
-## Accept or Reject all changes programmatically
-
-The following example demonstrates how to accept/reject all changes.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableTrackChanges: true,
-});
-container.appendTo('#container');
-/**
- * Get revisions from the current document
- */
-let revisions : RevisionCollection = container.documentEditor.revisions;
-
-/**
- * Accept all tracked changes
- */
-revisions.acceptAll();
-
-/**
- * Reject all tracked changes
- */
-revisions.rejectAll();
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true });
-container.appendTo('#container');
-/**
- * Get revisions from the current document
- */
-var revisions = container.documentEditor.revisions;
-
-/**
- * Accept all tracked changes
- */
-revisions.acceptAll();
-
-/**
- * Reject all tracked changes
- */
-revisions.rejectAll();
-```
-
-{% endif %}
-
-## Accept or reject a specific revision
-
-The following example demonstrates how to accept/reject specific revision in the Document Editor.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-/**
- * Get revisions from the current document
- */
-let revisions : RevisionCollection = container.documentEditor.revisions;
-/**
- * Accept specific changes
- */
-revisions.get(0).accept();
-/**
- * Reject specific changes
- */
-revisions.get(1).reject();
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-/**
- * Get revisions from the current document
- */
-var revisions = container.documentEditor.revisions;
-/**
- * Accept specific changes
- */
-revisions.get(0).accept();
-/**
- * Reject specific changes
- */
-revisions.get(1).reject();
-```
-
-{% endif %}
-
-## Navigate between the tracked changes
-
-The following example demonstrates how to navigate tracked revision programmatically.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableTrackChanges: true,
-});
-container.appendTo('#container');
-/**
- * Navigate to next tracked change from the current selection.
- */
-container.documentEditor.selection.navigateNextRevision();
-
-/**
- * Navigate to previous tracked change from the current selection.
- */
-container.documentEditor.selection.navigatePreviousRevision();
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-var container = new ej.documenteditor.DocumentEditorContainer({ enableTrackChanges: true });
-container.appendTo('#container');
-/**
- * Navigate to next tracked change from the current selection.
- */
-container.documentEditor.selection.navigateNextRevision();
-
-/**
- * Navigate to previous tracked change from the current selection.
- */
-container.documentEditor.selection.navigatePreviousRevision();
-```
-
-{% endif %}
-
-## Filtering changes based on user
-
-In DocumentEditor, we have built-in review panel in which we have provided support for filtering changes based on the user.
-
-
-
-## Protect the document in track changes only mode
-
-Document Editor provides support for protecting the document with `RevisionsOnly` protection. In this protection, all the users are allowed to view the document and do their corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes.
-
-Document editor provides an option to protect and unprotect document using [`enforceProtection`](../api/document-editor/editor/#enforceprotection) and [`stopProtection`](../api/document-editor/editor/#stopprotection) API.
-
-The following example code illustrates how to enforce and stop protection in Document editor container.
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-container.serviceUrl = 'http://localhost:5000/api/documenteditor/';
-container.appendTo('#container');
-
-//enforce protection
-container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly');
-
-//stop the document protection
-container.documentEditor.editor.stopProtection('123');
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-var container = new ej.documenteditor.DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-ej.documenteditor.DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl =
- 'http://localhost:5000/api/documenteditor/';
-container.appendTo('#container');
-
-//enforce protection
-container.documentEditor.editor.enforceProtection('123', 'RevisionsOnly');
-
-//stop the document protection
-container.documentEditor.editor.stopProtection('123');
-```
-
-{% endif %}
-
-Tracked changes only protection can be enabled in UI by using [Restrict Editing pane](../document-editor/document-management#restrict-editing-pane)
-
-
-
->Note: In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly |RevisionsOnly`. In stop protection method, parameter denotes the password.
-
-## Events
-
-DocumentEditor provides [beforeAcceptRejectChanges](../api/document-editor-container#beforeacceptrejectchanges) event, which is triggered before a tracked content is accepted or rejected. This event provides an opportunity to perform custom logic before accepting or rejecting changes. The event handler receives the [RevisionActionEventArgs](../api/document-editor/revisionActionEventArgs) object as an argument, which allows access to information about the tracked content. .
-
-To demonstrate a specific use case, let's consider an example where we want to restrict the accept and reject changes functionality based on the author name. The following code snippet illustrates how to allow only the author of the tracked content to accept or reject changes:
-
-{% if page.publishingplatform == "typescript" %}
-
-```ts
-
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-DocumentEditorContainer.Inject(Toolbar);
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- beforeAcceptRejectChanges: beforeAcceptRejectChanges.bind(this),
- enableToolbar: true,
- height: '590px',
- currentUser: 'Hary'
-});
-container.appendTo('#container');
-
-// Event get triggerd before accepting/rejecting changes
-function beforeAcceptRejectChanges(args : RevisionActionEventArgs) : void {
- // Check the author of the revision and current user are different
- if (args.author !== container.currentUser) {
- // Cancel the accept/reject action
- args.cancel = true;
- }
-}
-```
-
-{% elsif page.publishingplatform == "javascript" %}
-
-```js
-
-var container = new ej.documenteditor.DocumentEditorContainer({
- beforeAcceptRejectChanges:{beforeAcceptRejectChanges},
- enableToolbar: true,
- height: '590px',
- currentUser: 'Hary'
-});
-ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
-
-container.appendTo('#container');
-
-// Event get triggerd before accepting/rejecting changes
-function beforeAcceptRejectChanges(args) {
- // Check the author of the revision and current user are different
- if (args.author !== container.currentUser) {
- // Cancel the accept/reject action
- args.cancel = true;
- }
-}
-```
-
-{% endif %}
diff --git a/ej2-javascript/document-editor/ts/getting-started.md b/ej2-javascript/document-editor/ts/getting-started.md
deleted file mode 100644
index ce7b739e3..000000000
--- a/ej2-javascript/document-editor/ts/getting-started.md
+++ /dev/null
@@ -1,278 +0,0 @@
----
-layout: post
-title: Getting started with ##Platform_Name## Document editor control | Syncfusion
-description: Checkout and learn about Getting started with ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Getting started
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Getting started in ##Platform_Name## Document editor control
-
-This section briefly explains how to create a simple **Document editor** component and configure its available functionalities in TypeScript, using Essential® JS 2 [quickstart](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-) seed repository.
-
-> This application is integrated with the `webpack.config.js` configuration and uses the latest version of the [webpack-cli](https://webpack.js.org/api/cli/#commands). It requires node `v14.15.0` or higher. For more information about webpack and its features, refer to the [webpack documentation](https://webpack.js.org/guides/getting-started/).
-
-## Dependencies
-
-Following is the list of minimum dependencies required to use the Document Editor.
-
-```javascript
- |-- @syncfusion/ej2-documentEditor
- |-- @syncfusion/ej2-base
- |-- @syncfusion/ej2-buttons
- |-- @syncfusion/ej2-calendars
- |-- @syncfusion/ej2-compression
- |-- @syncfusion/ej2-dropdowns
- |-- @syncfusion/ej2-file-utils
- |-- @syncfusion/ej2-inputs
- |-- @syncfusion/ej2-navigations
- |-- @syncfusion/ej2-office-chart
- |-- @syncfusion/ej2-charts
- |-- @syncfusion/ej2-popups
- |-- @syncfusion/ej2-splitbuttons
-
-```
-
-### Server side dependencies
-
-The Document Editor component requires server-side interactions for the following operations:
-
-* [Open file formats other than SFDT](../document-editor/import#convert-word-documents-into-sfdt)
-* [Paste with formatting](../document-editor/clipboard#paste-with-formatting)
-* [Restrict editing](../document-editor/document-management)
-* [Spell check](../document-editor/spell-check)
-* [Save as file formats other than SFDT and DOCX](../document-editor/server-side-export)
-
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
-
-To know about server-side dependencies, please refer this [page](../document-editor/web-services-overview).
-
-## Set up development environment
-
-Open the command prompt from the required directory, and run the following command to clone the Syncfusion® JavaScript (Essential® JS 2) quickstart project from [GitHub](https://github.com/SyncfusionExamples/ej2-quickstart-webpack-).
-
-{% tabs %}
-{% highlight bash tabtitle="CMD" %}
-
-git clone https://github.com/SyncfusionExamples/ej2-quickstart-webpack- ej2-quickstart
-
-{% endhighlight %}
-{% endtabs %}
-
-After cloning the application in the `ej2-quickstart` folder, run the following command line to navigate to the `ej2-quickstart` folder.
-
-{% tabs %}
-{% highlight bash tabtitle="CMD" %}
-
-cd ej2-quickstart
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add Syncfusion® JavaScript packages
-
-Syncfusion® JavaScript (Essential® JS 2) packages are available on the [npmjs.com](https://www.npmjs.com/~syncfusionorg) public registry. You can install all Syncfusion® JavaScript (Essential® JS 2) controls in a single [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package or individual packages for each control.
-
-The quickstart application is preconfigured with the dependent [@syncfusion/ej2](https://www.npmjs.com/package/@syncfusion/ej2) package in the `~/package.json` file. Use the following command to install the dependent npm packages from the command prompt.
-
-{% tabs %}
-{% highlight bash tabtitle="NPM" %}
-
-npm install
-
-{% endhighlight %}
-{% endtabs %}
-
-## Import the Syncfusion® CSS styles
-
-Syncfusion® JavaScript controls come with [built-in themes](https://ej2.syncfusion.com/documentation/appearance/theme/), which are available in the installed packages. It's easy to adapt the Syncfusion® JavaScript controls to match the style of your application by referring to one of the built-in themes.
-
-The quickstart application is preconfigured to use the `Material` theme in the `~/src/styles/styles.css` file, as shown below:
-
-{% tabs %}
-{% highlight css tabtitle="style.css" %}
-
-@import "../../node_modules/@syncfusion/ej2/material.css";
-
-{% endhighlight %}
-{% endtabs %}
-
-> You can check out the [themes](https://ej2.syncfusion.com/documentation/appearance/theme/) section to know more about built-in themes and CSS reference for individual controls.
-
-## Adding component
-
-You can add `DocumentEditorContainer` component with predefined toolbar and properties pane options or `DocumentEditor` component with customize options.
-
->Note: Starting from `v19.3.0.x`, we have optimized the accuracy of text size measurements such as to match Microsoft Word pagination for most Word documents. This improvement is included as default behavior along with an optional API [to disable it and retain the document pagination behavior of older versions](../document-editor/how-to/disable-optimized-text-measuring).
-
-### Document Editor component
-
-Document Editor component is used to create, view and edit word documents. In this, you can customize the UI options based on your requirements to modify the document.
-
-#### Adding Document Editor component
-
-You can start adding Essential® JS 2 documenteditor component to the application. To get started, add the DocumentEditor component in `app.ts` and `index.html` files using the following code.
-
-Place the following code in the `app.ts`.
-
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
-
-import { DocumentEditor } from '@syncfusion/ej2-documenteditor';
-
-// Initialize Document Editor component.
-let documenteditor: DocumentEditor = new DocumentEditor({ isReadOnly: false, height: '370px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
-
-// Enable all built in modules.
-documenteditor.enableAllModules();
-
-// Render the Document Editor component.
-documenteditor.appendTo('#DocumentEditor');
-
-{% endhighlight %}
-{% endtabs %}
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Now, add an HTML div element to act as the DocumentEditor element in `index.html` using the following code.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-
-
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Run the Document Editor application
-
-The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.
-
-{% tabs %}
-{% highlight bash tabtitle="NPM" %}
-
-npm start
-
-{% endhighlight %}
-{% endtabs %}
-
-Documenteditor output will be displayed as follows.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/getting-started-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/getting-started-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/getting-started-cs1" %}
-
-### Document Editor Container component
-
-Document Editor Container is a predefined component which wraps DocumentEditor, Toolbar, Properties pane, and Status bar into a single component. And the toolbar and properties pane is used to view and modify the document in DocumentEditor thought public APIs available in it.
-
-#### Adding Document Editor Container component
-
-You can start adding Essential® JS 2 documenteditor container component to the application. To get started, add the DocumentEditorContainer component in `app.ts` and `index.html` files using the following code.
-
-Place the following code in the `app.ts`.
-
-{% tabs %}
-{% highlight ts tabtitle="app.ts" %}
-
-import { DocumentEditorContainer, Toolbar } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Toolbar);
-
-let documenteditor: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '390px', serviceUrl: 'https://services.syncfusion.com/js/production/api/documenteditor/' });
-
-documenteditor.appendTo('#DocumentEditor');
-
-{% endhighlight %}
-{% endtabs %}
-
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
-
-Now, add an HTML div element to act as the DocumentEditorContainer element in `index.html` using the following code.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-
-
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Run the Document Editor Container application
-
-The quickstart project is configured to compile and run the application in the browser. Use the following command to run the application.
-
-{% tabs %}
-{% highlight bash tabtitle="NPM" %}
-
-npm start
-
-{% endhighlight %}
-{% endtabs %}
-
-DocumentEditorContainer output will be displayed as follows.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/getting-started-cs2/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/getting-started-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/getting-started-cs2" %}
-
-## Frequently Asked Questions
-
-* [How to localize the Documenteditor container](../document-editor/global-local).
-* [How to load the document by default](../document-editor/how-to/open-default-document).
-* [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
-* [How to resize Document editor component?](../document-editor/how-to/resize-document-editor)
-* [How to add a save button to the DocumentEditorContainer component toolbar](../document-editor/how-to/add-save-button-in-toolbar)
diff --git a/ej2-javascript/document-editor/ts/how-to/customize-ribbon.md b/ej2-javascript/document-editor/ts/how-to/customize-ribbon.md
deleted file mode 100644
index d1f245211..000000000
--- a/ej2-javascript/document-editor/ts/how-to/customize-ribbon.md
+++ /dev/null
@@ -1,232 +0,0 @@
----
-layout: post
-title: Customize Ribbon in ##Platform_Name## Document Editor | Syncfusion
-description: Learn how to customize the ribbon in Syncfusion ##Platform_Name## Document Editor - file menu, backstage, tabs, groups, and items.
-platform: ej2-javascript
-control: Ribbon Customization
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize Ribbon in ##Platform_Name## Document Editor
-
-The Syncfusion Document Editor provides an extensive and flexible API to customize the built-in ribbon UI. You can:
-
-- Customize the File menu.
-- Add the Backstage menu instead of File menu.
-- Show, hide, or add Ribbon tabs.
-- Show, hide, or add groups within tabs.
-- Show, hide, add, enable, or disable items within groups.
-
-Below are detailed examples for each ribbon customization scenario.
-
-## File Menu Customization
-
-Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](../api/document-editor-container/#filemenuitems) property.
-
-In below code example, In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true, toolbarMode: 'Ribbon',
- fileMenuItems: ["New", "Print", { text: 'Export', id: 'custom_item',iconCss: 'e-icons e-export' }
- ],
- fileMenuItemClick: function (args) {
- if (args.item.id) {
- container.documentEditor.save('Sample', 'Docx');
- }
- }
-});
-```
-
-## Backstage Menu Customization
-
-The Document Editor provides an [`backStageMenu`](../api/document-editor-container/#backStageMenu) API to add a backstage menu. When the backstage menu is enabled, the default File menu items are automatically hidden.
-
-The following code example shows how to add the backstage menu items.
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true, toolbarMode: 'Ribbon',
- backstageMenu: {
- text: 'File',
- backButton: { text: 'close' },
- items: [
- { id: 'new', text: 'New', iconCss: 'e-icons e-de-ctnr-new' }],
- }
-});
-
-```
-
-Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
-
-## Tab Customization
-
-You can customize the ribbon tabs in the Document Editor by showing, hiding, or adding tabs according to your application's requirements.
-
-### Show/Hide Tab
-
-Document editor provides the [`showTab`](../api/document-editor-container/ribbon/#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.
-
-The following code example how to show/hide existing tab using existing tab type and tab id.
-```ts
-// To hide the Home tab using the built-in `RibbonTabType`
-container.ribbon.showTab('Home', false);
-
-// To hide a tab by its tab id (for example, a custom tab)
-container.ribbon.showTab('custom_tab', false);
-```
-
-### Add Tab
-
-The Document Editor provides the [`addTab`](../api/document-editor-container/ribbon/#addtab) API, which allows you to insert a new custom tab either between existing tabs or at the end of the ribbon tabs.
-
-```ts
-import { RibbonTabModel } from '@syncfusion/ej2-ribbon';
-
-// To add the tab at end of tab
-let ribbonTab: RibbonTabModel = {
- header: 'Custom Tab', id: 'custom_tab', groups: [{
- header: 'Custom Group', collections: [{
- items: [{
- type: 'Button',
- buttonSettings: {
- content: 'New',
- iconCss: 'e-icons e-de-ctnr-new',
- clicked: function () {
- container.documentEditor.openBlank();
- }
- }
- }]
- }]
- }]
-};
-container.ribbon.addTab(ribbonTab);
-
-// To add the tab before the Insert tab(exising tab)
-container.ribbon.addTab(ribbonTab,'Insert');
-```
-
-
-## Group Customization
-
-You can also customize ribbon groups within a tab to better organize commands or add new functionalities as per your needs.
-
-### Show/Hide Group
-
-Document Editor provides an [`showGroup`](../api/document-editor-container/ribbon/#showgroup) API to show or hide existing groups within a ribbon tab.
-
-The following code example show how to show/hide the group using group Id or [`RibbonGroupInfo`](../api/document-editor-container/#ribbongroupinfo).
-
-```ts
-
-// To hide the clipboard group using group index
-container.ribbon.showGroup({tabId: 'Home', index: 1} , false);
-
-// To show the clipboard group using group index
-container.ribbon.showGroup({tabId: 'Home', index: 1} , true);
-
-// To hide the group using id
-container.ribbon.showGroup('custom_group', false);
-
-```
-
-### Add Group
-
-To extend the ribbon's functionality, you can add custom groups to any tab. This allows you to organize related commands together within a tab.
-
-```ts
-
-import { RibbonGroupModel } from '@syncfusion/ej2-ribbon';
-
-// Add the new group at the end of the Home tab
-let ribbonGroup: RibbonGroupModel =
-{
- header: 'Custom Group', collections: [{
- items: [{
- type: 'Button',
- buttonSettings: {
- content: 'New',
- iconCss: 'e-icons e-de-ctnr-new',
- clicked: function () {
- container.documentEditor.openBlank();
- }
- }
- }]
- }]
-};
-container.ribbon.addGroup('Home', ribbonGroup);
-
-// Add the new group at the specified index of the Home tab (before the Clipboard group)
-
-container.ribbon.addGroup('Home', ribbonGroup, 1);
-
-```
-
-## Item Customization
-
-You can customize individual items within ribbon groups. This includes showing, hiding, enabling, disabling, or adding new items to any group within a ribbon tab.
-
-### Show/Hide Item
-
-Using [`showItems`](../api/document-editor-container/ribbon/#showitems) API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or [`RibbonItemInfo`].
-
-The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](../api/document-editor-container/#ribboniteminfo).
-
-```ts
-// To hide the Bold and Italic items using ribbon item information
-container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , false);
-
-// To show the Bold and Italic items using ribbon item information
-container.ribbon.showItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [5, 6] } , true);
-
-// To hide the item using item id
-container.ribbon.showItems('custom_item', false);
-```
-
-### Enable/Disable Item
-
-Using [`enableItems`](../api/document-editor-container/ribbon/#enableitems) API in Document editor ribbon to enable/disable the existing item.
-
-```ts
-// To disable the underline using ribbon item info
-container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },false);
-
-// To enable the underline using ribbon item info
-container.ribbon.enableItems({ tabId: 'Home', groupIndex: 2, itemIndexes: [7] },true);
-
-// To disable the item using id
-container.ribbon.enableItems('custom_item', false);
-
-```
-
-### Add Item
-
-You can use the [`addItem`](../api/document-editor-container/ribbon/#additem) API in the Document Editor ribbon to add a new item. Additionally, you can specify the target tab and group where the new item should be placed.
-
-```ts
-
-// To add the item at the end of the specified group (the item will be added at the end of the Undo group)
-let ribbonItem: RibbonItemModel = {
- type: 'Button',
- buttonSettings: {
- content: 'New',
- iconCss: 'e-icons e-de-ctnr-new',
- clicked: function () {
- container.documentEditor.openBlank();
- }
- }
-};
-container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem);
-
-// To add the item before the specified item index (the item will be added before the Redo item in the Undo group)
-
-container.ribbon.addItem({ tabId: 'Home', index: 0 }, ribbonItem, 1);
-
-```
-
-
-## Related Links
-
-- [File menu Customization Demo](https://ej2.syncfusion.com/demos/#/material/document-editor/ribbon-customization)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/ts/how-to/optimize-sfdt.md b/ej2-javascript/document-editor/ts/how-to/optimize-sfdt.md
deleted file mode 100644
index e081edab1..000000000
--- a/ej2-javascript/document-editor/ts/how-to/optimize-sfdt.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-layout: post
-title: Optimize sfdt in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Optimize sfdt in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Optimize sfdt
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Optimize sfdt in ##Platform_Name## Document editor control
-
-Starting from version v21.1.x, the SFDT file generated in Word Processor component is optimized by default to reduce the file size. All static keys are minified, and the final JSON string is compressed. This helps reduce the SFDT file size relative to a DOCX file and provides the following benefits,
-* File transfer between client and server through the internet gets faster.
-* The new optimized SFDT files require less storage space than the old SFDT files.
-Hence, the optimized SFDT file can't be directly manipulated as JSON string.
-
-> This feature comes with a public API to switch between the old and new optimized SFDT format, allowing backward compatibility.
-
-As a backward compatibility to create older format SFDT files, refer the following code changes,
-
-
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/ts/ribbon.md b/ej2-javascript/document-editor/ts/ribbon.md
deleted file mode 100644
index 3723e5936..000000000
--- a/ej2-javascript/document-editor/ts/ribbon.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: post
-title: Ribbon in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about the Ribbon UI in Syncfusion ##Platform_Name## Document editor control, how to switch between Ribbon and Toolbar modes.
-platform: ej2-javascript
-control: Ribbon
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Ribbon in ##Platform_Name## Document Editor Control
-
-The Document Editor provides a modern Ribbon interface similar to Microsoft Word's interface. This Ribbon UI provides an efficient and intuitive way to access editing features, organizing commands within well-structured tabs and groups to enhance your document editing experience. Additionally, the Ribbon interface supports contextual tabs. Contextual tabs appear only when certain elements, such as tables, images, or headers/footers, are selected in the document.
-
-You can switch between the classic **Toolbar** and the new **Ribbon** UI, and you can also choose between **Classic** and **Simplified** ribbon layouts.
-
-## Enable Ribbon Mode
-
-To enable Ribbon in Document Editor, use the [`toolbarMode`](../api/document-editor-container/#toolbarmode) property of `DocumentEditorContainer`. The available toolbar modes are:
-
-- **'Toolbar'** - The traditional toolbar UI.
-- **'Ribbon'** - The Ribbon UI, which provides a tabbed interface with grouped commands.
-
-By default, `toolbarMode` is `Toolbar`.
-
-The following code shows the how to enable the `Ribbon` in Document Editor.
-
-```ts
-
-import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Ribbon);
-// Initialize the Document Editor Container with Ribbon mode enabled
-var container = new ej.documenteditor.DocumentEditorContainer({
- enableToobar: true,
- toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar'
- height: '590px'
-});
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-```
-
-## Ribbon Layouts
-
-Document Editor provides two different Ribbon layouts:
-
-- **Classic**: A traditional Office-like ribbon with detailed grouping and larger icons
-- **Simplified**: A more compact ribbon design with streamlined controls
-
-By default, `ribbonLayout` is set to `Simplified`.
-
-The following code shows the how to configure the ribbon layout in Document Editor:
-
-```ts
-
-import { DocumentEditorContainer, Ribbon } from '@syncfusion/ej2-documenteditor';
-
-DocumentEditorContainer.Inject(Ribbon);
-// Initialize the Document Editor Container with Ribbon mode enabled
-var container = new ej.documenteditor.DocumentEditorContainer({
- enableToobar: true,
- toolbarMode: 'Ribbon', // Options: 'Ribbon' or 'Toolbar'
- ribbonLayout: 'Classic', // Options: 'Simplified' or 'Classic'
- height: '590px'
-});
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-```
-
-## See Also
-
-* [How to customize the ribbon](../document-editor/how-to/customize-ribbon)
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/ts/styles.md b/ej2-javascript/document-editor/ts/styles.md
deleted file mode 100644
index 0f7d34a1a..000000000
--- a/ej2-javascript/document-editor/ts/styles.md
+++ /dev/null
@@ -1,209 +0,0 @@
----
-layout: post
-title: Styles in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Styles in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Styles
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Styles in ##Platform_Name## Document editor control
-
-Styles are useful for applying a set of formatting consistently throughout the document. In Document Editor, styles are created and added to a document programmatically or via the built-in Styles dialog.
-
-## Styles definition overview
-
-A Style in Document Editor should have the following properties:
-
-* **name**: Name of the style. All styles in a document have a unique name, which is used as an identifier when applying the style.
-* **type**: Specifies the document elements that the style will target. For example, paragraph or character.
-* **next**: Specifies that the current style inherits the style set to this property. This is how hierarchical styles are defined.
-* **link**: Provides a relation between the paragraph and character style.
-* **characterFormat**: Specifies the properties of paragraph and character style.
-* **paragraphFormat**: Specifies the properties of paragraph style.
-* **basedOn**: Specifies that the current style inherits the style set to this property. This is how hierarchical styles are defined. It can be optional.
-
-> The style type should match the inherited style type. For example, it is not possible to have a character style inherit a paragraph style.
-
-## Default style
-
-The default style for span and paragraph properties is normal. It internally inherits the default style of the document loaded or Document Editor component.
-
-## Style hierarchy
-
-Each style initially checks its local value for the property that is being evaluated and turns to the style it is based on. If no local value is found, it turns to its default style.
-
-Style inheritance of different styles are listed as follows:
-
-### Character style
-
-Character styles are based only on other character styles.
-
-The inheritance is: Character properties are inherited from the base character style.
-
-### Paragraph style
-
-Paragraph styles are based on other paragraph styles or on linked styles. When a paragraph style is based on another paragraph style, the inheritance of the properties is as follows:
-* Paragraph properties are inherited from the base paragraph style.
-* Span properties are inherited from the base paragraph style.
-
-When a paragraph style is based on a linked style, the inheritance of the properties is as follows:
-* Paragraph properties are inherited from the paragraph style part in its base linked style.
-* Span properties are inherited from the span style part in its base linked style.
-
-### Linked style
-
-Linked styles are composite styles and their components are paragraph and character styles with link between them. To apply paragraph properties, take the properties from the linked paragraph style. Similarly, to apply character properties, take the properties from linked character style.
-Linked styles are based on other linked styles or on paragraph styles.
-
-When a linked style is based on a paragraph style, the hierarchy of the properties is as follows:
-
-* Paragraph properties are inherited from the ‘basedOn’ paragraph style.
-* Character properties are inherited from the ‘basedOn’ paragraph style.
-
-When a linked style is based on another linked style, the hierarchy of the properties is as follows:
-
-* Paragraph properties are inherited from the paragraph style part in its base linked style.
-* Span properties are inherited from the span style part in its base linked style.
-
-## Defining new styles
-
-New Styles are defined and added to the style collection of the document. In this way, they will be discovered by the default UI and applied to the parts of a document.
-
-### Defining a character style
-
-The following example shows how to programmatically create a character style.
-
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
-let styleJson: any = {
- "type": "Character",
- "name": "New CharacterStyle",
- "basedOn": "Default Paragraph Font",
- "characterFormat": {
- "fontSize": 16.0,
- "fontFamily": "Calibri Light",
- "fontColor": "#2F5496",
- "bold": true,
- "italic": true,
- "underline": "Single"
- }
-};
-documentEditor.editor.createStyle(JSON.stringify(styleJson));
-```
-
-### Defining a paragraph style
-
-The following example shows how to programmatically create a paragraph style.
-
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
-let styleJson: any = {
- "type": "Paragraph",
- "name": "New ParagraphStyle",
- "basedOn": "Normal",
- "characterFormat": {
- "fontSize": 16.0,
- "fontFamily": "Calibri Light",
- "fontColor": "#2F5496",
- "bold": true,
- "italic": true,
- "underline": "Single"
- },
- "paragraphFormat": {
- "leftIndent": 0.0,
- "rightIndent": 0.0,
- "firstLineIndent": 0.0,
- "beforeSpacing": 12.0,
- "afterSpacing": 0.0,
- "lineSpacing": 1.0791666507720947,
- "lineSpacingType": "Multiple",
- "textAlignment": "Left",
- "outlineLevel": "Level1"
- }
-};
-documentEditor.editor.createStyle(JSON.stringify(styleJson));
-```
-
-### Defining a linked style
-
-The following example shows how to programmatically create linked style.
-
-```ts
-let documentEditor: DocumentEditor = new DocumentEditor({ enableEditor: true, isReadOnly: false, enableSelection: true });
-let styleJson: any = {
- "type": "Paragraph",
- "name": "New Linked",
- "basedOn": "Normal",
- "next": "Normal",
- "link": "New Linked Char",
- "characterFormat": {
- "fontSize": 16.0,
- "fontFamily": "Calibri Light",
- "fontColor": "#2F5496"
- },
- "paragraphFormat": {
- "leftIndent": 0.0,
- "rightIndent": 0.0,
- "firstLineIndent": 0.0,
- "beforeSpacing": 12.0,
- "afterSpacing": 0.0,
- "lineSpacing": 1.0791666507720947,
- "lineSpacingType": "Multiple",
- "textAlignment": "Left",
- "outlineLevel": "Level1"
- }
-};
-documentEditor.editor.createStyle(JSON.stringify(styleJson));
-```
-
-## Applying a style
-
-The styles are applied using the **applyStyle** method of **editorModule**, the parameter should be passed is the **Name** of the Style.
-
-The styles of the **Character** type is applied to the currently selected part of the document. If there is no selection, the values that will be applied to the word at caret position. The styles of **Paragraph** type follow the same logic and are applied to all paragraphs in the selection or the current paragraph.
-
-When there is no selection, styles of **Linked** type will change the values of the paragraph, and apply both the Paragraph and Character properties. When there is selection, Linked Style changes only the character properties of the selected text.
-
-For example, the following line will apply the "New Linked" to the current paragraph.
-
-```ts
-editor.editorModule.applyStyle('New Linked');
-//Clear direct formatting and apply the specified style
-editor.editorModule.applyStyle('New Linked', true);
-```
-
-## Get Styles
-
-You can get the styles in the document using the below code snippet.
-
-```ts
-//Get paragraph styles
-let paragraphStyles = documentEditor.getStyles('Paragraph');
-//Get character styles
-let paragraphStyles = documentEditor.getStyles('Character');
-```
-
-## Modify an existing style
-
-You can modify a existing style with the specified style properties using [`createStyle`](../api/document-editor/editor/#createStyle) method. If modifyExistingStyle parameter is set to `true` the style properties is updated to the existing style.
-
-The following illustrate to modify an existing style.
-
-```ts
-let styleJson: any = {
- "type": "Paragraph",
- "name": "Heading 1",
- "characterFormat": {
- "fontSize": 32,
- "fontFamily": "Calibri"
- }
-};
-documentEditor.editor.createStyle(styleName, true);
-```
-
-> If modifyExistingStyle parameter is set to true and a style already exists with same name, it modifies the specified properties in the existing style.
-> If modifyExistingStyle parameter is set to false and a style already exists with same name, it creates a new style with unique name by appending ‘_1’. Hence, the newly style will not have the specified name.
-> If no style exists with same name, it creates a new style.
diff --git a/ej2-javascript/document-editor/ts/web-services-overview.md b/ej2-javascript/document-editor/ts/web-services-overview.md
deleted file mode 100644
index e6ffd8b0d..000000000
--- a/ej2-javascript/document-editor/ts/web-services-overview.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-layout: post
-title: Web services in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Web services in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Web services
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Web services in ##Platform_Name## Document editor control
-
-You can deploy web APIs for server-side dependencies of Document Editor component in the following platforms.
-
-* [ASP.NET Core](../document-editor/web-services/core)
-* [ASP.NET MVC](../document-editor/web-services/mvc)
-* [Java](../document-editor/web-services/java)
-
-## Which operations require server-side interaction
-
-|Operations|When client-server communication will be triggered?|What type of data will be transferred between client and server?|
-|------------|--------------------------------------|------------------------|
-|[Open file formats other than SFDT](../document-editor/import#convert-word-documents-into-sfdt)|When opening the document other than SFDT (Syncfusion® Document Editor's native file format), the server-side web API is invoked from client-side script.|**Client**: Sends the input file. **Server**: Receives the input file and sends the converted SFDT back to the client.
The server-side web API internally extracts the content from the document (DOCX, DOC, WordML, RTF, HTML) using Syncfusion® Word library (DocIO) and converts it into SFDT for opening the document in Document Editor.|
-|[Paste with formatting](../document-editor/clipboard#paste-with-formatting)|When pasting the formatted content (HTML/RTF) received from system clipboard. For converting HTML/RTF to SFDT format.
**Note**: Whereas plain text received from system clipboard will be pasted directly in the client-side.|**Client**: Sends the input Html or Rtf string. **Server**: Receives the input Html or Rtf string and sends the converted SFDT back to the client.|
-|[Restrict editing](../document-editor/document-management)|When protecting the document, for generating hash.|**Client**: Sends the input data for hashing algorithm. **Server**: Receives the input data for hashing algorithm and sends the result hash information back to the client.|
-|[Spellcheck](../document-editor/spell-check)(default)|When the spellchecker is enabled on client-side Document Editor, and it performs the spell check validation for words in the document.|**Client**: Sends the words (string) with their language for spelling validation. **Server**: Receives the words (string) with their language for spelling validation and sends the validation result as JSON back to the client.|
-|[SpellCheckByPage](../document-editor/spell-check)|Document editor provides options to spellcheck page by page when loading the documents. By [enabling optimized spell check](../document-editor/spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents.|**Client**: Sends the words (string) with their language for spelling validation. **Server**: Receives the words (string) with their language for spelling validation and sends the validation result as JSON back to the client.|
-|[Save as file formats other than SFDT and DOCX](../document-editor/server-side-export) (optional API)|You can configure this API, if you want to save the document in file format other than DOCX and SFDT.
For saving the files as WordML, DOC, RTF, HTML, ODT, Text using Syncfusion® Word library (DocIO) and PDF using Syncfusion® Word (DocIO) and PDF libraries.|You can transfer document from client to server either as SFDT or DOCX format.
First option (SFDT): **Client**: Sends the SFDT. **Server**: Receives the SFDT and saves the converted document as any file format supported by [Syncfusion® Word library (DocIO)](https://www.syncfusion.com/word-framework/net/word-library) in server or sends the saved file to the client browser.
Second option (DOCX): **Client**: Sends the DOCX file. **Server**: Receives the DOCX file and saves the converted document as any file format supported by [Syncfusion® Word library (DocIO)](https://www.syncfusion.com/word-framework/net/word-library) in server or sends the saved file to the client browser.|
-
->Note: If you don't require the above functionalities then you can deploy as pure client-side component without any server-side interactions.
-
-Please refer the [example from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) to configure the web service and set the [serviceUrl](../api/document-editor-container#serviceurl).
-
-If your running web service Url is `http://localhost:62869/`, set the serviceUrl like below:
-
-```ts
-container.serviceUrl = "http://localhost:62869/api/documenteditor/";
-```
-
-## Required Web API structure
-
-Please check below table for expected web API structure.
-
-|Expected method name |Parameters |Return type |
-|-----|----|----|
-|Import |Files(IFormCollection) |json(sfdt format) |
-|SystemClipboard|CustomerParameter: content(type string either rtf or html) and type(either .rtf or .html) |json(sfdt format) |
-|RestrictEditing |Parameter of type CustomRestrictParameter public class CustomRestrictParameter { public string passwordBase64 { get; set; } public string saltBase64 { get; set; } public int spinCount { get; set; } } |result hash information |
-|SpellCheck(default) |Parameter: SpellCheckJsonData public class SpellCheckJsonData { public int LanguageID { get; set; } public string TexttoCheck { get; set; } public bool CheckSpelling { get; set; } public bool CheckSuggestion { get; set; } public bool AddWord { get; set; } } |Json type of Spellcheck containing details of spell checked word |
-|SpellCheckByPage |Parameter: SpellCheckJsonData public class SpellCheckJsonData { public int LanguageID { get; set; } public string TexttoCheck { get; set; } public bool CheckSpelling { get; set; } public bool CheckSuggestion { get; set; } public bool AddWord { get; set; } } |Json type of Spellcheck containing details of spell checked word
**Note**: Document editor provides options to spellcheck page by page when loading the documents. By [enabling optimized spell check](../document-editor/spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents. |
-|Save(optional API) |parameter: SaveParameter public class SaveParameter { public string Content { get; set; } public string FileName { get; set; } } |void(Save the file as file stream) |
-|ExportSFDT(optional API) |parameter: SaveParameter public class SaveParameter { public string Content { get; set; } public string FileName { get; set; } } |FileStreamResult (to save the document in client-side) |
-|Export(optional API) |Files(IFormCollection) |FileStreamResult (to save the document in client-side) |
-
-## Customize the expected method name
-
-Document editor component provides an option to customize the expected method name for Import, SystemClipboard, RestrictEditing and SpellCheck using [serverActionSettings](../api/document-editor-container/documentEditorContainerModel/#serveractionsettings).
-
-The following example code illustrates how to customize the method name using serverActionSettings.
-
-```ts
-
- let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px' ,enableSpellCheck:true});
- DocumentEditorContainer.Inject(Toolbar);
- container.serviceUrl = hostUrl + 'api/documenteditor/';
- // Customize the API name
- let settings = { import: 'Import1', systemClipboard: 'SystemClipboard1', spellCheck: 'SpellCheck1', restrictEditing: 'RestrictEditing1' }
- container.serverActionSettings = settings;
- container.appendTo('#container');
-
-```
-
-## Add the custom headers to XMLHttpRequest
-
-Document editor component provides an an option to add custom headers of XMLHttpRequest using the [`headers`](../api/document-editor-container/documentEditorContainerModel/#headers).
-
-```ts
-
- let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true, height: '590px'});
- DocumentEditorContainer.Inject(Toolbar);
- container.serviceUrl = hostUrl + 'api/documenteditor/';
- // custom headers
- let customHeaders = [{ 'Authorization': 'Bearer YOUR_ACCESS_TOKEN' }, { 'Content-Type': 'application/json' }];
- container.headers = customHeaders;
- container.appendTo('#container');
-
-```
-
-## Modify the XMLHttpRequest before request send
-
-Document editor component provides an option to modify the XMLHttpRequest object (setting additional headers, if needed) using [`beforeXmlHttpRequestSend`](../api/document-editor-container/#beforexmlhttprequestsend) event and it gets triggered before a server request.
-
-You can customize the required [`XMLHttpRequest`](../api/document-editor/xmlHttpRequestEventArgs/) properties.
-
-The following example code illustrates how to modify the XMLHttpRequest using beforeXmlHttpRequestSend.
-
-```ts
-import { DocumentEditorContainer, XmlHttpRequestEventArgs } from '@syncfusion/ej2-documenteditor';
-
-let container: DocumentEditorContainer = new DocumentEditorContainer({
- enableToolbar: true,
- height: '590px',
-});
-
-// Below action, cancel all server-side interactions expect spell check
-container.beforeXmlHttpRequestSend = (args: XmlHttpRequestEventArgs): void => {
- //Here, modifying the request headers
- args.headers = [{ syncfusion: 'true' }];
- args.withCredentials = true;
- switch (args.serverActionType) {
- case 'Import':
- case 'RestrictEditing':
- case 'SystemClipboard':
- args.cancel = true;
- break;
- }
-};
-container.appendTo('#container');
-
-```
-
-Note: Find the customizable serverActionType values are `'Import' | 'RestrictEditing' | 'SpellCheck' | 'SystemClipboard'`.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/view.md b/ej2-javascript/document-editor/view.md
deleted file mode 100644
index 312cd64f1..000000000
--- a/ej2-javascript/document-editor/view.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: post
-title: View in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about View in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: View
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# View in ##Platform_Name## Document editor control
-
-## Web layout
-
-DocumentEditor allows you to change the view to web layout and print using the [`layoutType`](../../api/document-editor#layouttype) property with the supported [`LayoutType`](../../api/document-editor/layoutType/).
-
-```ts
-let docEdit: DocumentEditor = new DocumentEditor({ layoutType: 'Continuous'});
-```
-
->Note: Default value of [`layoutType`](../../api/document-editor#layouttype) in DocumentEditor component is [`Pages`](../../api/document-editor/layoutType/).
-
-## Ruler
-
-Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.
-
-The following example illustrates how to enable ruler in Document Editor
-
-{% if page.publishingplatform == "typescript" %}
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/document-editor/ruler-cs1/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/ruler-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/ruler-cs1" %}
-
-{% elsif page.publishingplatform == "javascript" %}
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/document-editor/ruler-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/document-editor/ruler-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/document-editor/ruler-cs1" %}
-{% endif %}
-
-## Navigation Pane
-
-Using the heading navigation pane allows users to swiftly navigate documents by heading, enhancing their ability to move through the document efficiently.
-
-The following example illustrates how to enable heading navigation pane in Document Editor
-
-```ts
-let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px',
-// Enable heading navigation pane in document editor
- documentEditorSettings: {
- showNavigationPane: true,
- }
-});
-DocumentEditorContainer.Inject(Toolbar);
-container.serviceUrl = 'https://services.syncfusion.com/js/production/api/documenteditor/';
-container.appendTo('#container');
-```
-> The Web API hosted link `https://services.syncfusion.com/js/production/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/web-services/core.md b/ej2-javascript/document-editor/web-services/core.md
deleted file mode 100644
index 3937ba7c7..000000000
--- a/ej2-javascript/document-editor/web-services/core.md
+++ /dev/null
@@ -1,523 +0,0 @@
----
-layout: post
-title: Core in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Core in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Core
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Core in ##Platform_Name## Document editor control
-
-DocumentEditor depends on server side interaction for below listed operations can be written in ASP.NET Core using [Syncfusion.EJ2.WordEditor.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core).
-
-* Import Word Document
-* Paste with formatting
-* Restrict Editing
-* Spell Check
-* Save as file formats other than SFDT and DOCX
-
->Note: Syncfusion® provides a predefined [Word Processor server docker image](https://hub.docker.com/r/syncfusion/word-processor-server) targeting ASP.NET Core 2.1 framework. You can directly pull this docker image and deploy it in server on the go. You can also create own docker image by customizing the existing [docker project from GitHub](https://github.com/SyncfusionExamples/Word-Processor-Server-Docker). To know more, refer this link.[Word Processor Server Docker Image Overview](../../document-editor/server-deployment/word-processor-server-docker-image-overview)
-
-This section explains how to create the service for DocumentEditor in ASP.NET Core.
-
-## Importing Word Document
-
-As the Document editor client-side script requires the document in SFDT file format, you can convert the Word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format by using this Web API.
-
-The following example code illustrates how to write a Web API for importing Word documents into Document Editor component.
-
-```c#
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("Import")]
- public string Import(IFormCollection data)
- {
- if (data.Files.Count == 0)
- return null;
- Stream stream = new MemoryStream();
- IFormFile file = data.Files[0];
- int index = file.FileName.LastIndexOf('.');
- string type = index > -1 && index < file.FileName.Length - 1 ?
- file.FileName.Substring(index) : ".docx";
- file.CopyTo(stream);
- stream.Position = 0;
-
- WordDocument document = WordDocument.Load(stream, GetFormatType(type.ToLower()));
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- return json;
- }
-```
-
-### Import document with TIFF, EMF and WMF images
-
-The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
-
->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `MetafileStream` property and you can get the `IsMetafile` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using `Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET`.
-
-The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document.
-
-```c#
- using SkiaSharp;
- using BitMiracle.LibTiff.Classic;
-
- public string Import(IFormCollection data)
- {
- if (data.Files.Count == 0)
- return null;
- Stream stream = new MemoryStream();
- IFormFile file = data.Files[0];
- int index = file.FileName.LastIndexOf('.');
- string type = index > -1 && index < file.FileName.Length - 1 ?
- file.FileName.Substring(index) : ".docx";
- file.CopyTo(stream);
- stream.Position = 0;
-
- //Hooks MetafileImageParsed event.
- WordDocument.MetafileImageParsed += OnMetafileImageParsed;
- //Converts Stream DOM to SFDT DOM.
- WordDocument document = WordDocument.Load(stream, GetFormatType(type.ToLower()));
- //Unhooks MetafileImageParsed event.
- WordDocument.MetafileImageParsed -= OnMetafileImageParsed;
- //Serializes SFDT DOM to SFDT string.
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- return json;
- }
-
- //Converts Metafile to raster image.
- private static void OnMetafileImageParsed(object sender, MetafileImageParsedEventArgs args)
- {
- if (args.IsMetafile)
- {
- //MetaFile image conversion(EMF and WMF)
- //You can write your own method definition for converting metafile to raster image using any third-party image converter.
- args.ImageStream = ConvertMetafileToRasterImage(args.MetafileStream);
- }
- else
- {
- //TIFF image conversion
- args.ImageStream = ConvertTiffToRasterImage(args.MetafileStream);
- }
- }
-
- // Converting Tiff to Png image using Bitmiracle https://www.nuget.org/packages/BitMiracle.LibTiff.NET
- private static MemoryStream ConvertTiffToRasterImage(Stream tiffStream)
- {
- MemoryStream imageStream = new MemoryStream();
- using (Tiff tif = Tiff.ClientOpen("in-memory", "r", tiffStream, new TiffStream()))
- {
- // Find the width and height of the image
- FieldValue[] value = tif.GetField(BitMiracle.LibTiff.Classic.TiffTag.IMAGEWIDTH);
- int width = value[0].ToInt();
-
- value = tif.GetField(BitMiracle.LibTiff.Classic.TiffTag.IMAGELENGTH);
- int height = value[0].ToInt();
-
- // Read the image into the memory buffer
- int[] raster = new int[height * width];
- if (!tif.ReadRGBAImage(width, height, raster))
- {
- throw new Exception("Could not read image");
- }
-
- // Create a bitmap image using SkiaSharp.
- using (SKBitmap sKBitmap = new SKBitmap(width, height, SKImageInfo.PlatformColorType, SKAlphaType.Premul))
- {
- // Convert a RGBA value to byte array.
- byte[] bitmapData = new byte[sKBitmap.RowBytes * sKBitmap.Height];
- for (int y = 0; y < sKBitmap.Height; y++)
- {
- int rasterOffset = y * sKBitmap.Width;
- int bitsOffset = (sKBitmap.Height - y - 1) * sKBitmap.RowBytes;
-
- for (int x = 0; x < sKBitmap.Width; x++)
- {
- int rgba = raster[rasterOffset++];
- bitmapData[bitsOffset++] = (byte)((rgba >> 16) & 0xff);
- bitmapData[bitsOffset++] = (byte)((rgba >> 8) & 0xff);
- bitmapData[bitsOffset++] = (byte)(rgba & 0xff);
- bitmapData[bitsOffset++] = (byte)((rgba >> 24) & 0xff);
- }
- }
-
- // Convert a byte array to SKColor array.
- SKColor[] sKColor = new SKColor[bitmapData.Length / 4];
- int index = 0;
- for (int i = 0; i < bitmapData.Length; i++)
- {
- sKColor[index] = new SKColor(bitmapData[i + 2], bitmapData[i + 1], bitmapData[i], bitmapData[i + 3]);
- i += 3;
- index += 1;
- }
-
- // Set the SKColor array to SKBitmap.
- sKBitmap.Pixels = sKColor;
-
- // Save the SKBitmap to PNG image stream.
- sKBitmap.Encode(SKEncodedImageFormat.Png, 100).SaveTo(imageStream);
- imageStream.Flush();
- }
- }
- return imageStream;
- }
-```
-
-## Paste with formatting
-
-This Web API converts the system clipboard data (HTML/RTF) to SFDT format which is required to paste content with formatting.
-
-The following example code illustrates how to write a Web API for paste with formatting.
-
-```c#
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("SystemClipboard")]
- public string SystemClipboard([FromBody]CustomParameter param)
- {
- if (param.content != null && param.content != "")
- {
- try
- {
- //Hooks MetafileImageParsed event.
- WordDocument.MetafileImageParsed += OnMetafileImageParsed;
- WordDocument document = WordDocument.LoadString(param.content, GetFormatType(param.type.ToLower()));
- //Unhooks MetafileImageParsed event.
- WordDocument.MetafileImageParsed -= OnMetafileImageParsed;
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- return json;
- }
- catch (Exception)
- {
- return "";
- }
- }
- return "";
- }
-
- public class CustomParameter
- {
- public string content { get; set; }
- public string type { get; set; }
- }
-
- //Converts Metafile to raster image.
- private static void OnMetafileImageParsed(object sender, MetafileImageParsedEventArgs args)
- {
- //You can write your own method definition for converting metafile to raster image using any third-party image converter.
- args.ImageStream = ConvertMetafileToRasterImage(args.MetafileStream);
- }
-```
-
->Note: The web browsers do not support to display metafile images like EMF and WMF. As a fallback approach, you can convert the metafile to raster image using any image converter in the [MetafileImageParsed](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DocumentEditor.WordDocument.html#Syncfusion_EJ2_DocumentEditor_WordDocument_MetafileImageParsed) event and this fallback raster image will be displayed in the client-side Document editor component.
-
-## Restrict editing
-
-This Web API generates hash from the specified password and salt value which is required for restrict editing functionality of Document Editor component.
-
-The following example code illustrates how to write a Web API for restrict editing.
-
-```c#
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("RestrictEditing")]
- public string[] RestrictEditing([FromBody]CustomRestrictParameter param)
- {
- if (param.passwordBase64 == "" && param.passwordBase64 == null)
- return null;
- return WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount);
- }
-
- public class CustomRestrictParameter
- {
- public string passwordBase64 { get; set; }
- public string saltBase64 { get; set; }
- public int spinCount { get; set; }
- }
-```
-
-## Spell Check
-
-Document Editor supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor client-side script requires this Web API to show error words and list suggestions in context menu. This Web API returns the json type of spell-checked word which contains details about error words if any and suggestions.
-
-To know more about configure spell check, please check this [link](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/tree/master/ASP.NET%20Core#steps-to-configure-spell-checker).
-
-In startup.cs file, you can configure the spell check files like below:
-
-```c#
-
- public Startup(IConfiguration configuration, IHostingEnvironment env)
- {
- var builder = new ConfigurationBuilder()
- .SetBasePath(env.ContentRootPath)
- .AddJsonFile("appsettings.json", optional: true, reloadOnChange: true)
- .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true)
- .AddEnvironmentVariables();
-
- Configuration = builder.Build();
- _contentRootPath = env.ContentRootPath;
-
- path = Configuration["SPELLCHECK_DICTIONARY_PATH"];
- string jsonFileName = Configuration["SPELLCHECK_JSON_FILENAME"];
- //check the spell check dictionary path environment variable value and assign default data folder
- //if it is null.
- path = string.IsNullOrEmpty(path) ? Path.Combine(env.ContentRootPath, "App_Data") : Path.Combine(env.ContentRootPath, path);
- //Set the default spellcheck.json file if the json filename is empty.
- jsonFileName = string.IsNullOrEmpty(jsonFileName) ? Path.Combine(path, "spellcheck.json") : Path.Combine(path, jsonFileName);
- if (System.IO.File.Exists(jsonFileName))
- {
- string jsonImport = System.IO.File.ReadAllText(jsonFileName);
- List spellChecks = JsonConvert.DeserializeObject>(jsonImport);
- spellDictCollection = new List();
- //construct the dictionary file path using customer provided path and dictionary name
- foreach (var spellCheck in spellChecks)
- {
- spellDictCollection.Add(new DictionaryData(spellCheck.LanguadeID, Path.Combine(path, spellCheck.DictionaryPath), Path.Combine(path, spellCheck.AffixPath)));
- personalDictPath = Path.Combine(path, spellCheck.PersonalDictPath);
- }
- }
- }
-
-```
-
-Document editor provides options to spell check word by word and spellcheck page by page when loading the documents.
-
-### Spell check word by word
-
-This Web API performs the spell check word by word and return the json which contains information about error words and suggestions if any. By default, spell check word by word is performed in Document editor when enabling spell check in client-side.
-
-The following example code illustrates how to write a Web API for spell check word by word.
-
-```c#
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("SpellCheck")]
- public string SpellCheck([FromBody] SpellCheckJsonData spellChecker)
- {
- try
- {
- SpellChecker spellCheck = new SpellChecker(spellDictionary, personalDictPath);
- spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);
- return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- }
- catch
- {
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
- }
-
- public class SpellCheckJsonData
- {
- public int LanguageID { get; set; }
- public string TexttoCheck { get; set; }
- public bool CheckSpelling { get; set; }
- public bool CheckSuggestion { get; set; }
- public bool AddWord { get; set; }
- }
-```
-
-### Spell check page by page
-
-This Web API performs the spell check page by page and return the json which contains information about error words and suggestions if any. By [enabling optimized spell check](../../document-editor/spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents.
-
-The following example code illustrates how to write a Web API for spell check page by page.
-
-```c#
-
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("SpellCheckByPage")]
- public string SpellCheckByPage([FromBody] SpellCheckJsonData spellChecker)
- {
- try
- {
- SpellChecker spellCheck = new SpellChecker(spellDictionary, personalDictPath);
- spellCheck.CheckSpelling(spellChecker.LanguageID, spellChecker.TexttoCheck);
- return Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- }
- catch
- {
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
- }
-
- public class SpellCheckJsonData
- {
- public int LanguageID { get; set; }
- public string TexttoCheck { get; set; }
- public bool CheckSpelling { get; set; }
- public bool CheckSuggestion { get; set; }
- public bool AddWord { get; set; }
- }
-```
-
-## Save as file formats other than SFDT and DOCX
-
-You can configure this API, if you want to save the document in file format other than DOCX and SFDT using server-side. You can save the document in following ways:
-
-### Save the document in database or file server
-
-This Web API saves the document in the server machine. You can customize this API to save the document into databases or file servers.
-
-The following example code illustrates how to write a Web API for save document in server-side.
-
-```c#
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("Save")]
- public void Save([FromBody] SaveParameter data)
- {
- string name = data.FileName;
- string format = RetrieveFileType(name);
- if (string.IsNullOrEmpty(name))
- {
- name = "Document1.doc";
- }
- WDocument document = WordDocument.Save(data.Content);
- // Saves the document to server machine file system, you can customize here to save into databases or file servers based on requirement.
- FileStream fileStream = new FileStream(name, FileMode.OpenOrCreate, FileAccess.ReadWrite);
- document.Save(fileStream, GetWFormatType(format));
- document.Close();
- fileStream.Close();
- }
-
- public class SaveParameter
- {
- public string Content { get; set; }
- public string FileName { get; set; }
- }
-```
-
-### Save as other file formats by passing SFDT string
-
-This Web API converts the SFDT string to required format and returns the document as FileStreamResult to client-side. Using this API, you can save the document in file format other than SFDT and DOCX and download the document in client browser.
-
-The following example code illustrates how to write a Web API for export sfdt.
-
-```c#
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("ExportSFDT")]
- public FileStreamResult ExportSFDT([FromBody] SaveParameter data)
- {
- string name = data.FileName;
- string format = RetrieveFileType(name);
- if (string.IsNullOrEmpty(name))
- {
- name = "Document1.doc";
- }
- WDocument document = WordDocument.Save(data.Content);
- return SaveDocument(document, format, name);
- }
-
- public class SaveParameter
- {
- public string Content { get; set; }
- public string FileName { get; set; }
- }
-
- private FileStreamResult SaveDocument(WDocument document, string format, string fileName)
- {
- Stream stream = new MemoryStream();
- string contentType = "";
- if (format == ".pdf")
- {
- contentType = "application/pdf";
- }
- else
- {
- WFormatType type = GetWFormatType(format);
- switch (type)
- {
- case WFormatType.Rtf:
- contentType = "application/rtf";
- break;
- case WFormatType.WordML:
- contentType = "application/xml";
- break;
- case WFormatType.Html:
- contentType = "application/html";
- break;
- case WFormatType.Dotx:
- contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.template";
- break;
- case WFormatType.Doc:
- contentType = "application/msword";
- break;
- case WFormatType.Dot:
- contentType = "application/msword";
- break;
- }
- document.Save(stream, type);
- }
- document.Close();
- stream.Position = 0;
- return new FileStreamResult(stream, contentType)
- {
- FileDownloadName = fileName
- };
- }
-```
-
-### Save as other file formats by passing DOCX file
-
-This Web API converts the DOCX document to required format and returns the document as FileStreamResult to client-side. Using this API, you can save the document in file format other than SFDT and DOCX and download the document in client browser.
-
-The following example code illustrates how to write a Web API for export.
-
-```c#
-
- [AcceptVerbs("Post")]
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("Export")]
- public FileStreamResult Export(IFormCollection data)
- {
- if (data.Files.Count == 0)
- return null;
- string fileName = this.GetValue(data, "filename");
- string name = fileName;
- string format = RetrieveFileType(name);
- if (string.IsNullOrEmpty(name))
- {
- name = "Document1";
- }
- WDocument document = this.GetDocument(data);
- return SaveDocument(document, format, fileName);
- }
-
- private string RetrieveFileType(string name)
- {
- int index = name.LastIndexOf('.');
- string format = index > -1 && index < name.Length - 1 ?
- name.Substring(index) : ".doc";
- return format;
- }
-
- private string GetValue(IFormCollection data, string key)
- {
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
- }
-
-```
-
->Note: Please refer the [ASP.NET Core Web API sample](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/ASP.NET%20Core).
diff --git a/ej2-javascript/document-editor/web-services/java.md b/ej2-javascript/document-editor/web-services/java.md
deleted file mode 100644
index f2b819f19..000000000
--- a/ej2-javascript/document-editor/web-services/java.md
+++ /dev/null
@@ -1,685 +0,0 @@
----
-layout: post
-title: Java in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Java in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Java
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Java in ##Platform_Name## Document editor control
-
-This page illustrates how to create web service in Java for the server-side dependent functionalities of Word Processor component a.k.a. Document Editor. Document Editor depends on server side interaction for below listed operations and it can be written in Java using `syncfusion-ej2-wordprocessor.jar` file.
-
-* Import Word Document
-* Paste with formatting
-* Restrict Editing
-* Spell Check
-* Save as file formats other than SFDT and DOCX
-
-## Supported Java versions
-
-Syncfusion® Java library supports Java SE 8.0(1.8) or above versions.
-
-## External Jars Required
-
-The following jar files are required to be referenced in your Java application.
-
-1. syncfusion-ej2-wordprocessor
-
-2. syncfusion-docio
-
-3. syncfusion-javahelper
-
-## Download JAR file
-
-The JAR file is available in both [Syncfusion® Essential-JS2](https://www.syncfusion.com/downloads/essential-js2) build and maven repository.
-
-### Get JAR file from Syncfusion® build
-
-You can get the `syncfusion-ej2-wordprocessor.jar` and its dependent jar files from Syncfusion® build installed location.
-
-**Syntax:**
-> Jar file: `(installed location)/Syncfusion/Essential Studio/{Platform}/{version}/JarFiles/syncfusion-ej2-wordprocessor-{version}.jar`
-
-**Example:**
-> Jar file: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/18.4.0.30/JarFiles/syncfusion-ej2-wordprocessor-18.4.0.30.jar`
-
-You can also get the jar files by installing [file formats controls](https://www.syncfusion.com/sales/products/fileformats?utm_source=ug&utm_medium=listing&utm_campaign=java-word-processor#). You can find the required jars in the build installed location.
-
-**Syntax:**
-> Jar file: `(installed location)/Syncfusion/Essential Studio/{Platform}/{version}/JarFiles/syncfusion-ej2-wordprocessor-{version}.jar`
-
-**Example:**
-> Jar file: `C:/Program Files (x86)/Syncfusion/Essential Studio/FileFormats/18.4.0.30/JarFiles/syncfusion-ej2-wordprocessor-18.4.0.30.jar`
-
-### Referring JAR from Syncfusion® Maven Repository
-
-You can download the jars from the Syncfusion® [maven repository](https://jars.syncfusion.com/) to use our artifacts in your projects. It helps to use the Syncfusion® Java packages without installing Essential Studio® or platform installation to development with Syncfusion® controls.
-
-#### Download Syncfusion® Java packages
-
-You can easily download the Syncfusion® packages for Java via maven repository. Follow the below guidelines to configure as per the tool.
-
-#### Refer the maven repository in build tool
-
-##### Gradle
-
-```java
- repositories {
- maven {
- // Syncfusion maven repository to download the artifacts
- url "https://jars.syncfusion.com/repository/maven-public/"
- }
- }
-```
-
-##### Apache Maven
-
-```java
-
- Syncfusion-Java
- Syncfusion Java repo
- https://jars.syncfusion.com/repository/maven-public/
-
-```
-
-#### Refer the Syncfusion® package in your project as the dependency
-
-##### Gradle
-
-```java
- dependencies {
- implementation 'com.syncfusion:syncfusion-ej2-wordprocessor:+'
- }
-```
-
-##### Apache Maven
-
-```java
-
- com.syncfusion
- syncfusion-ej2-wordprocessor
- 18.4.0.30
-
-```
-
-This section explains how to create the Java web service for DocumentEditor.
-
-## Importing Word Document
-
-As the Document editor client-side script requires the document in SFDT file format, you can convert the Word documents (.dotx,.docx,.docm), rich text format documents (.rtf), and text documents (.txt) into SFDT format by using this Web API.
-
-Note: Document editor Java library doesn’t have support for the **DOC format** Word document. As the DOC format is an older file format, we are concentrating on latest DOCX specific features and it will be more helpful in future if you use DOCX format to utilize some more features from Document editor. So, we recommend you to use the DOCX file format instead of DOC file format, to achieve your requirement.
-
-The following example code illustrates how to write a Web API for importing Word documents into Document Editor component.
-
-```java
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/Import")
- public String uploadFile(@RequestParam("files") MultipartFile file) throws Exception {
- try {
- return WordProcessorHelper.load(file.getInputStream(), FormatType.Docx);
- } catch (Exception e) {
- e.printStackTrace();
- return "{\"sections\":[{\"blocks\":[{\"inlines\":[{\"text\":" + e.getMessage() + "}]}]}]}";
- }
- }
-```
-
-### Import document with TIFF, EMF and WMF images
-
-The web browsers do not support to display metafile images like EMF and WMF and also TIFF format images. As a fallback approach, you can convert the metafile/TIFF format image to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
-
->Note: In `MetafileImageParsedEventArgs` event argument, you can get the metafile stream using `getMetafileStream()` property and you can get the `getIsMetafile()` boolean value to determine whether the image is meta file images(WMF,EMF) or Tiff format images. In below example, we have converted the TIFF to raster image in `ConvertTiffToRasterImage()` method using TwelveMonkeys ImageIO TIFF library.
-
-The following example code illustrates how to use `MetafileImageParsed` event for creating fallback raster image for metafile present in a Word document.
-
-```java
-import com.syncfusion.javahelper.system.collections.generic.*;
-import com.syncfusion.ej2.wordprocessor.*;
-// Below import statements are used for TIFF image conversion
-import javax.imageio.*;
-import javax.imageio.spi.IIORegistry;
-import java.awt.image.BufferedImage;
-import java.io.*;
-import com.twelvemonkeys.imageio.plugins.tiff.TIFFImageReaderSpi;
-
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/Import")
- public String importFile(@RequestParam("files") MultipartFile file) throws Exception {
- try {
- WordDocument docIoDocument = new WordDocument(file.getInputStream());
-
- MetafileImageParsedEventHandler metafileImageParsedEvent = new MetafileImageParsedEventHandler() {
-
- ListSupport delegateList = new ListSupport(
- MetafileImageParsedEventHandler.class);
-
- // Represents event handling for MetafileImageParsedEventHandlerCollection.
- public void invoke(Object sender, MetafileImageParsedEventArgs args) throws Exception {
- OnMetafileImageParsed(sender, args);
- }
-
- // Represents the method that handles MetafileImageParsed event.
- public void dynamicInvoke(Object... args) throws Exception {
- OnMetafileImageParsed((Object) args[0], (MetafileImageParsedEventArgs) args[1]);
- }
-
- // Represents the method that handles MetafileImageParsed event to add collection item.
- public void add(MetafileImageParsedEventHandler delegate) throws Exception {
- if (delegate != null)
- delegateList.add(delegate);
- }
-
- // Represents the method that handles MetafileImageParsed event to remove collection
- // item.
- public void remove(MetafileImageParsedEventHandler delegate) throws Exception {
- if (delegate != null)
- delegateList.remove(delegate);
- }
- };
- // Hooks MetafileImageParsed event.
- WordProcessorHelper.MetafileImageParsed.add("OnMetafileImageParsed", metafileImageParsedEvent);
- // Converts DocIO DOM to SFDT DOM.
- String sfdtContent = WordProcessorHelper.load(docIoDocument);
- // Unhooks MetafileImageParsed event.
- WordProcessorHelper.MetafileImageParsed.remove("OnMetafileImageParsed", metafileImageParsedEvent);
- return sfdtContent;
- } catch (Exception e) {
- e.printStackTrace();
- return "{\"sections\":[{\"blocks\":[{\"inlines\":[{\"text\":" + e.getMessage() + "}]}]}]}";
- }
- }
-
- // Converts Metafile to raster image.
- private static void OnMetafileImageParsed(Object sender, MetafileImageParsedEventArgs args) {
- if (args.getIsMetafile())
- {
- //MetaFile image conversion(EMF and WMF)
- //You can write your own method definition for converting metafile to raster image using any third-party image converter.
- args.setImageStream(ConvertMetafileToRasterImage(args.getMetafileStream())) ;
- }
- else
- {
- //TIFF image conversion
- args.setImageStream(ConvertTiffToRasterImage(args.getMetafileStream())) ;
- }
- }
-
- private static StreamSupport ConvertTiffToRasterImage(StreamSupport ImageStream) throws Exception {
- InputStream inputStream = StreamSupport.toStream(args.getMetafileStream());
- // Use ByteArrayOutputStream to collect data into a byte array
- ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
-
- // Read data from the InputStream and write it to the ByteArrayOutputStream
- byte[] buffer = new byte[1024];
- int bytesRead;
- while ((bytesRead = inputStream.read(buffer)) != -1) {
- byteArrayOutputStream.write(buffer, 0, bytesRead);
- }
-
- // Convert the ByteArrayOutputStream to a byte array
- byte[] tiffData = byteArrayOutputStream.toByteArray();
- // Read TIFF image from byte array
- ByteArrayInputStream tiffInputStream = new ByteArrayInputStream(tiffData);
- IIORegistry.getDefaultInstance().registerServiceProvider(new TIFFImageReaderSpi());
-
- // Create ImageReader and ImageWriter instances
- ImageReader tiffReader = ImageIO.getImageReadersByFormatName("TIFF").next();
- ImageWriter pngWriter = ImageIO.getImageWritersByFormatName("PNG").next();
-
- // Set up input and output streams
- tiffReader.setInput(ImageIO.createImageInputStream(tiffInputStream));
- ByteArrayOutputStream pngOutputStream = new ByteArrayOutputStream();
- pngWriter.setOutput(ImageIO.createImageOutputStream(pngOutputStream));
-
- // Read the TIFF image and write it as a PNG
- BufferedImage image = tiffReader.read(0);
- pngWriter.write(image);
- pngWriter.dispose();
- byte[] jpgData = pngOutputStream.toByteArray();
- InputStream jpgStream = new ByteArrayInputStream(jpgData);
- return StreamSupport.toStream(jpgStream);
- }
-```
-
-## Paste with formatting
-
-This Web API converts the system clipboard data (HTML/RTF) to SFDT format which is required to paste content with formatting.
-
-The following example code illustrates how to write a Web API for paste with formatting.
-
-```java
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/SystemClipboard")
- public String systemClipboard(@RequestBody CustomParameter param) {
- if (param.content != null && param.content != "") {
- try {
- MetafileImageParsedEventHandler metafileImageParsedEvent = new MetafileImageParsedEventHandler() {
-
- ListSupport delegateList = new ListSupport(
- MetafileImageParsedEventHandler.class);
-
- // Represents event handling for MetafileImageParsedEventHandlerCollection.
- public void invoke(Object sender, MetafileImageParsedEventArgs args) throws Exception {
- OnMetafileImageParsed(sender, args);
- }
-
- // Represents the method that handles MetafileImageParsed event.
- public void dynamicInvoke(Object... args) throws Exception {
- OnMetafileImageParsed((Object) args[0], (MetafileImageParsedEventArgs) args[1]);
- }
-
- // Represents the method that handles MetafileImageParsed event to add collection item.
- public void add(MetafileImageParsedEventHandler delegate) throws Exception {
- if (delegate != null)
- delegateList.add(delegate);
- }
-
- // Represents the method that handles MetafileImageParsed event to remove collection
- // item.
- public void remove(MetafileImageParsedEventHandler delegate) throws Exception {
- if (delegate != null)
- delegateList.remove(delegate);
- }
- };
- // Hooks MetafileImageParsed event.
- WordProcessorHelper.MetafileImageParsed.add("OnMetafileImageParsed", metafileImageParsedEvent);
- // Converts Clipboard content to SFDT DOM.
- String sfdtContent = WordProcessorHelper.loadString(param.content, GetFormatType(param.type.toLowerCase()));
- // Unhooks MetafileImageParsed event.
- WordProcessorHelper.MetafileImageParsed.remove("OnMetafileImageParsed", metafileImageParsedEvent);
- return sfdtContent;
- } catch (Exception e) {
- return "";
- }
- }
- return "";
- }
-
- public class CustomParameter {
- public String content;
- public String type;
- public String getContent() {
- return content;
- }
- public String getType() {
- return type;
- }
- public void setContent(String value) {
- content= value;
- }
- public void setType(String value) {
- type = value;
- }
- }
-
- // Converts Metafile to raster image.
- private static void OnMetafileImageParsed(Object sender, MetafileImageParsedEventArgs args) {
- // You can write your own method definition for converting metafile to raster
- // image using any third-party image converter.
- args.setImageStream(ConvertMetafileToRasterImage(args.getMetafileStream())) ;
- }
-```
-
->Note: The web browsers do not support to display metafile images like EMF and WMF. As a fallback approach, you can convert the metafile to raster image using any image converter in the `MetafileImageParsed` event and this fallback raster image will be displayed in the client-side Document editor component.
-
-## Restrict editing
-
-This Web API generates hash from the specified password and salt value which is required for restrict editing functionality of Document Editor component.
-
-The following example code illustrates how to write a Web API for restrict editing.
-
-```java
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/RestrictEditing")
- public String[] restrictEditing(@RequestBody CustomRestrictParameter param) throws Exception {
- if (param.passwordBase64 == "" && param.passwordBase64 == null)
- return null;
- return WordProcessorHelper.computeHash(param.passwordBase64, param.saltBase64, param.spinCount);
- }
-
- public class CustomRestrictParameter {
- public String passwordBase64;
- public String saltBase64;
- public int spinCount;
- public String getPasswordBase64() {
- return passwordBase64;
- }
- public String getSaltBase64() {
- return saltBase64;
- }
- public int getSpinCount() {
- return spinCount;
- }
- public void setPasswordBase64(String value) {
- passwordBase64= value;
- }
- public void setSaltBase64(String value) {
- saltBase64= value;
- }
- public void setSpinCount(int value) {
- spinCount= value;
- }
- }
-```
-
-## Spell Check
-
-Document Editor supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor client-side script requires this Web API to show error words and list suggestions in context menu. This Web API returns the json type of spell-checked word which contains details about error words if any and suggestions.
-
-To know more about configure spell check, please check this [link](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/tree/master/Java#steps-to-configure-spell-checker).
-
-In controller file, you can configure the spell check files like below:
-
-```java
- List spellDictionary;
- String personalDictPath;
-
- public WordEditorController() throws Exception {
-
- String jsonFilePath = "src/main/resources/spellcheck.json";
- String jsonContent = new String(Files.readAllBytes(Paths.get(jsonFilePath)), StandardCharsets.UTF_8);
- JsonArray spellDictionaryItems = new Gson().fromJson(jsonContent, JsonArray.class);
- personalDictPath = "src/main/resources/customDict.dic";
- spellDictionary = new ArrayList();
- for(int i = 0; i < spellDictionaryItems.size(); i++) {
- JsonObject spellCheckerInfo = spellDictionaryItems.get(i).getAsJsonObject();
- DictionaryData dict = new DictionaryData();
-
- if(spellCheckerInfo.has("LanguadeID"))
- dict.setLanguadeID(spellCheckerInfo.get("LanguadeID").getAsInt());
- if(spellCheckerInfo.has("DictionaryPath"))
- dict.setDictionaryPath("src/main/resources/"+spellCheckerInfo.get("DictionaryPath").getAsString());
- if(spellCheckerInfo.has("AffixPath"))
- dict.setAffixPath("src/main/resources/"+spellCheckerInfo.get("AffixPath").getAsString());
- spellDictionary.add(dict);
- }
-
- }
-```
-
-Document editor provides options to spell check word by word and spellcheck page by page when loading the documents.
-
-### Spell check word by word
-
-This Web API performs the spell check word by word and return the json which contains information about error words and suggestions if any. By default, spell check word by word is performed in Document editor when enabling spell check in client-side.
-
-The following example code illustrates how to write a Web API for spell check word by word.
-
-```c#
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/SpellCheck")
- public String spellCheck(@RequestBody SpellCheckJsonData spellChecker) throws Exception {
- try {
- SpellChecker spellCheck = new SpellChecker(spellDictionary,personalDictPath);
- String data = spellCheck.getSuggestions(spellChecker.languageID, spellChecker.texttoCheck, spellChecker.checkSpelling, spellChecker.checkSuggestion, spellChecker.addWord);
- return data;
- } catch (Exception e) {
- e.printStackTrace();
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
- }
-
- public class SpellCheckJsonData {
-
- @JsonProperty("LanguageID")
- int languageID;
- @JsonProperty("TexttoCheck")
- String texttoCheck;
- @JsonProperty("CheckSpelling")
- boolean checkSpelling;
- @JsonProperty("CheckSuggestion")
- boolean checkSuggestion;
- @JsonProperty("AddWord")
- boolean addWord;
-
- }
-```
-
-### Spell check page by page
-
-This Web API performs the spell check page by page and return the json which contains information about error words and suggestions if any. By [enabling optimized spell check](../../document-editor/spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents.
-
-The following example code illustrates how to write a Web API for spell check page by page.
-
-```c#
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/SpellCheckByPage")
- public String spellCheckByPage(@RequestBody SpellCheckJsonData spellChecker) throws Exception {
- try {
- SpellChecker spellCheck = new SpellChecker(spellDictionary,personalDictPath);
- String data = spellCheck.checkSpelling(spellChecker.languageID, spellChecker.texttoCheck);
- return data;
- } catch (Exception e) {
- e.printStackTrace();
- return "{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}";
- }
- }
-
- public class SpellCheckJsonData {
-
- @JsonProperty("LanguageID")
- int languageID;
- @JsonProperty("TexttoCheck")
- String texttoCheck;
- @JsonProperty("CheckSpelling")
- boolean checkSpelling;
- @JsonProperty("CheckSuggestion")
- boolean checkSuggestion;
- @JsonProperty("AddWord")
- boolean addWord;
-
- }
-```
-
-## Save as file formats other than SFDT and DOCX
-
-You can configure this API, if you want to save the document in file format other than DOCX and SFDT using server-side. You can save the document in following ways:
-
-### Save the document in database or file server
-
-This Web API saves the document in the server machine. You can customize this API to save the document into databases or file servers.
-
-The following example code illustrates how to write a Web API for save document in server-side.
-
-```c#
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/Save")
- public void save(@RequestBody SaveParameter data) throws Exception {
- try {
- String name = data.getFileName();
- String format = retrieveFileType(name);
- if (name == null || name.isEmpty()) {
- name = "Document1.docx";
- }
- WordDocument document = WordProcessorHelper.save(data.getContent());
- // Saves the document to server machine file system, you can customize here to save into databases or file servers based on requirement.
- FileOutputStream fileStream = new FileOutputStream(name);
- document.save(fileStream, getWFormatType(format));
- fileStream.close();
- document.close();
- } catch (Exception ex) {
- throw new Exception(ex.getMessage());
- }
- }
-
- public class SaveParameter {
- private String _content;
- private String _fileName;
-
- public String getContent() {
- return _content;
- }
-
- public String setContent(String value) {
- _content = value;
- return value;
- }
-
- public String getFileName() {
- return _fileName;
- }
-
- public String setFileName(String value) {
- _fileName = value;
- return value;
- }
- }
- static com.syncfusion.docio.FormatType getWFormatType(String format) throws Exception {
-
- if (format == null || format.trim().isEmpty())
- throw new Exception("EJ2 WordProcessor does not support this file format.");
- switch (format.toLowerCase()) {
- case ".dotx":
- return com.syncfusion.docio.FormatType.Dotx;
- case ".docm":
- return com.syncfusion.docio.FormatType.Docm;
- case ".dotm":
- return com.syncfusion.docio.FormatType.Dotm;
- case ".docx":
- return com.syncfusion.docio.FormatType.Docx;
- case ".rtf":
- return com.syncfusion.docio.FormatType.Rtf;
- case ".html":
- return com.syncfusion.docio.FormatType.Html;
- case ".txt":
- return com.syncfusion.docio.FormatType.Txt;
- case ".xml":
- return com.syncfusion.docio.FormatType.WordML;
- default:
- throw new Exception("EJ2 WordProcessor does not support this file format.");
- }
- }
-```
-
-### Save as other file formats by passing SFDT string
-
-This Web API converts the SFDT string to required format and returns the document as FileStreamResult to client-side. Using this API, you can save the document in file format other than SFDT and DOCX and download the document in client browser.
-
-The following example code illustrates how to write a Web API for export sfdt.
-
-```c#
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/ExportSFDT")
- public ResponseEntity exportSFDT(@RequestBody SaveParameter data) throws Exception {
- try {
- String name = data.getFileName();
- String format = retrieveFileType(name);
- if (name == null || name.isEmpty()) {
- name = "Document1.docx";
- }
- WordDocument document = WordProcessorHelper.save(data.getContent());
- return saveDocument(document, format);
- } catch (Exception ex) {
- throw new Exception(ex.getMessage());
- }
- }
-
- public class SaveParameter {
-
- private String _content;
- private String _fileName;
-
- public String getContent() {
- return _content;
- }
-
- public String setContent(String value) {
- _content = value;
- return value;
- }
-
- public String getFileName() {
- return _fileName;
- }
-
- public String setFileName(String value) {
- _fileName = value;
- return value;
- }
- }
-
- private ResponseEntity saveDocument(WordDocument document, String format) throws Exception {
- String contentType = "";
- ByteArrayOutputStream outStream = new ByteArrayOutputStream();
- com.syncfusion.docio.FormatType type = getWFormatType(format);
- switch (type.toString()) {
- case "Rtf":
- contentType = "application/rtf";
- break;
- case "WordML":
- contentType = "application/xml";
- break;
- case "Dotx":
- contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.template";
- break;
- case "Html":
- contentType = "application/html";
- break;
- }
- document.save(outStream, type);
- ByteArrayResource resource = new ByteArrayResource(outStream.toByteArray());
- outStream.close();
- document.close();
-
- return ResponseEntity.ok().contentLength(resource.contentLength())
- .contentType(MediaType.parseMediaType(contentType)).body(resource);
- }
-```
-
-### Save as other file formats by passing DOCX file
-
-This Web API converts the DOCX document to required format and returns the document as FileStreamResult to client-side. Using this API, you can save the document in file format other than SFDT and DOCX and download the document in client browser.
-
-The following example code illustrates how to write a Web API for export.
-
-```c#
- @CrossOrigin(origins = "*", allowedHeaders = "*")
- @PostMapping("/api/wordeditor/Export")
- public ResponseEntity export(@RequestParam("data") MultipartFile data, String fileName) throws Exception {
- try {
- String name = fileName;
- String format = retrieveFileType(name);
- if (name == null || name.isEmpty()) {
- name = "Document1";
- }
- WordDocument document = new WordDocument(data.getInputStream(), com.syncfusion.docio.FormatType.Docx);
- return saveDocument(document, format);
- } catch (Exception ex) {
- throw new Exception(ex.getMessage());
- }
- }
-
- private ResponseEntity saveDocument(WordDocument document, String format) throws Exception {
- String contentType = "";
- ByteArrayOutputStream outStream = new ByteArrayOutputStream();
- com.syncfusion.docio.FormatType type = getWFormatType(format);
- switch (type.toString()) {
- case "Rtf":
- contentType = "application/rtf";
- break;
- case "WordML":
- contentType = "application/xml";
- break;
- case "Dotx":
- contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.template";
- break;
- case "Html":
- contentType = "application/html";
- break;
- }
- document.save(outStream, type);
- ByteArrayResource resource = new ByteArrayResource(outStream.toByteArray());
- outStream.close();
- document.close();
-
- return ResponseEntity.ok().contentLength(resource.contentLength())
- .contentType(MediaType.parseMediaType(contentType)).body(resource);
- }
-```
-
->Note: Please refer the [Java Web API example from GitHub](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/Java).
\ No newline at end of file
diff --git a/ej2-javascript/document-editor/web-services/mvc.md b/ej2-javascript/document-editor/web-services/mvc.md
deleted file mode 100644
index 924609b31..000000000
--- a/ej2-javascript/document-editor/web-services/mvc.md
+++ /dev/null
@@ -1,378 +0,0 @@
----
-layout: post
-title: Mvc in ##Platform_Name## Document editor control | Syncfusion
-description: Learn here all about Mvc in Syncfusion ##Platform_Name## Document editor control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Mvc
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Mvc in ##Platform_Name## Document editor control
-
-DocumentEditor depends on server side interaction for below listed operations can be written in ASP.NET MVC using [Syncfusion.EJ2.WordEditor.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc5) or [Syncfusion.EJ2.WordEditor.AspNet.Mvc4](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc4).
-
-* Import Word Document
-* Paste with formatting
-* Restrict Editing
-* Spell Check
-* Save as file formats other than SFDT and DOCX
-
-This section explains how to create the service for DocumentEditor in ASP.NET MVC.
-
-## Importing Word Document
-
-As the Document editor client-side script requires the document in SFDT file format, you can convert the Word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format by using this Web API.
-
-The following example code illustrates how to write a Web API for importing Word documents into Document Editor component.
-
-```c#
- [HttpPost]
- [EnableCors("*", "*", "*")]
- [Route("Import")]
- public HttpResponseMessage Import()
- {
- if (HttpContext.Current.Request.Files.Count == 0)
- return null;
-
- HttpPostedFile file = HttpContext.Current.Request.Files[0];
- int index = file.FileName.LastIndexOf('.');
- string type = index > -1 && index < file.FileName.Length - 1 ?
- file.FileName.Substring(index) : ".docx";
- Stream stream = file.InputStream;
- stream.Position = 0;
-
- EJ2WordDocument document = EJ2WordDocument.Load(stream, GetFormatType(type.ToLower()));
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- return new HttpResponseMessage() { Content = new StringContent(json) };
- }
-```
-
-## Paste with formatting
-
-This Web API converts the system clipboard data (HTML/RTF) to SFDT format which is required to paste content with formatting.
-
-The following example code illustrates how to write a Web API for paste with formatting.
-
-```c#
- [HttpPost]
- [EnableCors("*", "*", "*")]
- [Route("SystemClipboard")]
- public HttpResponseMessage SystemClipboard([FromBody]CustomParameter param)
- {
- if (param.content != null && param.content != "")
- {
- try
- {
- Syncfusion.EJ2.DocumentEditor.WordDocument document = Syncfusion.EJ2.DocumentEditor.WordDocument.LoadString(param.content, GetFormatType(param.type.ToLower()));
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
- document.Dispose();
- return new HttpResponseMessage() { Content = new StringContent(json) };
- }
- catch (Exception)
- {
- return new HttpResponseMessage() { Content = new StringContent("") };
- }
-
- }
- return new HttpResponseMessage() { Content = new StringContent("") };
- }
-
- public class CustomParameter
- {
- public string content { get; set; }
- public string type { get; set; }
- }
-```
-
-## Restrict editing
-
-This Web API generates hash from the specified password and salt value which is required for restrict editing functionality of Document Editor component.
-
-The following example code illustrates how to write a Web API for restrict editing.
-
-```c#
- [HttpPost]
- [EnableCors("*", "*", "*")]
- [Route("RestrictEditing")]
- public string[] RestrictEditing([FromBody]CustomRestrictParameter param)
- {
- if (param.passwordBase64 == "" && param.passwordBase64 == null)
- return null;
- return Syncfusion.EJ2.DocumentEditor.WordDocument.ComputeHash(param.passwordBase64, param.saltBase64, param.spinCount);
- }
-
- public class CustomRestrictParameter
- {
- public string passwordBase64 { get; set; }
- public string saltBase64 { get; set; }
- public int spinCount { get; set; }
- }
-```
-
-## Spell Check
-
-Document Editor supports performing spell checking for any input text. You can perform spell checking for the text in Document Editor and it will provide suggestions for the mis-spelled words through dialog and in context menu. Document editor client-side script requires this Web API to show error words and list suggestions in context menu. This Web API returns the json type of spell-checked word which contains details about error words if any and suggestions.
-
-To know more about configure spell check, please check this [link](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Web-Services/tree/master/ASP.NET%20MVC#steps-to-configure-spell-checker).
-
-In `Global.asax.cs` file, you can configure the spell check files like below:
-
-```c#
- internal static List spellDictCollection;
- internal static string path;
- internal static string personalDictPath;
- protected void Application_Start()
- {
- GlobalConfiguration.Configure(WebApiConfig.Register);
- //check the spell check dictionary path environment variable value and assign default data folder
- //if it is null.
- string path = HostingEnvironment.MapPath("//App_Data//");
- //Set the default spellcheck.json file if the json filename is empty.
- string jsonFileName = HostingEnvironment.MapPath("//App_Data//spellcheck.json");
- if (System.IO.File.Exists(jsonFileName))
- {
- string jsonImport = System.IO.File.ReadAllText(jsonFileName);
- List spellChecks = JsonConvert.DeserializeObject>(jsonImport);
- spellDictCollection = new List();
- //construct the dictionary file path using customer provided path and dictionary name
- foreach (var spellCheck in spellChecks)
- {
- spellDictCollection.Add(new DictionaryData(spellCheck.LanguadeID, Path.Combine(path, spellCheck.DictionaryPath), Path.Combine(path, spellCheck.AffixPath)));
- personalDictPath = Path.Combine(path, spellCheck.PersonalDictPath);
- }
- }
- }
-
-```
-
-Document editor provides options to spell check word by word and spellcheck page by page when loading the documents.
-
-### Spell check word by word
-
-This Web API performs the spell check word by word and return the json which contains information about error words and suggestions if any. By default, spell check word by word is performed in Document editor when enabling spell check in client-side.
-
-The following example code illustrates how to write a Web API for spell check word by word.
-
-```c#
- [HttpPost]
- [EnableCors("*", "*", "*")]
- [Route("SpellCheck")]
- public HttpResponseMessage SpellCheck([FromBody] SpellCheckJsonData spellChecker)
- {
- try
- {
- SpellChecker spellCheck = new SpellChecker(spellDictionary, personalDictPath);
- spellCheck.GetSuggestions(spellChecker.LanguageID, spellChecker.TexttoCheck, spellChecker.CheckSpelling, spellChecker.CheckSuggestion, spellChecker.AddWord);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- return new HttpResponseMessage() { Content = new StringContent(json) };
- }
- catch
- {
- return new HttpResponseMessage() { Content = new StringContent("{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}") };
- }
- }
-
- public class SpellCheckJsonData
- {
- public int LanguageID { get; set; }
- public string TexttoCheck { get; set; }
- public bool CheckSpelling { get; set; }
- public bool CheckSuggestion { get; set; }
- public bool AddWord { get; set; }
- }
-```
-
-### Spell check page by page
-
-This Web API performs the spell check page by page and return the json which contains information about error words and suggestions if any. By [enabling optimized spell check](../../document-editor/spell-check#enableoptimizedspellcheck) in client-side, you can perform spellcheck page by page when loading the documents.
-
-The following example code illustrates how to write a Web API for spell check page by page.
-
-```c#
- [HttpPost]
- [EnableCors("*", "*", "*")]
- [Route("SpellCheckByPage")]
- public HttpResponseMessage SpellCheckByPage([FromBody] SpellCheckJsonData spellChecker)
- {
- try
- {
- SpellChecker spellCheck = new SpellChecker(spellDictionary, personalDictPath);
- spellCheck.CheckSpelling(spellChecker.LanguageID, spellChecker.TexttoCheck);
- string json = Newtonsoft.Json.JsonConvert.SerializeObject(spellCheck);
- return new HttpResponseMessage() { Content = new StringContent(json) };
- }
- catch
- {
- return new HttpResponseMessage() { Content = new StringContent("{\"SpellCollection\":[],\"HasSpellingError\":false,\"Suggestions\":null}") };
- }
- }
-
- public class SpellCheckJsonData
- {
- public int LanguageID { get; set; }
- public string TexttoCheck { get; set; }
- public bool CheckSpelling { get; set; }
- public bool CheckSuggestion { get; set; }
- public bool AddWord { get; set; }
- }
-```
-
-## Save as file formats other than SFDT and DOCX
-
-You can configure this API, if you want to save the document in file format other than DOCX and SFDT using server-side. You can save the document in following ways:
-
-### Save the document in database or file server
-
-This Web API saves the document in the server machine. You can customize this API to save the document into databases or file servers.
-
-The following example code illustrates how to write a Web API for save document in server-side.
-
-```c#
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("Save")]
- public void Save([FromBody] SaveParameter data)
- {
- string name = data.FileName;
- string format = RetrieveFileType(name);
- if (string.IsNullOrEmpty(name))
- {
- name = "Document1.doc";
- }
- WDocument document = WordDocument.Save(data.Content);
- // Saves the document to server machine file system, you can customize here to save into databases or file servers based on requirement.
- FileStream fileStream = new FileStream(name, FileMode.OpenOrCreate, FileAccess.ReadWrite);
- document.Save(fileStream, GetWFormatType(format));
- document.Close();
- fileStream.Close();
- }
-
- public class SaveParameter
- {
- public string Content { get; set; }
- public string FileName { get; set; }
- }
-```
-
-### Save as other file formats by passing SFDT string
-
-This Web API converts the SFDT string to required format and returns the document as FileStreamResult to client-side. Using this API, you can save the document in file format other than SFDT and DOCX and download the document in client browser.
-
-The following example code illustrates how to write a Web API for export sfdt.
-
-```c#
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("ExportSFDT")]
- public FileStreamResult ExportSFDT([FromBody] SaveParameter data)
- {
- string name = data.FileName;
- string format = RetrieveFileType(name);
- if (string.IsNullOrEmpty(name))
- {
- name = "Document1.doc";
- }
- WDocument document = WordDocument.Save(data.Content);
- return SaveDocument(document, format, name);
- }
-
- public class SaveParameter
- {
- public string Content { get; set; }
- public string FileName { get; set; }
- }
-
- private FileStreamResult SaveDocument(WDocument document, string format, string fileName)
- {
- Stream stream = new MemoryStream();
- string contentType = "";
- if (format == ".pdf")
- {
- contentType = "application/pdf";
- }
- else
- {
- WFormatType type = GetWFormatType(format);
- switch (type)
- {
- case WFormatType.Rtf:
- contentType = "application/rtf";
- break;
- case WFormatType.WordML:
- contentType = "application/xml";
- break;
- case WFormatType.Html:
- contentType = "application/html";
- break;
- case WFormatType.Dotx:
- contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.template";
- break;
- case WFormatType.Doc:
- contentType = "application/msword";
- break;
- case WFormatType.Dot:
- contentType = "application/msword";
- break;
- }
- document.Save(stream, type);
- }
- document.Close();
- stream.Position = 0;
- return new FileStreamResult(stream, contentType)
- {
- FileDownloadName = fileName
- };
- }
-```
-
-### Save as other file formats by passing DOCX file
-
-This Web API converts the DOCX document to required format and returns the document as FileStreamResult to client-side. Using this API, you can save the document in file format other than SFDT and DOCX and download the document in client browser.
-
-The following example code illustrates how to write a Web API for export.
-
-```c#
- [HttpPost]
- [EnableCors("AllowAllOrigins")]
- [Route("Export")]
- public FileStreamResult Export(IFormCollection data)
- {
- if (data.Files.Count == 0)
- return null;
- string fileName = this.GetValue(data, "filename");
- string name = fileName;
- string format = RetrieveFileType(name);
- if (string.IsNullOrEmpty(name))
- {
- name = "Document1";
- }
- WDocument document = this.GetDocument(data);
- return SaveDocument(document, format, fileName);
- }
-
- private string RetrieveFileType(string name)
- {
- int index = name.LastIndexOf('.');
- string format = index > -1 && index < name.Length - 1 ?
- name.Substring(index) : ".doc";
- return format;
- }
-
- private string GetValue(IFormCollection data, string key)
- {
- if (data.ContainsKey(key))
- {
- string[] values = data[key];
- if (values.Length > 0)
- {
- return values[0];
- }
- }
- return "";
- }
-```
-
->Note: Please refer the [ASP.NET MVC Web API sample](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices/tree/master/ASP.NET%20MVC).
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/add-annotation-in-text-search-js.md b/ej2-javascript/pdfviewer/how-to/add-annotation-in-text-search-js.md
deleted file mode 100644
index 3bfb92c80..000000000
--- a/ej2-javascript/pdfviewer/how-to/add-annotation-in-text-search-js.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-layout: post
-title: Add Annotation in Text Search in JavaScript PdfViewer | Syncfusion
-description: Learn how to add rectangle annotations using search text bounds in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add Rectangle Annotations Using Search Text Bounds in PDF Viewer
-
-## Overview
-
-This guide demonstrates how to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. This technique is useful for emphasizing search results with visual markers in annotation-supported applications.
-
-## Steps to Add Rectangle Annotations on Search Result Highlight
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Initialize the PDF Viewer with Required Modules
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib'
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-```
-
-**Step 3:** Implement code blocks to automatically add Rectangle Annotation on Search Result Highlight
-
-Define a callback function for the `textSearchHighlight` event to add rectangle annotations
-
-```js
-// Highlight event handler for text search, which adds a rectangle annotation where the text is found
-pdfviewer.textSearchHighlight = function(args){
- console.log(args);
- var pageNumber = args.pageNumber;
- var bounds = args.bounds;
- pdfviewer.annotation.addAnnotation("Rectangle", {
- offset: {x: bounds.left, y: bounds.top},
- pageNumber: pageNumber,
- width: bounds.width,
- height: bounds.height,
- });
-}
-```
-
-**Step 3:** Add Search Controls
-
-Ensure you have the appropriate HTML buttons for text search operations
-
-```html
-
-
-
-```
-
-Use the following JavaScript to handle search controls:
-
-```js
-// Event listener for initiating a search
-document.getElementById("searchText").addEventListener("click", function() {
- pdfviewer.textSearchModule.searchText('PDF', false);
-});
-
-// Event listener for navigating to the next search result
-document.getElementById("searchNext").addEventListener("click", function() {
- pdfviewer.textSearchModule.searchNext();
-});
-
-// Event listener for canceling the current search
-document.getElementById("searchCancel").addEventListener("click", function() {
- pdfviewer.textSearchModule.cancelTextSearch();
-});
-```
-
-By following this guide, you will enable the PDF Viewer to add rectangle annotations at search result locations, thus increasing the visibility of search results in your application.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/)
diff --git a/ej2-javascript/pdfviewer/how-to/add-annotation-in-text-search-ts.md b/ej2-javascript/pdfviewer/how-to/add-annotation-in-text-search-ts.md
deleted file mode 100644
index 52e43a5c1..000000000
--- a/ej2-javascript/pdfviewer/how-to/add-annotation-in-text-search-ts.md
+++ /dev/null
@@ -1,99 +0,0 @@
----
-layout: post
-title: Add Annotation in Text Search in TypeScript PdfViewer | Syncfusion
-description: Learn how to add rectangle annotations using search text bounds in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add Rectangle Annotations Using Search Text Bounds in PDF Viewer
-
-## Overview
-
-This guide demonstrates how to add rectangle annotations based on the bounds of highlighted search text in the PDF Viewer. This technique is useful for emphasizing search results with visual markers in annotation-supported applications.
-
-## Steps to Add Rectangle Annotations on Search Result Highlight
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Initialize the PDF Viewer with Required Modules
-
-```ts
-import { pdf } from '@syncfusion/ej2';
-import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, TextSearchHighlightEventArgs, RectangleBounds, RectangleBoundsModel, RectangleSettings } from '@syncfusion/ej2-pdfviewer';
-
-// Inject required modules
-PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
-
-const pdfviewer: PdfViewer = new PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib'
-});
-
-pdfviewer.appendTo('#PdfViewer');
-```
-
-**Step 3:** Implement code blocks to automatically add Rectangle Annotation on Search Result Highlight
-
-Define a callback function for the `textSearchHighlight` event to add rectangle annotations
-
-```ts
-// Highlight event handler for text search, which adds a rectangle annotation where the text is found
-pdfviewer.textSearchHighlight = function(args: TextSearchHighlightEventArgs): void {
- console.log(args);
- const pageNumber: number = args.pageNumber;
- const bounds: RectangleBoundsModel = args.bounds;
- pdfviewer.annotation.addAnnotation('Rectangle', {
- offset: { x: bounds.left, y: bounds.top },
- pageNumber: pageNumber,
- width: bounds.width,
- height: bounds.height,
- } as RectangleSettings);
-};
-
-```
-
-**Step 3:** Add Search Controls
-
-Ensure you have the appropriate HTML buttons for text search operations
-
-```html
-
-
-
-```
-
-Use the following Typescript code snippet to handle search controls:
-
-```ts
-// Add event listener to "searchText" button to trigger a search for the term 'PDF'
-const searchTextButton = document.getElementById('searchText');
-if (searchTextButton) {
- searchTextButton.addEventListener('click', function() {
- pdfviewer.textSearchModule.searchText('PDF', false);
- });
-}
-
-// Add event listener to "searchNext" button to navigate to the next search result
-const searchNextButton = document.getElementById('searchNext');
-if (searchNextButton) {
- searchNextButton.addEventListener('click', function() {
- pdfviewer.textSearch.searchNext();
- });
-}
-
-// Add event listener to "searchCancel" button to cancel the current text search operation
-const searchCancelButton = document.getElementById('searchCancel');
-if (searchCancelButton) {
- searchCancelButton.addEventListener('click', function() {
- pdfviewer.textSearch.cancelTextSearch();
- });
-}
-```
-
-By following this guide, you will enable the PDF Viewer to add rectangle annotations at search result locations, thus increasing the visibility of search results in your application.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
diff --git a/ej2-javascript/pdfviewer/how-to/add-header-value.md b/ej2-javascript/pdfviewer/how-to/add-header-value.md
deleted file mode 100644
index e02bbd605..000000000
--- a/ej2-javascript/pdfviewer/how-to/add-header-value.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-layout: post
-title: Add header value in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Add header value in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Add header value
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add header value in ##Platform_Name## Pdfviewer control
-
-To add header values to an AJAX request made by a Syncfusion PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request.
-
-Here is an example of how you can use the **ajaxRequestSettings** property to add a custom header to an AJAX request made by the PDF Viewer:
-
-```ts
-
-viewer.ajaxRequestSettings = {
- ajaxHeaders: [
- {
- headerName: "Authorization",
-
- headerValue: "Bearer 64565dfgfdsjweiuvbiuyhiueygf"
- }
- ],
-
- withCredentials: false
-};
-
-```
-
-Find the sample [how to add custom headers in AjaxRequestSettings](https://stackblitz.com/edit/typescript-nv1way?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/add-header-values.md b/ej2-javascript/pdfviewer/how-to/add-header-values.md
deleted file mode 100644
index b3eb2b048..000000000
--- a/ej2-javascript/pdfviewer/how-to/add-header-values.md
+++ /dev/null
@@ -1,34 +0,0 @@
----
-layout: post
-title: Add header values in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Add header values in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Add header values
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add header values in ##Platform_Name## Pdfviewer control
-
-To add header values to an AJAX request made by a Syncfusion PDF Viewer, you can use the **ajaxHeaders** property available in the [**ajaxRequestSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#ajaxrequestsettings) module of the PDF Viewer. This property allows you to specify custom headers for the AJAX request.
-
-Here is an example of how you can use the **ajaxRequestSettings** property to add a custom header to an AJAX request made by the PDF Viewer:
-
-```javascript
-
-viewer.ajaxRequestSettings = {
- ajaxHeaders: [
- {
- headerName: "Authorization",
-
- headerValue: "Bearer 64565dfgfdsjweiuvbiuyhiueygf"
- }
- ],
-
- withCredentials: false
-};
-
-```
-
-Find the sample [how to add custom headers in AjaxRequestSettings](https://stackblitz.com/edit/o4ywqi-zdmxuo?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/add-new-page-to-the-pdf-document.md b/ej2-javascript/pdfviewer/how-to/add-new-page-to-the-pdf-document.md
deleted file mode 100644
index 8634a1cba..000000000
--- a/ej2-javascript/pdfviewer/how-to/add-new-page-to-the-pdf-document.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: post
-title: Add new page to the pdf document in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Add new page to the pdf document in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Add new page to the pdf document
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add new page to the pdf document in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to add a new page to the PDF document using the PDF library.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service/) to create the PDF Viewer web service.
-
-**Step 3:** Add the following code sample in the PDF Viewer controller code to add a new page in the PDF document using the PDF library.
-
-```javascript
-
-[HttpPost("Load")]
-[Route("[controller]/Load")]
-//Post action for loading PDF documents.
-public IActionResult Load([FromBody] Dictionary jsonObject)
-{
- Console.WriteLine("Load called");
- //Initialize the PDF viewer object with the memory cache object.
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string documentPath = GetDocumentPath(jsonObject["document"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- stream = new MemoryStream(bytes);
- }
- else
- {
- return this.Content(jsonObject["document"] + " is not found");
- }
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
-
- //Code to create a new page at the end of the loaded pdf document.
- PdfLoadedDocument pdfLoadedDocument = new PdfLoadedDocument(stream);
- pdfLoadedDocument.Pages.Add();
- MemoryStream str = new MemoryStream();
- pdfLoadedDocument.Save(str);
- pdfLoadedDocument.Close(true);
- jsonResult = pdfviewer.Load(str, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20new%20page%20to%20the%20PDF%20document%20using%20PDF%20library)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/add-save-button-js.md b/ej2-javascript/pdfviewer/how-to/add-save-button-js.md
deleted file mode 100644
index 29d2e7942..000000000
--- a/ej2-javascript/pdfviewer/how-to/add-save-button-js.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-layout: post
-title: Add Save button in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about How to add save button in Toolbar in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Toolbar
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add Save button in Built-In Toolbar
-
-PDF Viewer allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.
-
-* Save button - `Save` button-item can defined by [**CustomToolbarItemModel**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/customToolbarItem/) and with existing items in [**ToolbarSettings**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) property. Newly added save button-item click action can be defined in [`toolbarclick`](https://ej2.syncfusion.com/javascript/documentation/api/toolbar/clickEventArgs/).
-
-* Show, Hide - `Save` button-item can be shown or hidden using the [`ToolbarSettings`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbarItem/).
-
-* Enable, Disable - `Save` button-item can be enabled or disable using [`enabletoolbaritem`](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/toolbar/#enabletoolbaritem)
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
- var toolItem1 = {
- prefixIcon: 'e-icons e-save',
- id: 'download',
- text: 'Save',
- tooltipText: 'Save button',
- align: 'Left'
-};
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib',
- toolbarSettings : { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] }
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-//PDF Viewer control rendering starts
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.toolbarClick = function (args) {
- if (args.item && args.item.id === 'download') {
- pdfviewer.download();
- }
-};
-function OnCreateSearch() {
- this.addIcon('prepend', 'e-icons e-search');
-}
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var toolItem1 = {
- prefixIcon: 'e-icons e-save',
- id: 'download',
- text: 'Save',
- tooltipText: 'Save button',
- align: 'Left'
-};
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- toolbarSettings : { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] }
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-//PDF Viewer control rendering starts
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.toolbarClick = function (args) {
- if (args.item && args.item.id === 'download') {
- pdfviewer.download();
- }
-};
-function OnCreateSearch() {
- this.addIcon('prepend', 'e-icons e-search');
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-
-N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
-
-### Align Property
-
-The align property is used to specify the alignment of a `save` button-item within the toolbar.
-
-`Left`: Aligns the item to the left side of the toolbar.
-`Right`: Aligns the item to the right side of the toolbar.
-
-### Tooltip Property
-
-The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item.
-
-### CssClass Property
-
-The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item.
-
-### Prefix Property
-
-The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the `save` button-item.
-
-### ID Property
-
-The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions.
-
-When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
-These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item.
-
-N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20Save%20Button%20In%20Toolbar)
diff --git a/ej2-javascript/pdfviewer/how-to/add-save-button-ts.md b/ej2-javascript/pdfviewer/how-to/add-save-button-ts.md
deleted file mode 100644
index 046247497..000000000
--- a/ej2-javascript/pdfviewer/how-to/add-save-button-ts.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-layout: post
-title: Add Save button in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about How to add save button in Toolbar in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Toolbar
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Add Save button in Built-In Toolbar
-
-PDF Viewer allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.
-
-* Save button - `Save` button-item can defined by [**CustomToolbarItemModel**](https://helpej2.syncfusion.com/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [**ToolbarSettings**](https://helpej2.syncfusion.com/documentation/api/file-manager/toolbarSettings/) property. Newly added save button-item click action can be defined in [`toolbarclick`](https://helpej2.syncfusion.com/documentation/api/file-manager/toolbarClickEventArgs/).
-
-* Show, Hide - `Save` button-item can be shown or hidden using the [`ToolbarSettings`](https://helpej2.syncfusion.com/documentation/api/file-manager/toolbarSettings/) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://helpej2.syncfusion.com/documentation/api/chart/toolbarItems/).
-
-* Enable, Disable - `Save` button-item can be enabled or disable using [`enabletoolbaritem`](https://helpej2.syncfusion.com/documentation/api/document-editor-container/toolbar/).
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print);
-let toolItem1: CustomToolbarItemModel = {
- prefixIcon: 'e-icons e-save',
- id: 'download',
- text: 'Save',
- tooltipText: 'Save Button',
- align: 'Left'
-};
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
-pdfviewer.toolbarSettings = { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
-pdfviewer.appendTo('#PdfViewer');
-//To handle custom toolbar click event.
-pdfviewer.toolbarClick = function (args) {
- if (args.item && args.item.id === 'download') {
- pdfviewer.download();
- }
-};
-function OnCreateSearch(this: any): any {
- this.addIcon('prepend', 'e-icons e-search');
-}
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print,CustomToolbarItemModel} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,Print);
-let toolItem1: CustomToolbarItemModel = {
- prefixIcon: 'e-icons e-save',
- id: 'download',
- text: 'Save',
- tooltipText: 'Save Button',
- align: 'Left'
-};
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';
-pdfviewer.toolbarSettings = { toolbarItems: ['OpenOption', toolItem1, 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
-pdfviewer.appendTo('#PdfViewer');
-//To handle custom toolbar click event.
-pdfviewer.toolbarClick = function (args) {
- if (args.item && args.item.id === 'download') {
- pdfviewer.download();
- }
-};
-function OnCreateSearch(this: any): any {
- this.addIcon('prepend', 'e-icons e-search');
-}
-{% endhighlight %}
-{% endtabs %}
-
-N> Default value of toolbar items is ['OpenOption', 'PageNavigationTool','MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', 'DownloadOption','UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']
-
-### Align Property
-
-The align property is used to specify the alignment of a `save` button-item within the toolbar.
-
-`Left`: Aligns the item to the left side of the toolbar.
-`Right`: Aligns the item to the right side of the toolbar.
-
-### Tooltip Property
-
-The tooltip property is used to set the tooltip text for a `save` button-item. Tooltip provides additional information when a user hovers over the item.
-
-### CssClass Property
-
-The cssClass property is used to apply custom CSS classes to a `save` button-item. It allows custom styling of the `save` button-item.
-
-### Prefix Property
-
-The prefix property is used to set the CSS class or icon that should be added as a prefix to the existing content of the `save` button-item.
-
-### ID Property
-
-The id property within a CustomToolbarItemModel is a compulsory attribute that plays a vital role in toolbar customization. It serves as a unique identifier for each toolbar item, facilitating distinct references and interactions.
-
-When defining or customizing toolbar items, it is mandatory to assign a specific and descriptive id to each item.
-These properties are commonly used when defining custom toolbar items with the `CustomToolbarItemModel`` in the context of Syncfusion PDF Viewer. When configuring the toolbar using the `ToolbarSettings`` property, you can include these properties to customize the appearance and behavior of each toolbar item.
-
-N> When customizing `save` button-item, you have the flexibility to include either icons or text based on your design preference.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Add%20Save%20Button%20In%20Toolbar)
diff --git a/ej2-javascript/pdfviewer/how-to/annotation-selector.md b/ej2-javascript/pdfviewer/how-to/annotation-selector.md
deleted file mode 100644
index 7ede498c1..000000000
--- a/ej2-javascript/pdfviewer/how-to/annotation-selector.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Annotation selector in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Annotation selector in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Annotation selector
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Annotation selector in ##Platform_Name## Pdfviewer control
-
-To customize the annotation selector in Syncfusion PDF Viewer, you can use the [**annotationSelectorSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control.
-
-Here is an example of how you can customize the selector of the shape annotation:
-
-```
-
-
-
-```
-
-```javascript
-
-document.getElementById('annotationSelector').addEventListener('click', () => {
- viewer.rectangleSettings.annotationSelectorSettings.resizerShape = 'Circle';
- viewer.annotationModule.editAnnotation(viewer.annotationCollection[0]);
-});
-
-```
-
-Find the sample [how to customize the annotation selector](https://stackblitz.com/edit/js-5p3ae6?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/annotation-selectors.md b/ej2-javascript/pdfviewer/how-to/annotation-selectors.md
deleted file mode 100644
index ef01093fe..000000000
--- a/ej2-javascript/pdfviewer/how-to/annotation-selectors.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Annotation selectors in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Annotation selectors in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Annotation selectors
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Annotation selectors in ##Platform_Name## Pdfviewer control
-
-To customize the annotation selector in Syncfusion PDF Viewer, you can use the [**annotationSelectorSettings**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselectorsettings) property of the PdfViewer control.
-
-Here is an example of how you can customize the selector of the shape annotation:
-
-```
-
-
-
-```
-
-```ts
-
-document.getElementById('annotationSelector').addEventListener('click', () => {
- viewer.rectangleSettings.annotationSelectorSettings.resizerShape = 'Circle';
- viewer.annotationModule.editAnnotation(viewer.annotationCollection[0]);
-});
-
-```
-
-Find the sample [how to customize the annotation selector](https://stackblitz.com/edit/typescript-u7xjdv?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/change-author-name-using-annotation-settings.md b/ej2-javascript/pdfviewer/how-to/change-author-name-using-annotation-settings.md
deleted file mode 100644
index 0da9e0a94..000000000
--- a/ej2-javascript/pdfviewer/how-to/change-author-name-using-annotation-settings.md
+++ /dev/null
@@ -1,59 +0,0 @@
----
-layout: post
-title: Change author name using annotation settings in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Change author name using annotation settings in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Change author name using annotation settings
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Change author name using annotation settings in ##Platform_Name## Pdfviewer control
-
-The Essential JavaScript PDF Viewer supports to customize a single property of the annotation settings by exposing an API for the properties common to all the annotations.
-
-**API Name** : annotationSettings
-
-|Property Name|Data type & Default Value|Description|
-|---|---|---|
-|author|String(“Guest”)|specifies the author of the annotation.|
-|minWidth|Number(0)|specifies the minWidth of the annotation.|
-|maxWidth|Number(0)|specifies the maxWidth of the annotation.|
-|minHeight|Number(0)|specifies the minHeight of the annotation.|
-|maxHeight|Number(0)|specifies the maxHeight of the annotation.|
-|isLock|Boolean(false)|specifies the locked action of the annotations. [If set true unable to select the annotations]|
-|isPrint|Boolean(true)|specifies whether the annotations are included or not in Print actions.|
-|isDownload|Boolean(true|specifies whether the annotations are included or not in Download actions.|
-|Free Text Settings|
-|allowOnlyTextInput|Boolean(false)|specifies the allow only text action of the free text annotation. [If set true unable to move or resize the annotations]|
-
-You can change the author name and the other properties using the annotationSettings API as in the following code sample.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields } from "../src/index";
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields);
-let viewer: PdfViewer = new PdfViewer();
-viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
-viewer.annotationSettings = { author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true };
-viewer.freeTextSettings = { allowTextOnly : true };
-viewer.appendTo("#pdfViewer");
-```
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields } from "../src/index";
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, Print, Annotation, FormFields);
-let viewer: PdfViewer = new PdfViewer();
-viewer.serviceUrl = "https://services.syncfusion.com/js/production/api/pdfviewer";
-viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
-viewer.annotationSettings = { author: 'syncfusion', minHeight: 30, maxHeight: 500, minWidth: 30, maxWidth: 500, isLock: false, isPrint: true, isDownload: true };
-viewer.freeTextSettings = { allowTextOnly : true };
-viewer.appendTo("#pdfViewer");
-```
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/change-rectangle-annotations-border-color.md b/ej2-javascript/pdfviewer/how-to/change-rectangle-annotations-border-color.md
deleted file mode 100644
index 9ab064aeb..000000000
--- a/ej2-javascript/pdfviewer/how-to/change-rectangle-annotations-border-color.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: post
-title: Change rectangle annotations border color in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Change rectangle annotations border color in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Change rectangle annotations border color
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Change rectangle annotations border color in ##Platform_Name## Pdfviewer control
-
-The Essential JavaScript PDF Viewer supports customizing the rectangle annotation's property by using the [rectangleSettings](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#rectanglesettings) API.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to change the rectangle annotation's border color using the [rectangleSettings](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#rectanglesettings) API.
-
-```
-
-
-
-
-```
-
-```ts
-
-//Event triggers while clicking the Change Color(Blue) button.
-document.getElementById("changeColor").addEventListener('click', function () {
- //API to change the rectangle annotation's stroke color.
- viewer.rectangleSettings.strokeColor = "blue";
-});
-
-//Event triggers while clicking the Add Rectangle Annotation button.
-document.getElementById("addRectangleAnnotation").addEventListener('click', function () {
- //API to set the rectangle annotation mode.
- viewer.annotation.setAnnotationMode('Rectangle');
-});
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Annotations/How%20to%20change%20the%20rectangle%20annotation's%20border%20color)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/clear-annotation.md b/ej2-javascript/pdfviewer/how-to/clear-annotation.md
deleted file mode 100644
index b0acdc1d3..000000000
--- a/ej2-javascript/pdfviewer/how-to/clear-annotation.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: Clear annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Clear annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Clear annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Clear annotation in ##Platform_Name## Pdfviewer control
-
-To clear all the annotations in a PDF document using the Syncfusion PDF Viewer, you can use the [**deleteAnnotations**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method. This method is used to clear all the annotations present in the currently loaded document.
-
-Here is an example of how you can clear all the annotations present in the currently loaded document:
-
-```
-
-
-
-```
-
-```javascript
-
-//clear Annotations.
-document.getElementById('deleteAnnotations').addEventListener('click',()=> {
- viewer.deleteAnnotations();
-})
-
-```
-
-We can also delete specific annotations with the **deleteAnnotationById()** method. This method is used to delete a specific annotation using its id.
-
-Here is an example of how you can delete specific annotations with the **deleteAnnotationById** method:
-
-```
-
-
-
-```
-
-```javascript
-
-//Delete Annotation by ID.
-document.getElementById('deleteAnnotationbyId').addEventListener('click', () => {
- viewer.annotationModule.deleteAnnotationById(
- viewer.annotationCollection[0].annotationId
- );
-});
-
-```
-
-Find the sample [how to clear annotations using deleteAnnotations](https://stackblitz.com/edit/js-mctbeq?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/clear-annotations.md b/ej2-javascript/pdfviewer/how-to/clear-annotations.md
deleted file mode 100644
index 48c0d5351..000000000
--- a/ej2-javascript/pdfviewer/how-to/clear-annotations.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-layout: post
-title: Clear annotations in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Clear annotations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Clear annotations
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Clear annotations in ##Platform_Name## Pdfviewer control
-
-To clear all the annotations in a PDF document using the Syncfusion PDF Viewer, you can use the [**deleteAnnotations**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#deleteannotations) method. This method is used to clear all the annotations present in the currently loaded document.
-
-Here is an example of how you can clear all the annotations present in the currently loaded document:
-
-```
-
-
-
-```
-
-```ts
-
-//clear Annotations.
-document.getElementById('deleteAnnotations').addEventListener('click',()=> {
- viewer.deleteAnnotations();
-})
-
-```
-
-We can also delete specific annotations with the **deleteAnnotationById()** method. This method is used to delete a specific annotation using its id.
-
-Here is an example of how you can delete specific annotations with the **deleteAnnotationById** method:
-
-```
-
-
-
-```
-
-```ts
-
-//Delete Annotation by ID.
-document.getElementById('deleteAnnotationbyId').addEventListener('click', () => {
- viewer.annotationModule.deleteAnnotationById(
- viewer.annotationCollection[0].annotationId
- );
-});
-
-```
-
-Find the sample [how to clear annotations using deleteAnnotations](https://stackblitz.com/edit/typescript-86gwqu?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/configure-annotationselector-setting-js.md b/ej2-javascript/pdfviewer/how-to/configure-annotationselector-setting-js.md
deleted file mode 100644
index b65c2c48a..000000000
--- a/ej2-javascript/pdfviewer/how-to/configure-annotationselector-setting-js.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: post
-title: Annotation Selector Setting in Javascript Pdfviewer|Syncfusion.
-description: Learn here all about Annotation Selector Settings in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-
-# How to Configure Annotation Selector Settings
-
-### Annotation Selector Settings
-
-The [**annotationSelectorSettings**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationSelectorSettings/) property allows you to customize the appearance and behavior of the annotation selector in the UI.
-
-### AnnotationSelectorSettingsModel
-
-The [**AnnotationSelectorSettingsModel**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotationSelectorSettingsModel/) defines the settings for the annotation selector, including border colors, sizes, and shapes. It provides fine-grained control over how annotations are displayed and interacted with.
-
-### How to Configure Annotation Selector Settings
-
-**Step 1:** Create a PdfViewer Instance: Initialize your PdfViewer instance.
-
-**Step 2:** Set the annotationSelectorSettings Property: Define your settings to customize the annotation selector.
-
-```js
- let viewer: PdfViewer = new PdfViewer();
- viewer.annotationSelectorSettings = {
- selectionBorderColor: '',
- resizerBorderColor: 'Circle',
- resizerFillColor: '#4070FF',
- resizerSize: 8,
- selectionBorderThickness: 1,
- resizerShape: 'Square',
- selectorLineDashArray: [],
- resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
- resizerCursorType: null
- };
- viewer.appendTo("#pdfViewer");
-```
-
-**Step 3:** Append the Viewer to Your HTML Element: Use the appendTo method to render the PDF viewer in your desired HTML element.
-
-#### Key properties include:
-
-* **selectionBorderColor:** Sets the color for the border around selected annotations.
-
-* **resizerBorderColor:** Sets the color for the border of the resizer handles.
-
-* **resizerFillColor:** Defines the fill color for the resizer handles.
-
-* **resizerSize:** Determines the size of the resizer handles.
-
-* **selectionBorderThickness:** Specifies how thick the selection border should be.
-
-* **resizerShape:** Allows you to choose the shape of the resizer handles (e.g., Circle or Square).
-
-* **selectorLineDashArray:** Specifies the dash pattern for the selector line to enhance visual cues.
-
-* **resizerLocation:** Determines where the resizer appear in relation to the annotation (e.g., Corners or Edges).
-
-* **resizerCursorType:** Sets the cursor style when hovering over the resizer, improving user interaction.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/configure-annotationselector-setting-ts.md b/ej2-javascript/pdfviewer/how-to/configure-annotationselector-setting-ts.md
deleted file mode 100644
index a45e3e6de..000000000
--- a/ej2-javascript/pdfviewer/how-to/configure-annotationselector-setting-ts.md
+++ /dev/null
@@ -1,67 +0,0 @@
----
-layout: post
-title: Annotation Selector Setting in Typescript Pdfviewer|Syncfusion.
-description: Learn here all about Annotation Selector Settings in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-
-# How to Configure Annotation Selector Settings
-
-### Annotation Selector Settings
-
-The [**annotationSelectorSettings**](https://ej2.syncfusion.com/documentation/api/pdfviewer/annotationSelectorSettings/) property allows you to customize the appearance and behavior of the annotation selector in the UI.
-
-### AnnotationSelectorSettingsModel
-
-The [**AnnotationSelectorSettingsModel**](https://ej2.syncfusion.com/documentation/api/accumulation-chart/accumulationAnnotationSettingsModel/) defines the settings for the annotation selector, including border colors, sizes, and shapes. It provides fine-grained control over how annotations are displayed and interacted with.
-
-### How to Configure Annotation Selector Settings
-
-**Step 1:** Create a PdfViewer Instance: Initialize your PdfViewer instance.
-
-**Step 2:** Set the annotationSelectorSettings Property: Define your settings to customize the annotation selector.
-
-```ts
- let viewer: PdfViewer = new PdfViewer();
- viewer.annotationSelectorSettings = {
- selectionBorderColor: '',
- resizerBorderColor: 'Circle',
- resizerFillColor: '#4070FF',
- resizerSize: 8,
- selectionBorderThickness: 1,
- resizerShape: 'Square',
- selectorLineDashArray: [],
- resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
- resizerCursorType: null
- };
- viewer.appendTo("#pdfViewer");
-```
-
-**Step 3:** Append the Viewer to Your HTML Element: Use the appendTo method to render the PDF viewer in your desired HTML element.
-
-#### Key properties include:
-
-* **selectionBorderColor:** Sets the color for the border around selected annotations.
-
-* **resizerBorderColor:** Sets the color for the border of the resizer handles.
-
-* **resizerFillColor:** Defines the fill color for the resizer handles.
-
-* **resizerSize:** Determines the size of the resizer handles.
-
-* **selectionBorderThickness:** Specifies how thick the selection border should be.
-
-* **resizerShape:** Allows you to choose the shape of the resizer handles (e.g., Circle or Square).
-
-* **selectorLineDashArray:** Specifies the dash pattern for the selector line to enhance visual cues.
-
-* **resizerLocation:** Determines where the resizer appear in relation to the annotation (e.g., Corners or Edges).
-
-* **resizerCursorType:** Sets the cursor style when hovering over the resizer, improving user interaction.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/conformance.md b/ej2-javascript/pdfviewer/how-to/conformance.md
deleted file mode 100644
index fdf2fabf9..000000000
--- a/ej2-javascript/pdfviewer/how-to/conformance.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: post
-title: Know the supported conformance PDF documents | Syncfusion
-description: Learn here all about the supported conformance PDF documents in Syncfusion Javascript PDF Viewer component of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Conformance
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Know the supported conformance PDF documents in Javascript PDF Viewer component
-
-The PDF Viewer supports the below conformance documents:
-
-* **PDF/A-1a conformance**
-* **PDF/A-1b conformance**
-* **PDF/X-1a conformance**
-* **PDF/A-2a conformance**
-* **PDF/A-2b conformance**
-* **PDF/A-2u conformance**
-* **PDF/A-3a conformance**
-* **PDF/A-3b conformance**
-* **PDF/A-3u conformance**
-* **PDF/A-4 conformance**
-* **PDF/A-4e conformance**
-* **PDF/A-4f conformance**
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-js.md b/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-js.md
deleted file mode 100644
index 64b412562..000000000
--- a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-js.md
+++ /dev/null
@@ -1,123 +0,0 @@
----
-layout: post
-title: Control Annotations Visibility in JavaScript PdfViewer | Syncfusion
-description: Learn how to Control Annotations Visibility in the Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Control PDF Annotations Visibility in PDF Viewer
-
-### Overview
-
-This guide demonstrates how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer in JavaScript. This process allows the annotations to be visible only in specific viewers, such as the Syncfusion PDF Viewer.
-
-### How to control Annotation Visibility
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Add Buttons for Annotation Modification and Downloading
-
-Include buttons in your HTML for annotation modification and downloading the PDF.
-
-```html
-
-
-```
-**Step 3**: Add the following code snippet to add annotations to the PDF document. You can also include other annotations as needed.
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/annotations-v1.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib",
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
- pdfviewer.appendTo('#PdfViewer');
- pdfviewer.documentLoad= function(){
- //Code snippet to add basic annotations. You can also include other annotations as needed.
- pdfviewer.annotation.addAnnotation("Highlight", {
- bounds: [{x: 97, y: 610, width: 350, height: 14}],
- pageNumber: 1
- });
- pdfviewer.annotation.addAnnotation("Underline", {
- bounds: [{x: 97, y: 723, width: 353.5, height: 14}],
- pageNumber: 1
- });
- pdfviewer.annotation.addAnnotation("Strikethrough", {
- bounds: [{x: 97, y: 836, width: 376.5, height: 14}],
- pageNumber: 1
- });
- };
-```
-**Step 4:** Add Event Listeners for Button Clicks
-
-Attach event listeners that handle annotation visibility modifications and downloading the document.
-
-```js
- // Add event listener to the button with ID 'download'
- document.getElementById('save').addEventListener('click', save);
-```
-
-**Step 5:** Modify Annotation Flags Function
-
-Implement a function that changes the annotation visibility settings for the document.
-
-```js
-
- // Function to get Base64 of the loaded document and modify annotation flags
- function save() {
- // Assuming pdfviewer is globally accessible or a part of another object
- pdfviewer.saveAsBlob().then(blob => {
- const reader = new FileReader();
-
- reader.onload = function() {
- let base64data = reader.result;
-
- // Extract base64 string from Data URL
- const base64EncodedData = base64data.split('base64,')[1];
-
- // Create a PdfDocument instance with base64 data
- const document1 = new ej.pdf.PdfDocument(base64EncodedData);
-
- // Modify flag for each annotation
- for (let i = 0; i < document1.pageCount; i++) {
- const page = document1.getPage(i);
-
- for (let j = 0; j < page.annotations.count; j++) {
- const annot = page.annotations.at(j);
-
- // Set flag to noView
- annot.flags |= ej.pdf.PdfAnnotationFlag.noView;
- }
- }
-
- // Save modified document as a blob
- document1.saveAsBlob().then(modifiedBlob => {
- const internalReader = new FileReader();
-
- internalReader.onload = function() {
- const modifiedBase64 = internalReader.result;
-
- // Create a link to download the modified PDF
- const downloadLink = document.createElement('a');
- downloadLink.href = modifiedBase64;
- downloadLink.download = 'modified.pdf';
- downloadLink.click();
- };
-
- internalReader.readAsDataURL(modifiedBlob.blobData);
- });
- };
-
- reader.readAsDataURL(blob);
- });
-}
-```
-
-By following these steps, the annotations in a PDF document can be set to be visible in the Syncfusion PDF Viewer, providing control over annotation visibility based on different platforms.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-ts.md b/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-ts.md
deleted file mode 100644
index c73c78655..000000000
--- a/ej2-javascript/pdfviewer/how-to/control-annotation-visibility-ts.md
+++ /dev/null
@@ -1,122 +0,0 @@
----
-layout: post
-title: Control Annotations Visibility in TypeScript PdfViewer | Syncfusion
-description: Learn how to control Annotations Visibility in the Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Control PDF Annotations Visibility in PDF Viewer
-
-### Overview
-
-This guide demonstrates how to control the visibility of PDF annotations in documents loaded and saved using the Syncfusion PDF Viewer in TypeScript. This process allows the annotations to be visible only in the Syncfusion PDF Viewer.
-
-### How to Control Annotation Visibility
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Add Buttons for Annotation Modification and Downloading
-
-Include buttons in your HTML for annotation modification and downloading the PDF.
-
-```html
-
-
-```
-**step 3**: Add the following code snippet to add annotations to the PDF document. You can also include other annotations as needed.
-
-```js
-const viewer: PdfViewer = new PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/annotations-v1.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib",
-});
-
-// Append the PdfViewer to the DOM
-viewer.appendTo('#PdfViewer');
-
-viewer.documentLoad = function (args) {
- //Code snippet to add basic annotations. You can also include other annotations as needed.
- viewer.annotation.addAnnotation("Highlight", {
- bounds: [{x: 97, y: 610, width: 350, height: 14}],
- pageNumber: 1
- } as HighlightSettings);
- viewer.annotation.addAnnotation("Underline", {
- bounds: [{x: 97, y: 723, width: 353.5, height: 14}],
- pageNumber: 1
- } as UnderlineSettings);
- viewer.annotation.addAnnotation("Strikethrough", {
- bounds: [{x: 97, y: 836, width: 376.5, height: 14}],
- pageNumber: 1
- } as StrikethroughSettings);
- }
-```
-**Step 4:** Add Event Listeners for Button Clicks
-
-Attach event listeners that handle annotation visibility modifications and downloading the document.
-
-```js
-// Add event listener to the button with ID 'download'
-document.getElementById('save')?.addEventListener('click', save);
-```
-
-**Step 5:** Modify Annotation Flags Function
-
-Implement a function that changes the annotation visibility settings for the document.
-
-```js
-
-// Import PdfAnnotationFlag and PdfDocument from the Syncfusion PDF library.
-import { PdfAnnotationFlag, PdfDocument } from '@syncfusion/ej2/pdf';
-
-// Function to get Base64 of the loaded document and modify annotation flags
-function save() {
- // Assuming pdfviewer is globally accessible or a part of another object
- viewer.saveAsBlob().then((blob: Blob) => {
- const reader = new FileReader();
- reader.onload = function () {
- let base64data = reader.result as string;
-
- // Extract base64 string from Data URL
- const base64EncodedData = base64data.split('base64,')[1];
-
- // Create a PdfDocument instance with base64 data
- const document1 = new PdfDocument(base64EncodedData);
-
- // Modify flag for each annotation
- for (let i = 0; i < document1.pageCount; i++) {
- const page = document1.getPage(i);
- for (let j = 0; j < page.annotations.count; j++) {
- const annot = page.annotations.at(j);
- // Set flag to noView
- annot.flags |= PdfAnnotationFlag.noView;
- }
- }
-
- // Save modified document as a blob
- document1.saveAsBlob().then((modifiedBlob: { blobData: Blob }) => {
- const internalReader = new FileReader();
- internalReader.onload = function () {
- const modifiedBase64 = internalReader.result as string;
-
- // Create a link to download the modified PDF
- const downloadLink = document.createElement('a');
- downloadLink.href = modifiedBase64;
- downloadLink.download = 'modified.pdf';
- downloadLink.click();
- };
- internalReader.readAsDataURL(modifiedBlob.blobData);
- });
- };
- reader.readAsDataURL(blob);
- });
-}
-
-```
-
-By following these steps, the annotations in a PDF document can be set to be visible in the Syncfusion PDF Viewer, providing control over annotation visibility based on different platforms.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js.md b/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js.md
deleted file mode 100644
index 67f55c1ef..000000000
--- a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-js.md
+++ /dev/null
@@ -1,133 +0,0 @@
----
-layout: post
-title: Converting Library Bounds in JavaScript PdfViewer | Syncfusion
-description: Learn how to convert Library bounds into Viewer bounds in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Converting PDF Library Bounds to PDF Viewer Bounds
-
-### Overview
-
-When exporting annotations from the PDF Library, you may need to convert the bounds values into the PDF Viewer format. This guide will help you achieve that using the Syncfusion PDF Viewer component.
-
-### How to Convert Bounds Values
-
-**Step 1:** Initialize the PdfViewer Instance
-
-Create an instance of the PdfViewer and configure it with the required services.
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
-});
-
-ej.pdfviewer.PdfViewer.Inject(
- ej.pdfviewer.TextSelection,
- ej.pdfviewer.TextSearch,
- ej.pdfviewer.Print,
- ej.pdfviewer.Navigation,
- ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification,
- ej.pdfviewer.Annotation,
- ej.pdfviewer.FormDesigner,
- ej.pdfviewer.FormFields,
- ej.pdfviewer.PageOrganizer
-);
-
-pdfviewer.appendTo('#PdfViewer');
-```
-
-**Step 2:** Handle Export Success
-
-Convert the exported blob URL to an object and then extract and convert the annotation bounds.
-
-```js
-pdfviewer.exportSuccess = function (args) {
- console.log(args.exportData);
- const blobURL = args.exportData;
-
- // Converting the exported blob into object
- convertBlobURLToObject(blobURL)
- .then((objectData) => {
- console.log(objectData);
- var datas = objectData;
- var shapeAnnotationData = datas['pdfAnnotation'][0]['shapeAnnotation'];
- shapeAnnotationData.map(data => {
- if (data && data.rect && parseInt(data.rect.width)) {
-
- var pageHeight = pdfviewer.getPageInfo(parseInt(data.page)).height;
-
- // Converting PDF Library values into PDF Viewer values.
- var rect = {
- x: (parseInt(data.rect.x) * 96) / 72,
- y: (parseInt(pageHeight) - parseInt(data.rect.height)) * 96 / 72,
- width: (parseInt(data.rect.width) - parseInt(data.rect.x)) * 96 / 72,
- height: (parseInt(data.rect.height) - parseInt(data.rect.y)) * 96 / 72,
- };
- }
- if ((data.type == 'Line' || data.type == 'Arrow') && data.start && data.end) {
- // Split and parse the start and end points
- const [startX, startY] = data.start.split(',').map(Number);
- const [endX, endY] = data.end.split(',').map(Number);
-
- // Convert to PDF Viewer coordinates
- var pageHeight = pdfviewer.getPageInfo(parseInt(data.page)).height;
- const pdfStartX = (startX * 96) / 72;
- const pdfStartY = (parseInt(pageHeight) - startY) * 96 / 72;
- const pdfEndX = (endX * 96) / 72;
- const pdfEndY = (parseInt(pageHeight) - endY) * 96 / 72;
-
- rect = {
- x: Math.min(pdfStartX, pdfEndX),
- y: Math.min(pdfStartY, pdfEndY),
- width: Math.abs(pdfEndX - pdfStartX),
- height: Math.abs(pdfEndY - pdfStartY),
- };
- }
-
- if (rect != null && data.type != 'Text') {
- console.log(data.name);
- console.log(rect);
- console.log("-------------------------");
- }
- });
- })
- .catch((error) => {
- console.error('Error converting Blob URL to object:', error);
- });
-};
-```
-
-**Step 3:** Create a Function to Convert Blob URL to Object
-
-This function fetches the blob data and converts it into a JSON object.
-
-```js
-// Function to convert Blob URL to object
-function convertBlobURLToObject(blobURL) {
- return fetch(blobURL)
- .then((response) => response.blob())
- .then((blobData) => {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.onloadend = () => {
- resolve(JSON.parse(reader.result));
- };
- reader.onerror = reject;
- reader.readAsText(blobData);
- });
- });
-}
-```
-
-### Conclusion
-
-By following these steps, you can successfully convert PDF Library bounds values into PDF Viewer bounds values when exporting annotations as JSON. This will help maintain accuracy in the annotation placement and ensure a seamless user experience.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md b/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md
deleted file mode 100644
index 240ca2031..000000000
--- a/ej2-javascript/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds-ts.md
+++ /dev/null
@@ -1,137 +0,0 @@
----
-layout: post
-title: Converting Library Bounds in JavaScript PdfViewer | Syncfusion
-description: Learn how to convert Library bounds into Viewer bounds in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Converting PDF Library Bounds to PDF Viewer Bounds
-
-### Overview
-
-When exporting annotations from the PDF Library, you may need to convert the bounds values into the PDF Viewer format. This guide will help you achieve that using the Syncfusion PDF Viewer component.
-
-### How to Convert Bounds Values
-
-**Step 1:** Initialize the PdfViewer Instance
-
-Create an instance of the PdfViewer and configure it with the required services.
-
-```ts
-import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
-
-// Inject required modules
-PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
-
-const pdfviewer: PdfViewer = new PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
-});
-
-// Append the PdfViewer to the DOM
-pdfviewer.appendTo('#PdfViewer');
-```
-
-**Step 2:** Handle Export Success
-
-Convert the exported blob URL to an object and then extract and convert the annotation bounds.
-
-```ts
-// Event for export success
-pdfviewer.exportSuccess = (args: { exportData: string }) => {
- console.log(args.exportData);
- const blobURL = args.exportData;
-
- // Converting the exported blob into object
- convertBlobURLToObject(blobURL)
- .then((objectData) => {
- console.log(objectData);
- const datas = objectData;
- const shapeAnnotationData = datas['pdfAnnotation'][0]['shapeAnnotation'];
-
- shapeAnnotationData.forEach((data: any) => {
- let rect: { x: number; y: number; width: number; height: number } | null = null;
-
- if (data && data.rect && parseInt(data.rect.width)) {
-
- //Get PageSize using getPageInfo API
- const pageInfo = pdfviewer.getPageInfo(parseInt(data.page));
- const pageHeight: number = pageInfo?.height ?? 0;
- // Converting PDF Library values into PDF Viewer values.
- rect = {
- x: (parseInt(data.rect.x) * 96) / 72,
- y: (pageHeight - parseInt(data.rect.height)) * 96 / 72,
- width: (parseInt(data.rect.width) - parseInt(data.rect.x)) * 96 / 72,
- height: (parseInt(data.rect.height) - parseInt(data.rect.y)) * 96 / 72,
- };
- }
-
- if ((data.type === 'Line' || data.type === 'Arrow') && data.start && data.end) {
- const [startX, startY] = data.start.split(',').map(Number);
- const [endX, endY] = data.end.split(',').map(Number);
-
- //Get PageSize using getPageInfo API
- const pageInfo = pdfviewer.getPageInfo(parseInt(data.page));
- const pageHeight: number = pageInfo?.height ?? 0;
-
- const pdfStartX = (startX * 96) / 72;
- const pdfStartY = (pageHeight - startY) * 96 / 72;
- const pdfEndX = (endX * 96) / 72;
- const pdfEndY = (pageHeight - endY) * 96 / 72;
-
- rect = {
- x: Math.min(pdfStartX, pdfEndX),
- y: Math.min(pdfStartY, pdfEndY),
- width: Math.abs(pdfEndX - pdfStartX),
- height: Math.abs(pdfEndY - pdfStartY),
- };
- }
-
- if (rect != null && data.type !== 'Text') {
- console.log(data.name);
- console.log(rect);
- console.log("-------------------------");
- }
- });
- })
- .catch((error) => {
- console.error('Error converting Blob URL to object:', error);
- });
-};
-```
-
-**Step 3:** Create a Function to Convert Blob URL to Object
-
-This function fetches the blob data and converts it into a JSON object.
-
-```ts
-// Function to convert Blob URL to object
-function convertBlobURLToObject(blobURL: string): Promise {
- return fetch(blobURL)
- .then((response) => response.blob())
- .then((blobData) => {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.onloadend = () => {
- try {
- resolve(JSON.parse(reader.result as string));
- } catch (err) {
- reject(err);
- }
- };
- reader.onerror = reject;
- reader.readAsText(blobData);
- });
- });
-}
-```
-
-### Conclusion
-
-By following these steps, you can successfully convert PDF Library bounds values into PDF Viewer bounds values when exporting annotations as JSON. This will help maintain accuracy in the annotation placement and ensure a seamless user experience.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service-core.md b/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service-core.md
deleted file mode 100644
index aeb2648eb..000000000
--- a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service-core.md
+++ /dev/null
@@ -1,430 +0,0 @@
----
-layout: post
-title: Create pdfviewer service in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Create pdfviewer service in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Create pdfviewer service
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# Create pdfviewer service in ##Platform_Name## Pdfviewer control
-
-The Essential JavaScript PDF Viewer have server side dependency to get the details from PDF Documents for rendering. This section explains how to create the service for PDF Viewer to perform server-side preprocessing of the PDF document to be rendered in client side.
-
-## Prerequisites
-
-To get started with ASP.NET CORE Web API service, refer [System requirements for ASP.NET Core controls](https://ej2.syncfusion.com/aspnetcore/documentation/system-requirements).
-
-## Setup ASP.NET CORE application with Web API for PDF Viewer service
-
-The following steps are used to create PDF Viewer service
-
-**Step 1:** Select File > New > Project, in the Visual Studio menu bar.
-
-
-
-**Step 2:** Select ASP.NET Core Web Application and then click **Next**.
-
-
-
-**Step 3:** In the Configure your new project dialog, enter Project Name and select **Next**.
-
-
-
-**Step 4:** In the Additional information dialog, select .NET 6.0 (Long-term Support) and then select **Create**.
-
-
-
-**Step 5:** After creating the project, add the [Syncfusion.EJ2.PdfViewer.AspNet.Core](https://www.nuget.org/packages/Syncfusion.EJ2.PdfViewer.AspNet.Core) dependency to your project by using 'NuGet Package Manager'.
-
-Open the `NuGet` package manager.
-
-
-Install the **Syncfusion.EJ2.PdfViewer.AspNet.Core** package to the application.
-
-
-
-**Step 6:** Add the API Controller to the project and named it as `PdfViewerController` .
-
-
-**Step 7:** Add the following code to the `PdfViewerController.cs` controller.
-
-```ts
-using Microsoft.AspNetCore.Hosting;
-using Microsoft.AspNetCore.Mvc;
-using Microsoft.Extensions.Caching.Memory;
-using Newtonsoft.Json;
-using Syncfusion.EJ2.PdfViewer;
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Net;
-
-namespace PdfViewerWebService
-{
- [Route("[controller]")]
- [ApiController]
- public class PdfViewerController : ControllerBase
- {
- private IWebHostEnvironment _hostingEnvironment;
- //Initialize the memory cache object
- public IMemoryCache _cache;
- public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache)
- {
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- Console.WriteLine("PdfViewerController initialized");
- }
-
- [HttpPost("Load")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/Load")]
- //Post action for Loading the PDF documents
- public IActionResult Load([FromBody] Dictionary jsonObject)
- {
- Console.WriteLine("Load called");
- //Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string documentPath = GetDocumentPath(jsonObject["document"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- stream = new MemoryStream(bytes);
- }
- else
- {
- string fileName = jsonObject["document"].Split(new string[] { "://" }, StringSplitOptions.None)[0];
-
- if (fileName == "http" || fileName == "https")
- {
- WebClient WebClient = new WebClient();
- byte[] pdfDoc = WebClient.DownloadData(jsonObject["document"]);
- stream = new MemoryStream(pdfDoc);
- }
-
- else
- {
- return this.Content(jsonObject["document"] + " is not found");
- }
- }
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
- }
-
- [AcceptVerbs("Post")]
- [HttpPost("Bookmarks")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/Bookmarks")]
- //Post action for processing the bookmarks from the PDF documents
- public IActionResult Bookmarks([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- var jsonResult = pdfviewer.GetBookmarks(jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
- }
-
- [AcceptVerbs("Post")]
- [HttpPost("RenderPdfPages")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/RenderPdfPages")]
- //Post action for processing the PDF documents
- public IActionResult RenderPdfPages([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- object jsonResult = pdfviewer.GetPage(jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
- }
-
- [AcceptVerbs("Post")]
- [HttpPost("RenderPdfTexts")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/RenderPdfTexts")]
- //Post action for processing the PDF texts
- public IActionResult RenderPdfTexts([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- object jsonResult = pdfviewer.GetDocumentText(jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
- }
-
- [AcceptVerbs("Post")]
- [HttpPost("RenderThumbnailImages")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/RenderThumbnailImages")]
- //Post action for rendering the ThumbnailImages
- public IActionResult RenderThumbnailImages([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- object result = pdfviewer.GetThumbnailImages(jsonObject);
- return Content(JsonConvert.SerializeObject(result));
- }
- [AcceptVerbs("Post")]
- [HttpPost("RenderAnnotationComments")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/RenderAnnotationComments")]
- //Post action for rendering the annotations
- public IActionResult RenderAnnotationComments([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- object jsonResult = pdfviewer.GetAnnotationComments(jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
- }
- [AcceptVerbs("Post")]
- [HttpPost("ExportAnnotations")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/ExportAnnotations")]
- //Post action to export annotations
- public IActionResult ExportAnnotations([FromBody] Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- string jsonResult = pdfviewer.ExportAnnotation(jsonObject);
- return Content(jsonResult);
- }
- [AcceptVerbs("Post")]
- [HttpPost("ImportAnnotations")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/ImportAnnotations")]
- //Post action to import annotations
- public IActionResult ImportAnnotations([FromBody] Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- string jsonResult = string.Empty;
- object JsonResult;
- if (jsonObject != null && jsonObject.ContainsKey("fileName"))
- {
- string documentPath = GetDocumentPath(jsonObject["fileName"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- jsonResult = System.IO.File.ReadAllText(documentPath);
- }
- else
- {
- return this.Content(jsonObject["document"] + " is not found");
- }
- }
- else
- {
- string extension = Path.GetExtension(jsonObject["importedData"]);
- if (extension != ".xfdf")
- {
- JsonResult = pdfviewer.ImportAnnotation(jsonObject);
- return Content(JsonConvert.SerializeObject(JsonResult));
- }
- else
- {
- string documentPath = GetDocumentPath(jsonObject["importedData"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- jsonObject["importedData"] = Convert.ToBase64String(bytes);
- JsonResult = pdfviewer.ImportAnnotation(jsonObject);
- return Content(JsonConvert.SerializeObject(JsonResult));
- }
- else
- {
- return this.Content(jsonObject["document"] + " is not found");
- }
- }
- }
- return Content(jsonResult);
- }
-
- [AcceptVerbs("Post")]
- [HttpPost("ExportFormFields")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/ExportFormFields")]
- public IActionResult ExportFormFields([FromBody] Dictionary jsonObject)
-
- {
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- string jsonResult = pdfviewer.ExportFormFields(jsonObject);
- return Content(jsonResult);
- }
-
- [AcceptVerbs("Post")]
- [HttpPost("ImportFormFields")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/ImportFormFields")]
- public IActionResult ImportFormFields([FromBody] Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- jsonObject["data"] = GetDocumentPath(jsonObject["data"]);
- object jsonResult = pdfviewer.ImportFormFields(jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
- }
-
- [AcceptVerbs("Post")]
- [HttpPost("Unload")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/Unload")]
- //Post action for unloading and disposing the PDF document resources
- public IActionResult Unload([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- pdfviewer.ClearCache(jsonObject);
- return this.Content("Document cache is cleared");
- }
-
-
- [HttpPost("Download")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/Download")]
- //Post action for downloading the PDF documents
- public IActionResult Download([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- return Content(documentBase);
- }
-
- [HttpPost("PrintImages")]
- [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
- [Route("[controller]/PrintImages")]
- //Post action for printing the PDF documents
- public IActionResult PrintImages([FromBody] Dictionary jsonObject)
- {
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- object pageImage = pdfviewer.GetPrintImage(jsonObject);
- return Content(JsonConvert.SerializeObject(pageImage));
- }
-
- //Gets the path of the PDF document
- private string GetDocumentPath(string document)
- {
- string documentPath = string.Empty;
- if (!System.IO.File.Exists(document))
- {
- var path = _hostingEnvironment.ContentRootPath;
- if (System.IO.File.Exists(path + "/Data/" + document))
- documentPath = path + "/Data/" + document;
- }
- else
- {
- documentPath = document;
- }
- Console.WriteLine(documentPath);
- return documentPath;
- }
- // GET api/values
- [HttpGet]
- public IEnumerable Get()
- {
- return new string[] { "value1", "value2" };
- }
-
- // GET api/values/5
- [HttpGet("{id}")]
- public string Get(int id)
- {
- return "value";
- }
- }
-}
-
-```
-
-**Step 8:** Change the launchUrl to pdfviewer (name of the controller) in the lauchSettings.json as follows.
-
-```json
-{
- "iisSettings": {
- "windowsAuthentication": false,
- "anonymousAuthentication": true,
- "iisExpress": {
- "applicationUrl": "http://localhost:2270",
- "sslPort": 44396
- }
- },
- "profiles": {
- "PdfViewerWebService": {
- "commandName": "Project",
- "dotnetRunMessages": true,
- "launchBrowser": true,
- "launchUrl": "pdfviewer",
- "applicationUrl": "https://localhost:7255;http://localhost:5262",
- "environmentVariables": {
- "ASPNETCORE_ENVIRONMENT": "Development"
- }
- },
- "IIS Express": {
- "commandName": "IISExpress",
- "launchBrowser": true,
- "launchUrl": "pdfviewer",
- "environmentVariables": {
- "ASPNETCORE_ENVIRONMENT": "Development"
- }
- }
- }
-}
-```
-
-**Step 9:** Configuring CORS policy and add Newtonsoft.Json for JSON format support
-* Browser security prevents a webpage from making requests to a different domain than the one that served the webpage. This restriction is called the same-origin policy. Cross Origin Resource Sharing (CORS) allows a server to relax the same-origin policy. Using CORS, a server can explicitly allow some cross-origin. Configure a CORS policy at application Startup.ConfigureServices.
-* Prior to ASP.NET Core 3.0, the default JSON formatters implemented using the Newtonsoft.Json package. In ASP.NET Core 3.0 or later, the default JSON formatters are based on System.Text.Json. Support for Newtonsoft.Json based formatters and features is available by installing the Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet package and configuring it in Startup.ConfigureServices.
-
-```cs
-using Microsoft.AspNetCore.ResponseCompression;
-using Newtonsoft.Json.Serialization;
-
-var builder = WebApplication.CreateBuilder(args);
-var MyAllowSpecificOrigins = "MyPolicy";
-builder.Services.AddControllers().AddNewtonsoftJson(options =>
-{
- // Use the default property (Pascal) casing
- options.SerializerSettings.ContractResolver = new DefaultContractResolver();
-});
-builder.Services.AddCors(options =>
-{
- options.AddPolicy(name: MyAllowSpecificOrigins,
- builder => {
- builder.AllowAnyOrigin()
- .AllowAnyMethod()
- .AllowAnyHeader();
- });
-});
-
-builder.Services.AddMemoryCache();
-builder.Services.AddEndpointsApiExplorer();
-
-builder.Services.Configure(options => options.Level = System.IO.Compression.CompressionLevel.Optimal);
-builder.Services.AddResponseCompression();
-
-var app = builder.Build();
-
-//Register Syncfusion license
-string licenseKey = string.Empty;
-Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense(licenseKey);
-
-app.UseHttpsRedirection();
-app.UseCors(MyAllowSpecificOrigins);
-app.UseAuthorization();
-
-app.UseResponseCompression();
-app.MapControllers();
-
-app.Run();
-```
-
-View the sample in GitHub to [create PDF Viewer web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_6.0)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service.md b/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service.md
deleted file mode 100644
index 901df2680..000000000
--- a/ej2-javascript/pdfviewer/how-to/create-pdfviewer-service.md
+++ /dev/null
@@ -1,279 +0,0 @@
----
-layout: post
-title: Create pdfviewer service in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Create pdfviewer service in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Create pdfviewer service
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# Create pdfviewer service in ##Platform_Name## Pdfviewer control
-
-The Essential JavaScript PDF Viewer have server side dependency to get the details from PDF Documents for rendering. This section explains how to create the service for PDF Viewer to perform server-side preprocessing of the PDF document to be rendered in client side.
-
-## Prerequisites
-
-To get started with ASP.NET MVC Web API service, ensure that the following software is installed on the machine.
-
-* .Net Framework 4.5 and above.
-* ASP.NET MVC 4 or ASP.NET MVC 5
-* Web API
-* Visual Studio
-
-## Setup ASP.NET MVC application with Web API for PDF Viewer service
-
-The following steps are used to create PDF Viewer service
-
-**Step 1:** Create an ASP.NET web application with the default template project in Visual Studio 2017.
-
-
-
-**Step 2:** After creating the project, add the `Syncfusion.EJ2.PdfViewer.AspNet.MVC5` dependency to your project by using 'NuGet Package Manager'.
-
-Open the `NuGet` package manager.
-
-
-Install the **Syncfusion.EJ2.PdfViewer.AspNet.Mvc5** package to the application.
-
-
-
-**Step 3:** Add the Web API 2 Controller to the project and named it as `PdfViewerController` .
-
-
-**Step 4:** Add the following code to the `PdfViewerController.cs` controller.
-
-```ts
-using Newtonsoft.Json;
-using Syncfusion.EJ2.PdfViewer;
-using System;
-using System.Collections.Generic;
-using System.IO;
-using System.Linq;
-using System.Net;
-using System.Net.Http;
-using System.Web;
-using System.Web.Http;
-
-namespace MvcWebService.webapi
-{
- public class PdfViewerController : ApiController
- {
- [System.Web.Mvc.HttpPost]
- public object Load(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string documentPath = GetDocumentPath(jsonObject["document"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- stream = new MemoryStream(bytes);
- }
- else
- {
- string fileName = jsonObject["document"].Split(new string[] { "://" }, StringSplitOptions.None)[0];
-
- if (fileName == "http" || fileName == "https")
- {
- WebClient WebClient = new WebClient();
- byte[] pdfDoc = WebClient.DownloadData(jsonObject["document"]);
- stream = new MemoryStream(pdfDoc);
- }
-
- else
- {
- return (jsonObject["document"] + " is not found");
- }
- }
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return (JsonConvert.SerializeObject(jsonResult));
- }
- [System.Web.Mvc.HttpPost]
- public object Bookmarks(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- var jsonResult = pdfviewer.GetBookmarks(jsonObject);
- return (jsonResult);
- }
- [System.Web.Mvc.HttpPost]
- public object RenderPdfPages(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- object jsonResult = pdfviewer.GetPage(jsonObject);
- return (JsonConvert.SerializeObject(jsonResult));
- }
- [System.Web.Mvc.HttpPost]
- public object RenderThumbnailImages(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- object result = pdfviewer.GetThumbnailImages(jsonObject);
- return (JsonConvert.SerializeObject(result));
- }
- [System.Web.Mvc.HttpPost]
- public object RenderPdfTexts(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- object result = pdfviewer.GetDocumentText(jsonObject);
- return (JsonConvert.SerializeObject(result));
- }
-
-
- [System.Web.Mvc.HttpPost]
- public object RenderAnnotationComments(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- object jsonResult = pdfviewer.GetAnnotationComments(jsonObject);
- return (JsonConvert.SerializeObject(jsonResult));
- }
- [System.Web.Mvc.HttpPost]
- public object Unload(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- pdfviewer.ClearCache(jsonObject);
- return ("Document cache is cleared");
- }
- [System.Web.Mvc.HttpPost]
- public HttpResponseMessage Download(Dictionary jsonObject)
- {
-
- PdfRenderer pdfviewer = new PdfRenderer();
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- return (GetPlainText(documentBase));
- }
-
- [System.Web.Mvc.HttpPost]
- public object PrintImages(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- object pageImage = pdfviewer.GetPrintImage(jsonObject);
- return (pageImage);
- }
- private HttpResponseMessage GetPlainText(string pageImage)
- {
- var responseText = new HttpResponseMessage(HttpStatusCode.OK);
- responseText.Content = new StringContent(pageImage, System.Text.Encoding.UTF8, "text/plain");
- return responseText;
- }
- private string GetDocumentPath(string document)
- {
- string documentPath = string.Empty;
- if (!System.IO.File.Exists(document))
- {
- var path = HttpContext.Current.Request.PhysicalApplicationPath;
- if (System.IO.File.Exists(path + "/Data/" + document))
- documentPath = path + "/Data/" + document;
- }
- else
- {
- documentPath = document;
- }
- return documentPath;
- }
-
- // GET api/values
- [System.Web.Mvc.HttpPost]
- public IEnumerable Get()
- {
- return new string[] { "value1", "value2" };
- }
-
- [System.Web.Mvc.HttpPost]
- //Post action to export annotations
- [System.Web.Mvc.Route("{id}/ExportAnnotations")]
-
- public HttpResponseMessage ExportAnnotations(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- string jsonResult = pdfviewer.ExportAnnotation(jsonObject);
- return (GetPlainText(jsonResult));
- }
-
- [System.Web.Mvc.HttpPost]
- //Post action to import annotations
- public object ImportAnnotations(Dictionary jsonObject)
- {
- PdfRenderer pdfviewer = new PdfRenderer();
- string jsonResult = string.Empty;
- object JsonResult;
- if (jsonObject != null && jsonObject.ContainsKey("fileName"))
- {
- string documentPath = GetDocumentPath(jsonObject["fileName"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- jsonResult = System.IO.File.ReadAllText(documentPath);
- }
- else
- {
- return (jsonObject["document"] + " is not found");
- }
- }
- else
- {
- string extension = Path.GetExtension(jsonObject["importedData"]);
- if (extension != ".xfdf")
- {
- JsonResult = pdfviewer.ImportAnnotation(jsonObject);
- return (GetPlainText((JsonConvert.SerializeObject(JsonResult))));
- }
- else
- {
- string documentPath = GetDocumentPath(jsonObject["importedData"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- jsonObject["importedData"] = Convert.ToBase64String(bytes);
- JsonResult = pdfviewer.ImportAnnotation(jsonObject);
- return (GetPlainText((JsonConvert.SerializeObject(JsonResult))));
- }
- else
- {
- return (jsonObject["document"] + " is not found");
- }
- }
- }
- return (GetPlainText((jsonResult)));
- }
-
- }
-}
-
-```
-
-**Step 5:** Configure the CORS policy in the `web.config` file.
-
-```xml
-
-
-
-
-
-
-
-
-
-```
-
-**Step 6:** Set the Global configuration in the `Global.asax` file:
-
-```
- System.Web.Http.GlobalConfiguration.Configuration.Routes.MapHttpRoute(
- name: "DefaultApi",
- routeTemplate: "api/{controller}/{action}/{id}",
- defaults: new { id = RouteParameter.Optional });
- AppDomain.CurrentDomain.SetData("SQLServerCompactEditionUnderWebHosting", true);
-```
-
-Download the sample to create PDF Viewer web service [here](https://www.syncfusion.com/downloads/support/directtrac/general/ze/MvcWebService587924662.zip)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/custom-context-menu-js.md b/ej2-javascript/pdfviewer/how-to/custom-context-menu-js.md
deleted file mode 100644
index 34e5684bf..000000000
--- a/ej2-javascript/pdfviewer/how-to/custom-context-menu-js.md
+++ /dev/null
@@ -1,281 +0,0 @@
----
-layout: post
-title: Customize context menu in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Customize context menu in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize context menu in ##Platform_Name## Pdfviewer control
-
-PDF Viewer allows you to add custom option in context menu. It can be achieved by using the [addCustomMenu()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#addcustommenu) method and custom action is defined using the [customContextMenuSelect()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#customcontextmenuselect)method.
-
-### Add Custom Option
-
-The following code shows how to add custom option in context menu.
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2-pdfviewer-lib'
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields,ej.pdfviewer.PageOrganizer);
-
-var menuItems = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'UnLock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
-];
-
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = function (args) {
- pdfviewer.addCustomMenu(menuItems, false, false);
-}
-```
-
-### Customize custom option in context menu
-
-The PDF Viewer feature enables customization of custom options and the ability to toggle the display of the default context menu. When the addCustomMenu parameter is set to `true`, the default menu is hidden; conversely, when it is set to `false`, the default menu items are displayed.
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2-pdfviewer-lib'
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields,ej.pdfviewer.PageOrganizer);
-
-var menuItems = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'UnLock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
-];
-
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = function (args) {
- pdfviewer.addCustomMenu(menuItems, true);
-}
-```
-
-#### Customize added context menu items
-
-The following code shows how to hide/show added custom option in context menu using the [customContextMenuBeforeOpen()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#customcontextmenubeforeopen) method.
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/24.2.3/dist/ej2-pdfviewer-lib'
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields,ej.pdfviewer.PageOrganizer);
-
-var menuItems = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'UnLock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
-];
-
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = function (args) {
- pdfviewer.addCustomMenu(menuItems, false, false);
-}
-
-pdfviewer.customContextMenuSelect = function (args) {
- switch (args.id) {
- case 'search_in_google':
- for (var i = 0; i < pdfviewer.textSelectionModule.selectionRangeArray.length; i++) {
- var content = pdfviewer.textSelectionModule.selectionRangeArray[i].textContent;
- if ((pdfviewer.textSelectionModule.isTextSelection) && (/\S/.test(content))) {
- window.open('http://google.com/search?q=' + content);
- }
- }
- break;
- case 'lock_annotation':
- lockAnnotations(args);
- break;
- case 'unlock_annotation':
- unlockAnnotations(args);
- break;
- case 'read_only_true':
- setReadOnlyTrue(args);
- break;
- case 'read_only_false':
- setReadOnlyFalse(args);
- break;
- case 'formfield properties':
- break;
- default:
- break;
- }
-};
-
-pdfviewer.customContextMenuBeforeOpen = function (args) {
- for (var i = 0; i < args.ids.length; i++) {
- var search = document.getElementById(args.ids[i]);
- if (search) {
- search.style.display = 'none';
- if (args.ids[i] === 'search_in_google' && (pdfviewer.textSelectionModule) && pdfviewer.textSelectionModule.isTextSelection) {
- search.style.display = 'block';
- } else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
- var isLockOption = args.ids[i] === "lock_annotation";
- for (var j = 0; j < pdfviewer.selectedItems.annotations.length; j++) {
- var selectedAnnotation = pdfviewer.selectedItems.annotations[j];
- if (selectedAnnotation && selectedAnnotation.annotationSettings) {
- var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
- (!isLockOption && selectedAnnotation.annotationSettings.isLock);
- search.style.display = shouldDisplay ? 'block' : 'none';
- }
- }
- } else if ((args.ids[i] === "read_only_true" || args.ids[i] === "read_only_false") && pdfviewer.selectedItems.formFields.length !== 0) {
- var isReadOnlyOption = args.ids[i] === "read_only_true";
- for (var k = 0; k < pdfviewer.selectedItems.formFields.length; k++) {
- var selectedFormFields = pdfviewer.selectedItems.formFields[k];
- if (selectedFormFields) {
- var selectedFormField = pdfviewer.selectedItems.formFields[k].isReadonly;
- var displayMenu = (isReadOnlyOption && !selectedFormField) || (!isReadOnlyOption && selectedFormField);
- search.style.display = displayMenu ? 'block' : 'none';
- }
- }
- } else if (args.ids[i] === 'formfield properties' && pdfviewer.selectedItems.formFields.length !== 0) {
- search.style.display = 'block';
- }
- }
- }
-};
-
-function lockAnnotations(args) {
- for (var i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].uniqueKey === pdfviewer.selectedItems.annotations[0].id) {
- pdfviewer.annotationCollection[i].annotationSettings.isLock = true;
- pdfviewer.annotationCollection[i].isCommentLock = true;
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- args.cancel = false;
- }
-}
-
-function unlockAnnotations(args) {
- for (var i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].uniqueKey === pdfviewer.selectedItems.annotations[0].id) {
- pdfviewer.annotationCollection[i].annotationSettings.isLock = false;
- pdfviewer.annotationCollection[i].isCommentLock = false;
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- args.cancel = false;
- }
-}
-
-function setReadOnlyTrue(args) {
- var selectedFormFields = pdfviewer.selectedItems.formFields;
- for (var i = 0; i < selectedFormFields.length; i++) {
- var selectFormFields = selectedFormFields[i];
- if (selectFormFields) {
- pdfviewer.formDesignerModule.updateFormField(selectFormFields, {
- isReadOnly: true,
- });
- }
- args.cancel = false;
- }
-}
-
-function setReadOnlyFalse(args) {
- var selectedFormFields = pdfviewer.selectedItems.formFields;
- for (var i = 0; i < selectedFormFields.length; i++) {
- var selectFormFields = selectedFormFields[i];
- if (selectFormFields) {
- pdfviewer.formDesignerModule.updateFormField(selectFormFields, {
- isReadOnly: false,
- });
- }
- args.cancel = false;
- }
-}
-```
-The following is the output of custom context menu with customization.
-
-{% tabs %}
-{% highlight ts tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/custom-context-menu/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/custom-context-menu/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) in the `index.ts` file
-`pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/custom-context-menu" %}
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Custom%20Context%20Menu)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/custom-context-menu.md b/ej2-javascript/pdfviewer/how-to/custom-context-menu.md
deleted file mode 100644
index 0c565f470..000000000
--- a/ej2-javascript/pdfviewer/how-to/custom-context-menu.md
+++ /dev/null
@@ -1,296 +0,0 @@
----
-layout: post
-title: Custom context menu in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Custom context menu in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Custom context menu in ##Platform_Name## Pdfviewer control
-
-PDF Viewer allows you to add custom option in context menu. It can be achieved by using the [addCustomMenu()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#addcustommenu) method and custom action is defined using the [customContextMenuSelect()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#customcontextMenuselect)method.
-
-### Add Custom Option
-
-The following code shows how to add custom option in context menu.
-
-```ts
- let viewer: PdfViewer = new PdfViewer();
- viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
- viewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib";
- var menuItems: MenuItemModel[] = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'Unlock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
- ];
-
- viewer.documentLoad = function (args) {
- viewer.addCustomMenu(menuItems, true);
- }
-
- viewer.customContextMenuSelect = function (args) {
- switch (args.id) {
- case 'search_in_google':
- for (var i = 0; i < viewer.textSelectionModule.selectionRangeArray.length; i++) {
- var content = viewer.textSelectionModule.selectionRangeArray[i].textContent;
- if ((viewer.textSelectionModule.isTextSelection) && (/\S/.test(content))) {
- window.open('http://google.com/search?q=' + content);
- }
- }
- break;
- case 'lock_annotation':
- lockAnnotations(args);
- break;
- case 'unlock_annotation':
- unlockAnnotations(args);
- break;
- case 'read_only_true':
- setReadOnlyTrue(args);
- break;
- case 'read_only_false':
- setReadOnlyFalse(args);
- break;
- case 'formfield properties':
- break;
- default:
- break;
- }
- };
-```
-
-### Customize custom option in context menu
-
-The PDF Viewer feature enables customization of custom options and the ability to toggle the display of the default context menu. When the addCustomMenu parameter is set to `true`, the default menu is hidden; conversely, when it is set to `false`, the default menu items are displayed.
-
-```ts
-
- let viewer: PdfViewer = new PdfViewer();
- viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
- viewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib";
- var menuItems: MenuItemModel[] = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'Unlock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
- ];
-
- viewer.documentLoad = function (args) {
- viewer.addCustomMenu(menuItems, true);
- }
-
-```
-
-#### Customize added context menu items
-
-The following code shows how to hide/show added custom option in context menu using the [customContextMenuBeforeOpen()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#customcontextMenubeforeopen) method.
-
-```ts
-
- let viewer: PdfViewer = new PdfViewer();
- viewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
- viewer.resourceUrl = "https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib";
- var menuItems: MenuItemModel[] = [
- {
- text: 'Search In Google',
- id: 'search_in_google',
- iconCss: 'e-icons e-search'
- },
- {
- text: 'Lock Annotation',
- iconCss: 'e-icons e-lock',
- id: 'lock_annotation'
- },
- {
- text: 'Unlock Annotation',
- iconCss: 'e-icons e-unlock',
- id: 'unlock_annotation'
- },
- {
- text: 'Lock Form Field',
- iconCss: 'e-icons e-lock',
- id: 'read_only_true'
- },
- {
- text: 'Unlock Form Field',
- iconCss: 'e-icons e-unlock',
- id: 'read_only_false'
- },
- ];
-
-viewer.documentLoad = function (args) {
- viewer.addCustomMenu(menuItems, false, false);
-}
-
-viewer.customContextMenuSelect = function (args) {
- switch (args.id) {
- case 'search_in_google':
- for (var i = 0; i < viewer.textSelectionModule.selectionRangeArray.length; i++) {
- var content = viewer.textSelectionModule.selectionRangeArray[i].textContent;
- if ((viewer.textSelectionModule.isTextSelection) && (/\S/.test(content))) {
- window.open('http://google.com/search?q=' + content);
- }
- }
- break;
- case 'lock_annotation':
- lockAnnotations(args);
- break;
- case 'unlock_annotation':
- unlockAnnotations(args);
- break;
- case 'read_only_true':
- setReadOnlyTrue(args);
- break;
- case 'read_only_false':
- setReadOnlyFalse(args);
- break;
- case 'formfield properties':
- break;
- default:
- break;
- }
-};
-
-viewer.customContextMenuBeforeOpen = function (args) {
- for (var i = 0; i < args.ids.length; i++) {
- var search = document.getElementById(args.ids[i]);
- if (search) {
- search.style.display = 'none';
- if (args.ids[i] === 'search_in_google' && (viewer.textSelectionModule) && viewer.textSelectionModule.isTextSelection) {
- search.style.display = 'block';
- } else if (args.ids[i] === "lock_annotation" || args.ids[i] === "unlock_annotation") {
- var isLockOption = args.ids[i] === "lock_annotation";
- for (var j = 0; j < viewer.selectedItems.annotations.length; j++) {
- var selectedAnnotation = viewer.selectedItems.annotations[j];
- if (selectedAnnotation && selectedAnnotation.annotationSettings) {
- var shouldDisplay = (isLockOption && !selectedAnnotation.annotationSettings.isLock) ||
- (!isLockOption && selectedAnnotation.annotationSettings.isLock);
- search.style.display = shouldDisplay ? 'block' : 'none';
- }
- }
- } else if ((args.ids[i] === "read_only_true" || args.ids[i] === "read_only_false") && viewer.selectedItems.formFields.length !== 0) {
- var isReadOnlyOption = args.ids[i] === "read_only_true";
- for (var k = 0; k < viewer.selectedItems.formFields.length; k++) {
- var selectedFormFields = viewer.selectedItems.formFields[k];
- if (selectedFormFields) {
- var selectedFormField = viewer.selectedItems.formFields[k].isReadonly;
- var displayMenu = (isReadOnlyOption && !selectedFormField) || (!isReadOnlyOption && selectedFormField);
- search.style.display = displayMenu ? 'block' : 'none';
- }
- }
- } else if (args.ids[i] === 'formfield properties' && viewer.selectedItems.formFields.length !== 0) {
- search.style.display = 'block';
- }
- }
- }
-};
-
-function lockAnnotations(args) {
- for (var i = 0; i < viewer.annotationCollection.length; i++) {
- if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
- viewer.annotationCollection[i].annotationSettings.isLock = true;
- viewer.annotationCollection[i].isCommentLock = true;
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- args.cancel = false;
- }
-}
-
-function unlockAnnotations(args) {
- for (var i = 0; i < viewer.annotationCollection.length; i++) {
- if (viewer.annotationCollection[i].uniqueKey === viewer.selectedItems.annotations[0].id) {
- viewer.annotationCollection[i].annotationSettings.isLock = false;
- viewer.annotationCollection[i].isCommentLock = false;
- viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
- }
- args.cancel = false;
- }
-}
-
-function setReadOnlyTrue(args) {
- var selectedFormFields = viewer.selectedItems.formFields;
- for (var i = 0; i < selectedFormFields.length; i++) {
- var selectFormFields = selectedFormFields[i];
- if (selectFormFields) {
- viewer.formDesignerModule.updateFormField(selectFormFields, {
- isReadOnly: true,
- });
- }
- args.cancel = false;
- }
-}
-
-function setReadOnlyFalse(args) {
- var selectedFormFields = viewer.selectedItems.formFields;
- for (var i = 0; i < selectedFormFields.length; i++) {
- var selectFormFields = selectedFormFields[i];
- if (selectFormFields) {
- viewer.formDesignerModule.updateFormField(selectFormFields, {
- isReadOnly: false,
- });
- }
- args.cancel = false;
- }
-}
-```
-The following is the output of custom context menu with customization.
-
-{% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-{% include code-snippet/pdfviewer/custom-context-menu/index.ts %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/custom-context-menu/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) in the `index.ts` file
-`viewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/custom-context-menu" %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-js.md b/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-js.md
deleted file mode 100644
index 8ae1fe0f3..000000000
--- a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-js.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: post
-title: How to change font family in Javascript Pdfviewer|Syncfusion.
-description: Learn how to change the font family in Form Field's Type Signature in Syncfusion Javascript Pdfviewer component of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# To Change the Font Family
-Change the Font Family in Type Signature of the Syncfusion PDF Viewer by adding a custom css stylesheet to the document , and then apply the desired font family to the type signature element. Include the Google font link in the HTML head section to apply the Google Font.
-
-### Signature Field property
-
-The Syncfusion PDF Viewer provides the ability to change the font family for Signature and Initial Field using `typeSignatureFont` and `typeInitialFonts` property.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Insert the following code snippet to implement the functionality for using custom fonts in Signature field.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-```html
-
-
-
-
-```
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- SignatureFieldSettings.typeSignatureFonts : [
- 'Allura',
- 'Tangerine',
- 'Sacramento',
- 'Inspiration',
- ];
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-### Initial Field property
-
-Insert the following code snippet to implement the functionality for using custom fonts in Initial field.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-```html
-
-
-
-
-```
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- InitialFieldSettings.typeInitialFonts : [
- 'Allura',
- 'Tangerine',
- 'Sacramento',
- 'Inspiration',];
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-By implementing this , you can use custom fonts in form field's signature in both `signature` and `initial` field
diff --git a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-ts.md b/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-ts.md
deleted file mode 100644
index 8e732639d..000000000
--- a/ej2-javascript/pdfviewer/how-to/custom-font-signature-field-ts.md
+++ /dev/null
@@ -1,69 +0,0 @@
----
-layout: post
-title: How to change font family in Typescript Pdfviewer|Syncfusion.
-description: Learn how to change the font family in Form Field's Type Signature in Syncfusion Javascript Pdfviewer component of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# To Change the Font Family
-Change the Font Family in Type Signature of the Syncfusion PDF Viewer by adding a custom css stylesheet to the document , and then apply the desired font family to the type signature element. Include the Google font link in the HTML head section to apply the Google Font.
-
-### Signature Field property
-The Syncfusion PDF Viewer provides the ability to change the font family for Signature and Initial Field using `typeSignatureFonts` and `typeInitialFonts` property.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Insert the following code snippet to implement the functionality for using custom fonts in Signature field.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-```html
-
-
-
-
-```
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-let fonts=['Allura','Tangerine','Sacramento','Inspiration'];
-pdfviewer.SignatureFieldSettings.typeSignatureFonts = fonts;
-pdfviewer.appendTo('#PdfViewer');
-```
-
-{% endhighlight %}
-{% endtabs %}
-
-### Initial Field property
-Insert the following code snippet to implement the functionality for using custom fonts in Initial field.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-```html
-
-
-
-
-```
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-let fonts=['Allura','Tangerine','Sacramento','Inspiration'];
-pdfviewer.InitialFieldSettings.typeInitialFonts = fonts;
-pdfviewer.appendTo('#PdfViewer');
-```
-
-{% endhighlight %}
-{% endtabs %}
-By implementing this , you can use custom fonts in form field's signature in both `signature` and `initial` field.
diff --git a/ej2-javascript/pdfviewer/how-to/custom-fonts-ts.md b/ej2-javascript/pdfviewer/how-to/custom-fonts-ts.md
deleted file mode 100644
index e406c23c8..000000000
--- a/ej2-javascript/pdfviewer/how-to/custom-fonts-ts.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-layout: post
-title: Add Custom fonts in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about how to add custom fonts using the PDF document in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# How to add custom fonts to the PDF viewer used in the PDF document
-
-To use custom fonts in the Syncfusion PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the
-**customFonts** property, which accepts an array of font names.
-
-The following steps are used to customize the selection border.
-
-**Step 1:** Add the custom TTF font files to the resource URL path referenced in your application. For example, place the custom TTF files in the ej2-pdfviewer-lib folder, which will serve as the resource URL path.
-
-**Step 2:** The following code snippet are how you can add custom fonts to the PDF viewer.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-let viewer: PdfViewer = new PdfViewer();
-PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-viewer.resourceUrl:'https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib';
-viewer.customFonts: ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"];
-
-//PDF Viewer control rendering starts
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-let viewer: PdfViewer = new PdfViewer();
-PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-viewer.serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer';
-viewer.customFonts: ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"];
-
-
-//PDF Viewer control rendering starts
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-By following these steps, you can successfully integrate and use custom fonts in your PDF documents displayed in the EJ2 PDF Viewer.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/custom-fonts.md b/ej2-javascript/pdfviewer/how-to/custom-fonts.md
deleted file mode 100644
index ab2df424f..000000000
--- a/ej2-javascript/pdfviewer/how-to/custom-fonts.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: post
-title: Add Custom fonts in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about how to add custom fonts using the PDF document in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# How to add custom fonts to the PDF viewer used in the PDF document
-
-To use custom fonts in the Syncfusion PDF Viewer within your PDF document, you need to add the custom TTF font files to the resource URL directory and configure the viewer to load these fonts. You can specify the custom font names using the
-**customFonts** property, which accepts an array of font names.
-
-The following steps are used to customize the selection border.
-
-**Step 1:** Add the custom TTF font files to the resource URL path referenced in your application. For example, place the custom TTF files in the ej2-pdfviewer-lib folder, which will serve as the resource URL path.
-
-**Step 2:** The following code snippet are how you can add custom fonts to the PDF viewer.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl:'https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib',
- customFonts: ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"]
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-//PDF Viewer control rendering starts
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- customFonts: ["arialbd.ttf", "arial.ttf", "BKANT.TTF", "calibri.ttf", "GARA.TTF", "GARAIT.TTF", "msgothic.ttc", "trebuc.ttf", "wingding.ttf"]
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-//PDF Viewer control rendering starts
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-By following these steps, you can successfully integrate and use custom fonts in your PDF documents displayed in the EJ2 PDF Viewer.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/customize-text-search-color.md b/ej2-javascript/pdfviewer/how-to/customize-text-search-color.md
deleted file mode 100644
index c03117cab..000000000
--- a/ej2-javascript/pdfviewer/how-to/customize-text-search-color.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: post
-title: Customize text search color in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Customize text search color in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Customize text search color
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize text search color in ##Platform_Name## Pdfviewer control
-
-To change the text search color in the Syncfusion PDF viewer, you can use the **searchColor** property of the searchModule object. This property accepts a string value that represents the color in hexadecimal format.
-
-```ts
-
-viewer.textSearchColorSettings.searchColor = "#FF0000";
-
-```
-
-This will set the text search color to red. You can use any valid hexadecimal color code to set the text search color to the desired color.
-
-You can also use the **searchHighlightColor** property of the searchModule object to change the highlight color of the search results. This property also accepts a string value in hexadecimal format.
-
-```ts
-
-viewer.textSearchColorSettings.searchHighlightColor = "#0000FF";
-
-```
-
-This will set the highlight color of the search results to blue.
-
-* [**searchColor**](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearchColorSettings/#searchcolor)
-* [**searchHighlightColor**](https://ej2.syncfusion.com/documentation/api/pdfviewer/textSearchColorSettings/#searchhighlightcolor)
-
-Here is an example of how you can use the searchHighlightColor property and searchColor property:
-
-```
-
-
-
-
-
-
-```
-
-```ts
-
-viewer.enableTextSearch = true;
-// customize the textSeach color
-viewer.textSearchColorSettings.searchColor = "#FF0000";
-// customize the highlight color of the search results
-viewer.textSearchColorSettings.searchHighlightColor = "#0000FF";
-document.getElementById("search").addEventListener("click", () => {
- viewer.textSearchModule.searchText("pdf", false);
-});
-document.getElementById("searchNext").addEventListener("click", () => {
- viewer.textSearchModule.searchNext();
-});
-document.getElementById("searchPervious").addEventListener("click", () => {
- viewer.textSearchModule.searchPrevious();
-});
-document.getElementById("searchCancel").addEventListener("click", () => {
- viewer.textSearchModule.cancelTextSearch();
-});
-
-```
-
-Find the sample [how to customize the text search color](https://stackblitz.com/edit/typescript-oft4zw?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/customize-text-search-colors.md b/ej2-javascript/pdfviewer/how-to/customize-text-search-colors.md
deleted file mode 100644
index 4546433d7..000000000
--- a/ej2-javascript/pdfviewer/how-to/customize-text-search-colors.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-layout: post
-title: Customize text search colors in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Customize text search colors in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Customize text search colors
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Customize text search colors in ##Platform_Name## Pdfviewer control
-
-To change the text search color in the Syncfusion PDF viewer, you can use the **searchColor** property of the searchModule object. This property accepts a string value that represents the color in hexadecimal format.
-
-```javascript
-
-viewer.textSearchColorSettings.searchColor = "#FF0000";
-
-```
-
-This will set the text search color to red. You can use any valid hexadecimal color code to set the text search color to the desired color.
-
-You can also use the **searchHighlightColor** property of the searchModule object to change the highlight color of the search results. This property also accepts a string value in hexadecimal format.
-
-```javascript
-
-viewer.textSearchColorSettings.searchHighlightColor = "#0000FF";
-
-```
-
-This will set the highlight color of the search results to blue.
-
-* [**searchColor**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchColorSettings/#searchcolor)
-* [**searchHighlightColor**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/textSearchColorSettings/#searchhighlightcolor)
-
-Here is an example of how you can use the searchHighlightColor property and searchColor property:
-
-```
-
-
-
-
-
-
-```
-
-```javascript
-
-viewer.enableTextSearch = true;
-// customize the textSeach color
-viewer.textSearchColorSettings.searchColor = "#FF0000";
-// customize the highlight color of the search results
-viewer.textSearchColorSettings.searchHighlightColor = "#0000FF";
-document.getElementById("search").addEventListener("click", () => {
- viewer.textSearchModule.searchText("pdf", false);
-});
-document.getElementById("searchNext").addEventListener("click", () => {
- viewer.textSearchModule.searchNext();
-});
-document.getElementById("searchPervious").addEventListener("click", () => {
- viewer.textSearchModule.searchPrevious();
-});
-document.getElementById("searchCancel").addEventListener("click", () => {
- viewer.textSearchModule.cancelTextSearch();
-});
-
-```
-
-Find the sample [how to customize the text search color](https://stackblitz.com/edit/js-q6nquw?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/delete-annotation.md b/ej2-javascript/pdfviewer/how-to/delete-annotation.md
deleted file mode 100644
index 832b5ace2..000000000
--- a/ej2-javascript/pdfviewer/how-to/delete-annotation.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: Delete annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Delete annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Delete annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Delete annotation in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to delete a specific annotation from a PDF document. Deleting a specific annotation can be done using the **deleteAnnotationById()** method. This method is used to delete a specific annotation using its id.
-
-The following steps are used to delete a specific annotation from PDF Document.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to delete a specific annotation using `deleteAnnotationById()` method.
-
-```
-
-```
-
-```ts
-// Delete Annotation by ID.
-document.getElementById('deleteAnnotationbyId').addEventListener('click', () => {
- viewer.annotationModule.deleteAnnotationById(
- viewer.annotationCollection[0].annotationId
- );
- });
-```
-
-Find the sample [how to delete a specific annotation using deleteAnnotationById](https://stackblitz.com/edit/mcxfte?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/delete-annotations.md b/ej2-javascript/pdfviewer/how-to/delete-annotations.md
deleted file mode 100644
index 1ba749bd4..000000000
--- a/ej2-javascript/pdfviewer/how-to/delete-annotations.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: Delete annotations in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Delete annotations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Delete annotations
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Delete annotations in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to delete a specific annotation from a PDF document. Deleting a specific annotation can be done using the **deleteAnnotationById()** method. This method is used to delete a specific annotation using its id.
-
-The following steps are used to delete a specific annotation from PDF Document.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to delete a specific annotation using `deleteAnnotationById()` method.
-
-```
-
-```
-
-```javascript
-// Delete Annotation by ID.
-document.getElementById('deleteAnnotationbyId').addEventListener('click', () => {
- viewer.annotationModule.deleteAnnotationById(
- viewer.annotationCollection[0].annotationId
- );
- });
-```
-
-Find the sample [how to delete a specific annotation using deleteAnnotationById](https://stackblitz.com/edit/5ygaeq?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/disable-context-menu-option.md b/ej2-javascript/pdfviewer/how-to/disable-context-menu-option.md
deleted file mode 100644
index a33cbc6d7..000000000
--- a/ej2-javascript/pdfviewer/how-to/disable-context-menu-option.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: Disable context menu option in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Disable context menu option in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Disable context menu option
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable context menu option in ##Platform_Name## Pdfviewer control
-
-To disable the context menu in the Syncfusion PDF viewer control, you can use the [**ContextMenuOption**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#contextmenuoption) property as `'None'` to hide all context menu options. Default value of the **ContextMenuOption** is `'RightClick'`.
-
-Here is an example of how you can use the **ContextMenuOption** to disable context menu in the PDF Viewer:
-
-```
-
-
-
-```
-
-```javascript
-
-// Disable ContextMenuOption
-document.getElementById('disable').addEventListener('click', ()=> {
- viewer.contextMenuOption = 'None';
-});
-
-```
-
-This will hide the context menu and prevent the user from right-clicking on the PDF viewer.
-
-Find the sample [how to disable context menu](https://stackblitz.com/edit/jlphem-uicunx?devtoolsheight=33&file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/disable-context-menu.md b/ej2-javascript/pdfviewer/how-to/disable-context-menu.md
deleted file mode 100644
index 6f9e97b5c..000000000
--- a/ej2-javascript/pdfviewer/how-to/disable-context-menu.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: Disable context menu in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Disable context menu in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Disable context menu
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable context menu in ##Platform_Name## Pdfviewer control
-
-To disable the context menu in the Syncfusion PDF viewer control, you can use the [**ContextMenuOption**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#contextmenuoption) property as `'None'` to hide all context menu options. Default value of the **ContextMenuOption** is `'RightClick'`.
-
-Here is an example of how you can use the **ContextMenuOption** to disable context menu in the PDF Viewer:
-
-```
-
-
-
-```
-
-```ts
-
-// Disable ContextMenuOption
-document.getElementById('disable').addEventListener('click', ()=> {
- viewer.contextMenuOption = 'None';
-});
-
-```
-
-This will hide the context menu and prevent the user from right-clicking on the PDF viewer.
-
-Find the sample [how to disable Context Menu](https://stackblitz.com/edit/e99te3-ha9bkx?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/disable-tile-rendering.md b/ej2-javascript/pdfviewer/how-to/disable-tile-rendering.md
deleted file mode 100644
index d01f8675f..000000000
--- a/ej2-javascript/pdfviewer/how-to/disable-tile-rendering.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: post
-title: Disable tile rendering in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Disable tile rendering in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Disable tile rendering
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable tile rendering in ##Platform_Name## Pdfviewer control
-
-To disable the tile rendering feature in the Syncfusion PDF viewer control, you can use the **enableTileRendering** property. This property allows you to enable or disable the tile rendering feature, which is used to improve the performance of the PDF viewer when displaying large documents.
-
-To disable the tile rendering feature, you can set the **enableTileRendering** property to `false`.
-
-By default, the tile rendering feature is enabled in the PDF viewer. Disabling it may improve the performance of the PDF viewer when displaying small documents, but it may also reduce the performance when displaying large documents.
-
-Here is an example of how you can use the **enableTileRendering** property:
-
-```
-
-
-
-```
-
-```ts
-
-// Disable tile rendering.
-document.getElementById('disable').addEventListener('click', () => {
- viewer.tileRenderingSettings.enableTileRendering = false;
-});
-
-```
-
-Find the sample [how to disable the tile rendering](https://stackblitz.com/edit/vj1hf8-q8ayqc?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/disable-tile-renderings.md b/ej2-javascript/pdfviewer/how-to/disable-tile-renderings.md
deleted file mode 100644
index 196567008..000000000
--- a/ej2-javascript/pdfviewer/how-to/disable-tile-renderings.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: post
-title: Disable tile renderings in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Disable tile renderings in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Disable tile renderings
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Disable tile renderings in ##Platform_Name## Pdfviewer control
-
-To disable the tile rendering feature in the Syncfusion PDF viewer control, you can use the **enableTileRendering** property. This property allows you to enable or disable the tile rendering feature, which is used to improve the performance of the PDF viewer when displaying large documents.
-
-To disable the tile rendering feature, you can set the **enableTileRendering** property to `false`.
-
-By default, the tile rendering feature is enabled in the PDF viewer. Disabling it may improve the performance of the PDF viewer when displaying small documents, but it may also reduce the performance when displaying large documents.
-
-Here is an example of how you can use the **enableTileRendering** property:
-
-```
-
-
-
-```
-
-```javascript
-
-// Disable tile rendering.
-document.getElementById('disable').addEventListener('click', () => {
- viewer.tileRenderingSettings.enableTileRendering = false;
-});
-
-```
-
-Find the sample [how to disable the tile rendering](https://stackblitz.com/edit/7fefpj-n7pyna?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotation.md b/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotation.md
deleted file mode 100644
index 5ce092fe5..000000000
--- a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotation.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: post
-title: Display custom tool tip for annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Display custom tool tip for annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Display custom tool tip for annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Display custom tool tip for annotation in ##Platform_Name## Pdfviewer control
-
-To display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer, you can use the [**annotationMouseover**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and **annotationMouseLeave** events .
-
-Here is an example that demonstrates how to display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer:
-
-```ts
-
-viewer.annotationSettings.author = "syncfusion";
-
-let tooltip: Tooltip = new Tooltip({
- mouseTrail: true,
- opensOn: "Custom"
-});
-
-viewer.annotationMouseOver = args => {
- tooltip.appendTo("#pdfViewer_pageDiv_" + (viewer.currentPageNumber - 1));
- tooltip.content = args.annotation.author;
- tooltip.open();
- let ele: any = document.getElementsByClassName("e-tooltip-wrap")[0];
- ele.style.top = args.Y + 100 + "px";
- ele.style.left = args.X + "px";
-};
-
-viewer.annotationMouseLeave = args => {
- tooltip.close();
-};
-
-```
-
-Find the sample [how to display custom tooltip for annotations using MouseOver event](https://stackblitz.com/edit/cervhy-s9fh48?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotations.md b/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotations.md
deleted file mode 100644
index 02d193445..000000000
--- a/ej2-javascript/pdfviewer/how-to/display-custom-tool-tip-for-annotations.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: post
-title: Display custom tool tip for annotations in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Display custom tool tip for annotations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Display custom tool tip for annotations
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Display custom tool tip for annotations in ##Platform_Name## Pdfviewer control
-
-To display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer, you can use the [**annotationMouseOver**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationmouseover) and **annotationMouseLeave** events .
-
-Here is an example that demonstrates how to display a custom tooltip for annotations using the mouseover event in the Syncfusion PDF Viewer:
-
-```javascript
-
-viewer.annotationSettings.author = "syncfusion";
-var tooltip = new ej.popups.Tooltip({
- mouseTrail: true,
- opensOn: "Custom"
-});
-viewer.annotationMouseOver = function(args) {
- tooltip.appendTo("#pdfViewer_pageDiv_" + (viewer.currentPageNumber - 1));
- tooltip.content = args.annotation.author;
- tooltip.open();
- var ele = document.getElementsByClassName("e-tooltip-wrap")[0];
- ele.style.top = args.Y + 100 + "px";
- ele.style.left = args.X + "px";
-};
-viewer.annotationMouseLeave = function(args) {
- tooltip.close();
-};
-
-```
-
-Find the Sample [how to display custom tooltip for annotations using MouseOver event](https://stackblitz.com/edit/ztmvjx-byzwvq?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/download-document-on-window-closing.md b/ej2-javascript/pdfviewer/how-to/download-document-on-window-closing.md
deleted file mode 100644
index 6550048df..000000000
--- a/ej2-javascript/pdfviewer/how-to/download-document-on-window-closing.md
+++ /dev/null
@@ -1,36 +0,0 @@
----
-layout: post
-title: Download document on window closing in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Download document on window closing in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Download document on window closing
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Download document on window closing in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to download a PDF document rendered in the viewer while refreshing the window or clicking the close window using the [onbeforeunload](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#unload) event.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Add the following code sample to download a PDF document while refreshing or closing the window.
-
-```ts
-
-//The event triggers while closing or refreshing the window.
-window.onbeforeunload = function(e){
- var message = "Do you want to close the page?"
- e = e || window.event;
- //For IE and Firefox.
- if (e) {
- e.returnValue = message;
- //Method to download the document.
- viewer.download();
- }
- }
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Download/Download%20the%20pdf%20document%20before%20closing%20window%20or%20refresh)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/download-start-event-js.md b/ej2-javascript/pdfviewer/how-to/download-start-event-js.md
deleted file mode 100644
index 54c3d985e..000000000
--- a/ej2-javascript/pdfviewer/how-to/download-start-event-js.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-layout: post
-title: Controlling File Downloads in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Controlling File Downloads in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Controlling File Downloads in Syncfusion PDF Viewer
-
-In the Syncfusion PDF Viewer, we've introduced a new feature that enables you to manage file downloads more effectively. This feature allows you to intercept and potentially skip the download process of a PDF document, providing enhanced control over user interactions within your application.
-
-### Using the downloadStart Event
-
-The key to this functionality lies in the downloadStart event, which offers a mechanism to intercept the initiation of the download process. Within the event handler, you can set the cancel argument to true to programmatically prevent the download action from proceeding.
-
-```js
-pdfviewer.downloadStart = args => {
- // Your custom logic here
- args.cancel = true; // Prevent download action
-};
-```
-
-By default, the cancel argument is set to `false`, indicating that the download action will proceed unless explicitly canceled by your custom logic.
-
-### Enhanced Flexibility
-
-By leveraging the [downloadStart](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#downloadstart) event and its cancel argument, you gain the ability to implement custom logic to control and potentially prevent download actions based on your application's specific requirements. This enhancement provides greater flexibility in managing user interactions with PDF documents, empowering you to tailor the experience according to your needs.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/download-start-event-ts.md b/ej2-javascript/pdfviewer/how-to/download-start-event-ts.md
deleted file mode 100644
index f6eaeb874..000000000
--- a/ej2-javascript/pdfviewer/how-to/download-start-event-ts.md
+++ /dev/null
@@ -1,31 +0,0 @@
----
-layout: post
-title: Controlling File Downloads in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here how to Controlling File Downloads in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Controlling File Downloads in Syncfusion PDF Viewer
-
-In the Syncfusion PDF Viewer, we've introduced a new feature that enables you to manage file downloads more effectively. This feature allows you to intercept and potentially skip the download process of a PDF document, providing enhanced control over user interactions within your application.
-
-### Using the downloadStart Event
-
-The key to this functionality lies in the downloadStart event, which offers a mechanism to intercept the initiation of the download process. Within the event handler, you can set the cancel argument to true to programmatically prevent the download action from proceeding.
-
-```ts
-pdfviewer.downloadStart = (args: any) => {
- // Your custom logic here
- args.cancel = true; // Prevent download action
-};
-```
-
-By default, the cancel argument is set to `false`, indicating that the download action will proceed unless explicitly canceled by your custom logic.
-
-### Enhanced Flexibility
-
-By leveraging the [downloadStart](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#downloadstart) event and its cancel argument, you gain the ability to implement custom logic to control and potentially prevent download actions based on your application's specific requirements. This enhancement provides greater flexibility in managing user interactions with PDF documents, empowering you to tailor the experience according to your needs.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/enable-local-storage-js.md b/ej2-javascript/pdfviewer/how-to/enable-local-storage-js.md
deleted file mode 100644
index 130bad95d..000000000
--- a/ej2-javascript/pdfviewer/how-to/enable-local-storage-js.md
+++ /dev/null
@@ -1,42 +0,0 @@
----
-layout: post
-title: Managing Local Storage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn how to manage local storage in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Managing Local Storage in Syncfusion PDF Viewer
-
-The Syncfusion PDF Viewer provides the `enableLocalStorage` property, which allows you to control how session-specific data is stored. You can choose to store this data in an internal collection or rely on the default session storage.
-
-### Using the enableLocalStorage Property
-
-Set the `enableLocalStorage` property to manage whether the PDF Viewer uses session storage (default) or an internal collection. When set to `true`, session-specific data is kept in memory. Otherwise, session storage is used.
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib",
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
- //To enable Local Storage
- pdfviewer.enableLocalStorage=true;
- pdfviewer.appendTo('#PdfViewer');
-```
-
-### Impact and Considerations
-
-- **Increased Memory Usage**: Setting `enableLocalStorage` to `true` can increase memory usage, particularly with larger documents or those containing many interactive elements, such as form fields and annotations.
-- **Avoiding Memory Leaks**: It is crucial to properly dispose of the PDF Viewer instance when it's no longer needed to prevent memory leaks, especially when using in-memory storage.
-- **Default Behavior**: By default, this property is set to `false`, meaning the session storage mechanism is utilized unless explicitly changed.
-
-### Enhanced Control
-
-Leveraging the `enableLocalStorage` property provides greater flexibility in managing how data is stored during a session, allowing you to optimize performance and storage based on your application’s specific requirements.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/enable-local-storage-ts.md b/ej2-javascript/pdfviewer/how-to/enable-local-storage-ts.md
deleted file mode 100644
index 9c36b9197..000000000
--- a/ej2-javascript/pdfviewer/how-to/enable-local-storage-ts.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: post
-title: Managing Local Storage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn how to manage local storage in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Managing Local Storage in Syncfusion PDF Viewer
-
-The Syncfusion PDF Viewer provides the `enableLocalStorage` property, which allows you to control how session-specific data is stored. You can choose to store this data in an internal collection or rely on the default session storage.
-
-### Using the enableLocalStorage Property
-
-Set the `enableLocalStorage` property to manage whether the PDF Viewer uses session storage (default) or an internal collection. When set to `true`, session-specific data is kept in memory. Otherwise, session storage is used.
-
-```ts
-import { pdf } from '@syncfusion/ej2';
-import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
-
-const pdfviewer: PdfViewer = new PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib",
-});
-//To enable local storage
-pdfviewer.enableLocalStorage=true;
-pdfviewer.appendTo('#PdfViewer');
-```
-
-### Impact and Considerations
-
-- **Increased Memory Usage**: Setting `enableLocalStorage` to `true` can increase memory usage, particularly with larger documents or those containing many interactive elements, such as form fields and annotations.
-- **Avoiding Memory Leaks**: It is crucial to properly dispose of the PDF Viewer instance when it's no longer needed to prevent memory leaks, especially when using in-memory storage.
-- **Default Behavior**: By default, this property is set to `false`, meaning the session storage mechanism is utilized unless explicitly changed.
-
-### Enhanced Control
-
-Leveraging the `enableLocalStorage` property provides greater flexibility in managing how data is stored during a session, allowing you to optimize performance and storage based on your application’s specific requirements.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/enable-resize-text.md b/ej2-javascript/pdfviewer/how-to/enable-resize-text.md
deleted file mode 100644
index aad497a5a..000000000
--- a/ej2-javascript/pdfviewer/how-to/enable-resize-text.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-layout: post
-title: Enable resize text in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Enable resize text in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Enable resize text
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Enable resize text in ##Platform_Name## Pdfviewer control
-
-To enable the resizer for the text markup annotation in Syncfusion PDF viewer, you can use the [**enableTextMarkupResizer**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer) property. Default value of the property is false.
-
-Here is an example of how you can enable the resizer for the text markup annotation:
-
-```javascript
-
-//Enable TextMarkup Resizer.
-viewer.enableTextMarkupResizer = true;
-
-```
-
-Find the sample [how to enable the resizer for the Text Markup annotation](https://stackblitz.com/edit/qzf6bk-xsk9pf?devtoolsheight=33&file=index.js)
diff --git a/ej2-javascript/pdfviewer/how-to/enable-resize.md b/ej2-javascript/pdfviewer/how-to/enable-resize.md
deleted file mode 100644
index dccbc17b6..000000000
--- a/ej2-javascript/pdfviewer/how-to/enable-resize.md
+++ /dev/null
@@ -1,25 +0,0 @@
----
-layout: post
-title: Enable resize in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Enable resize in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Enable resize
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Enable resize in ##Platform_Name## Pdfviewer control
-
-To enable the resizer for the text markup annotation in Syncfusion PDF viewer, you can use the [**enableTextMarkupResizer**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enabletextmarkupresizer) property. Default value of the property is false.
-
-Here is an example of how you can enable the resizer for the text markup annotation:
-
-```ts
-
-//Enable TextMarkup Resizer.
-viewer.enableTextMarkupResizer = true;
-
-```
-
-Find the sample [how to enable the resizer for the Text Markup annotation](https://stackblitz.com/edit/cdl3df-8wbtuc?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/enable-text-selection-js.md b/ej2-javascript/pdfviewer/how-to/enable-text-selection-js.md
deleted file mode 100644
index 167eef3fe..000000000
--- a/ej2-javascript/pdfviewer/how-to/enable-text-selection-js.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: post
-title: Enable or Disable Text Selection in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn how to enable text selection in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Enable or Disable Text Selection in Syncfusion PDF Viewer
-
-The Syncfusion PDF Viewer provides the `enableTextSelection` property, which allows you to control whether users can select text within the displayed PDF document. This feature can be toggled programmatically during runtime.
-
-## Configure Text Selection on Initialization
-
-You can set the initial text selection behavior when initializing the PDF Viewer control by configuring the `enableTextSelection` property.
-
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
- enableTextSelection: false, // Disable text selection initially
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-```
-
-## Toggle Text Selection Dynamically
-
-You can change the text selection behavior at runtime using buttons, menu options, or other UI elements:
-
-```html
-
-
-
-```
-
-```js
-// Add click event listener for the enableTextSelection button
-document.getElementById('enableTextSelection').addEventListener('click', function () {
- pdfviewer.enableTextSelection = true;
-});
-
-// Add click event listener for the disableTextSelection button
-document.getElementById('disableTextSelection').addEventListener('click', function () {
- pdfviewer.enableTextSelection = false;
-});
-```
-
-## Use Cases and Considerations
-
-- **Document Protection**: Disabling text selection helps prevent unauthorized copying of sensitive content.
-- **Read-only Documents**: In scenarios where documents are meant for viewing only, disabling text selection can provide a cleaner user experience.
-- **Interactive Applications**: Toggle text selection based on user roles or document states in complex applications.
-
-## Default Behavior
-
-By default, text selection is enabled in the PDF Viewer. Set the `enableTextSelection` property to `false` explicitly if you want to disable this functionality.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/enable-text-selection-ts.md b/ej2-javascript/pdfviewer/how-to/enable-text-selection-ts.md
deleted file mode 100644
index e55ac6a9e..000000000
--- a/ej2-javascript/pdfviewer/how-to/enable-text-selection-ts.md
+++ /dev/null
@@ -1,65 +0,0 @@
----
-layout: post
-title: Enable or Disable Text Selection in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn how to enable text selection in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Enable or Disable Text Selection in Syncfusion PDF Viewer
-
-The Syncfusion PDF Viewer provides the `enableTextSelection` property, which allows you to control whether users can select text within the displayed PDF document. This feature can be toggled programmatically during runtime.
-
-## Configure Text Selection on Initialization
-
-You can set the initial text selection behavior when initializing the PDF Viewer control by configuring the `enableTextSelection` property.
-
-```ts
-import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields } from '@syncfusion/ej2-pdfviewer';
-
-// Inject required modules
-PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
-
-const pdfviewer: PdfViewer = new PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
- enableTextSelection: false, // Disable text selection initially
-});
-pdfviewer.appendTo('#PdfViewer');
-```
-
-## Toggle Text Selection Dynamically
-
-You can change the text selection behavior at runtime using buttons, menu options, or other UI elements:
-
-```html
-
-
-
-```
-
-```ts
-// Create buttons to enable/disable text selection
-document.getElementById('enableSelection')?.addEventListener('click', ()=> {
- pdfviewer.enableTextSelection = true;
-});
-
-document.getElementById('disableSelection')?.addEventListener('click', () => {
- pdfviewer.enableTextSelection = false;
-});
-```
-
-## Use Cases and Considerations
-
-- **Document Protection**: Disabling text selection helps prevent unauthorized copying of sensitive content.
-- **Read-only Documents**: In scenarios where documents are meant for viewing only, disabling text selection can provide a cleaner user experience.
-- **Interactive Applications**: Toggle text selection based on user roles or document states in complex applications.
-
-## Default Behavior
-
-By default, text selection is enabled in the PDF Viewer. Set the `enableTextSelection` property to `false` explicitly if you want to disable this functionality.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/export-as-image-js.md b/ej2-javascript/pdfviewer/how-to/export-as-image-js.md
deleted file mode 100644
index 0f30c5b25..000000000
--- a/ej2-javascript/pdfviewer/how-to/export-as-image-js.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-layout: post
-title: Export As Image in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Export As Image in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Export As Image ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to export specified pages as a Base64-encoded image string using the **exportAsImage()** method and exporting a range of pages as Base64-encoded image strings using the **exportAsImages()** method.
-
-The following steps are used to exportAsImage.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** The following code snippet to implement the functionality for exporting a specified page as a Base64-encoded image string or exporting a range of pages as Base64-encoded image strings.
-
-```
-
-
-
-```
-
-```javascript
-
-document.getElementById('exportAsImage').addEventListener('click', () => {
- var imageDetail;
- var pageIndex = 1;
- viewer.exportAsImage(pageIndex).then(function (value) {
- imageDetail = value;
- console.log(imageDetail);
- });
-});
-
-```
-
-Similarly, to code snippet for exports the specified page as a Base64-encoded image string, allowing for custom image size:
-
-
-```
-
-
-
-```
-
-```javascript
-
-document.getElementById('exportAsImageWithSize').addEventListener('click', () => {
- var imageDetail;
- var pageIndex = 1;
- var size = {width:200, height:500};
- viewer.exportAsImage(pageIndex,size).then(function (value) {
- imageDetail = value;
- console.log(imageDetail);
- });
-});
-
-```
-Similarly, to code snippet for exports the range of pages as Base64-encoded image strings:
-
-
-```
-
-
-
-```
-
-```javascript
-
-document.getElementById('exportAsImages').addEventListener('click', () => {
- var startPageIndex = 1;
- var endPageIndex = 5;
- viewer.exportAsImages(startPageIndex, endPageIndex).then(function (value) {
- imageDetails = value;
- console.log(imageDetails);
- });
-});
-
-```
-
-Similarly, to code snippet for exports the range of pages as Base64-encoded image strings, allowing for custom image size:
-
-
-```
-
-
-
-```
-
-```javascript
-
-document.getElementById('exportAsImagesWithSize').addEventListener('click', () => {
- var startPageIndex = 1;
- var endPageIndex = 5;
- var size = {width:200, height:500};
- viewer.exportAsImages(startPageIndex, endPageIndex, size).then(function (value) {
- imageDetails = value;
- console.log(imageDetails);
- });
-});
-
-```
-
-By following these steps, you can successfully integrate and use the export as image API in the EJ2 PDF Viewer.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/export-as-image-ts.md b/ej2-javascript/pdfviewer/how-to/export-as-image-ts.md
deleted file mode 100644
index 632bddeb0..000000000
--- a/ej2-javascript/pdfviewer/how-to/export-as-image-ts.md
+++ /dev/null
@@ -1,110 +0,0 @@
----
-layout: post
-title: Export As Image in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Export As Image in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Export As Image ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to export specified pages as a Base64-encoded image string using the **exportAsImage()** method and exporting a range of pages as Base64-encoded image strings using the **exportAsImages()** method.
-
-The following steps are used to exportAsImage.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** The following code snippet to implement the functionality for exporting a specified page as a Base64-encoded image string or exporting a range of pages as Base64-encoded image strings.
-
-```
-
-
-
-```
-
-```ts
-
-document.getElementById('exportAsImage').addEventListener('click', () => {
- let imageDetail: any;
- let pageIndex: number = 1;
- viewer.exportAsImage(pageIndex).then(function (value) {
- imageDetail = value;
- console.log(imageDetail);
- });
-});
-
-```
-
-Similarly, to code snippet for exports the specified page as a Base64-encoded image string, allowing for custom image size:
-
-
-```
-
-
-
-```
-
-```ts
-
-document.getElementById('exportAsImageWithSize').addEventListener('click', () => {
- let imageDetail: any;
- let pageIndex: number = 1;
- let size: any = {width:200, height:500};
- viewer.exportAsImage(pageIndex,size).then(function (value) {
- imageDetail = value;
- console.log(imageDetail);
- });
-});
-
-```
-Similarly, to code snippet for exports the range of pages as Base64-encoded image strings:
-
-
-```
-
-
-
-```
-
-```ts
-
-document.getElementById('exportAsImages').addEventListener('click', () => {
- let imageDetail: any;
- let startPageIndex: number = 1;
- let endPageIndex: number = 5;
- viewer.exportAsImages(startPageIndex, endPageIndex).then(function (value) {
- imageDetails = value;
- console.log(imageDetails);
- });
-});
-
-```
-
-Similarly, to code snippet for exports the range of pages as Base64-encoded image strings, allowing for custom image size:
-
-
-```
-
-
-
-```
-
-```ts
-
-document.getElementById('exportAsImagesWithSize').addEventListener('click', () => {
- let imageDetail: any;
- let startPageIndex: number = 1;
- let endPageIndex: number = 5;
- let size: any = {width:200, height:500};
- viewer.exportAsImages(startPageIndex, endPageIndex, size).then(function (value) {
- imageDetails = value;
- console.log(imageDetails);
- });
-});
-
-```
-
-By following these steps, you can successfully integrate and use the export as image API in the EJ2 PDF Viewer.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-completed-js.md b/ej2-javascript/pdfviewer/how-to/extract-text-completed-js.md
deleted file mode 100644
index 7ade17cd8..000000000
--- a/ej2-javascript/pdfviewer/how-to/extract-text-completed-js.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: extractTextCompleted Event in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about extractTextCompleted Event in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Extract text
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Extract text in ##Platform_Name## Pdfviewer control using extractTextCompleted event
-
-To extract text in Syncfusion PDF viewer, you can use the [**isExtractText**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property and [**extractTextCompleted**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event.This allows you to extract the text from a page along with the bounds.
-
-Here is an example of how you can use the **isExtractText** property and **extractTextCompleted** event:
-
-```javascript
-
-viewer.isExtractText = true;
-viewer.extractTextCompleted = args => {
- //Extract the Complete text of load document
- console.log(args);
- console.log(args.documentTextCollection[1]);
- //Extract the Text data.
- console.log(args.documentTextCollection[1][1].TextData);
- //Extract Text in the Page.
- console.log(args.documentTextCollection[1][1].PageText);
- //Extracts the first text of the PDF document along with its bounds
- console.log(args.documentTextCollection[1][1].TextData[0].Bounds);
-};
-
-```
-
-Find the sample [how to extract Text](https://stackblitz.com/edit/kzd4jd-dcser9?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-completed-ts.md b/ej2-javascript/pdfviewer/how-to/extract-text-completed-ts.md
deleted file mode 100644
index 6bc192b0b..000000000
--- a/ej2-javascript/pdfviewer/how-to/extract-text-completed-ts.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: extractTextCompleted Event in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about extractTextCompleted Event in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Extract text
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Extract text in ##Platform_Name## Pdfviewer control using extractTextCompleted event
-
-To extract text in Syncfusion PDF viewer, you can use the [**isExtractText**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#isextracttext) property and [**extractTextCompleted**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#extracttextcompleted) event.This allows you to extract the text from a page along with the bounds.
-
-Here is an example of how you can use the **isExtractText** property and **extractTextCompleted** event:
-
-```ts
-
-viewer.isExtractText = true;
-viewer.extractTextCompleted = args => {
- //Extract the Complete text of load document
- console.log(args);
- console.log(args.documentTextCollection[1]);
- //Extract the Text data.
- console.log(args.documentTextCollection[1][1].textData);
- //Extract Text in the Page.
- console.log(args.documentTextCollection[1][1].pageText);
- //Extracts the first text of the PDF document along with its bounds
- console.log(args.documentTextCollection[1][1].textData[0].Bounds);
-};
-
-```
-
-Find the sample [how to extract Text](https://stackblitz.com/edit/3xmbg6-m3ff47?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-js.md b/ej2-javascript/pdfviewer/how-to/extract-text-js.md
deleted file mode 100644
index c7db68753..000000000
--- a/ej2-javascript/pdfviewer/how-to/extract-text-js.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: post
-title: Extract Text in Syncfusion ##Platform_Name## Pdfviewer Control | Syncfusion
-description: Learn about the Extract Text in Syncfusion #Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Extract Text
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Extract Text Method in Syncfusion PdfViewer Control
-
-The `extractText` method of the Syncfusion PdfViewer control enables text extraction from one or more pages in a PDF document. This method is useful for retrieving the text content along with its associated data, such as the bounds of each text element.
-
-### extractText Method
-The extractText method retrieves text data from the specified page(s) of a PDF document. It can extract text from one page, a range of pages, or even provide detailed text data, depending on the options specified.
-
-#### Parameters:
-**startIndex:** The starting page index for text extraction (0-based index).
-
-**endIndex Or isOptions:** This can either be the ending page index for the text extraction (for extracting from multiple pages) or an option specifying text extraction criteria for a single page.
-
-**options (optional):** Specifies additional options, such as extracting plain text `TextOnly` or more detailed text data `TextAndBounds`. You can specify various options for text extraction. These options determine whether you want to extract plain text, text with bounds, or detailed text data.
-
-***TextOnly:*** Extracts only the plain text content without bounds or additional information.
-
-***TextAndBounds:*** Extracts text content along with its bounds (coordinates) within the PDF.
-
-#### Returns:
-The method returns a Promise that resolves to an object containing two properties:
-
-**textData:** An array of TextDataSettingsModel objects, each representing the details of the extracted text (including bounds, page text, etc.).
-
-**pageText:** A concatenated string of plain text extracted from the specified page(s).
-
-### Usage of extractText in Syncfusion PdfViewer Control
-Here is an example that demonstrates how to use the extractText method along with event handling:
-
-```html
-
-
-```
-```js
-// Initialize the PdfViewer
-
-var viewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib",
-});
-viewer.appendTo("#pdfViewer");
-
-// Event Listener for Extract Text from Single Page
-document.getElementById('extractText').addEventListener('click', function () {
- viewer.extractText(1, 'TextOnly').then((val) => {
- console.log('Extracted Text from Page 1:');
- console.log(val); // Logs the extracted text from page 1
- });
-});
-
-// Event Listener for Extract Text from Multiple Pages
-document.getElementById('extractTexts').addEventListener('click', function () {
- viewer.extractText(0, 2, 'TextOnly').then((val) => {
- console.log('Extracted Text from Pages 0 to 2:');
- console.log(val); // Logs the extracted text from pages 0 to 2
- });
-});
-```
-
-#### Explanation:
-**Single Page Extraction:** The first `extractText` call extracts text from page 1 (`startIndex = 1`), using the 'TextOnly' option for plain text extraction.
-
-**Multiple Pages Extraction:** The second extractText call extracts text from pages 0 through 2 (`startIndex = 0, endIndex = 2`), using the `TextOnly` option for plain text extraction.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-option-js.md b/ej2-javascript/pdfviewer/how-to/extract-text-option-js.md
deleted file mode 100644
index 52a84bbfc..000000000
--- a/ej2-javascript/pdfviewer/how-to/extract-text-option-js.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: post
-title: Extract Text Option in Syncfusion ##Platform_Name## Pdfviewer Control | Syncfusion
-description: Learn about the `extractTextOption` in Syncfusion #Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Extract Text Option
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-
-# Extract Text Option in Syncfusion ##Platform_Name## Pdfviewer Control
-
-The `extractTextOption` property in the Syncfusion PdfViewer control allows you to optimize memory usage by controlling the level of text extraction. This setting influences the data returned in the `extractTextCompleted` event. You can select one of the following options to determine the kind of text extraction and layout information to retrieve.
-
-### Available Options:
-
-**None:** No text information is extracted or returned. This is useful when you want to optimize memory usage and don't need any text data.
-
-**TextOnly:** Extracts only the plain text from the document. This option excludes any layout or positional information.
-
-**BoundsOnly:** Extracts layout information, such as bounds or coordinates, without including the plain text data.
-
-**TextAndBounds:** Extracts both the plain text and the layout (bounds) information, which is the default behavior.
-
-The following example demonstrates how to configure the `extractTextOption` property to control the level of text extraction:
-
-```js
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib",
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
- pdfviewer.extractTextOption = 'None'; // Options: 'None', 'TextOnly', 'BoundsOnly', 'TextAndBounds'
- pdfviewer.appendTo('#PdfViewer');
-
-```
-
-### Description of Each Option
-**extractTextOption.TextAndBounds (default):** This option returns both plain text and its positional data (bounds). Use this option when you need to access both the content of the PDF and its layout for further processing or analysis.
-
-**extractTextOption.TextOnly:** This option returns only the plain text from the PDF. No positional or layout data is included. Note that when using this option, text search functionality will be disabled. In such cases, it is recommended to use findTextAsync for text searching.
-
-**extractTextOption.BoundsOnly:** This option returns only the layout information (bounds) of the text, excluding the actual content. It is useful when the focus is on the position of text elements rather than the text itself.
-
-**extractTextOption.None:** This option does not extract or return any text or layout information. It is used to optimize memory usage when no text extraction is necessary. This setting is only relevant for the `extractTextCompleted` event and cannot be used with the `ExtractText` method.
-
-N> Text Search: When using the ` extractTextOption.None` and `extractTextOption.TextOnly` option, the findText method will not work. Instead, you should use the findTextAsync method to perform text searches asynchronously.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-option-ts.md b/ej2-javascript/pdfviewer/how-to/extract-text-option-ts.md
deleted file mode 100644
index cf92e0ef5..000000000
--- a/ej2-javascript/pdfviewer/how-to/extract-text-option-ts.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: post
-title: Extract Text Option in Syncfusion ##Platform_Name## Pdfviewer Control | Syncfusion
-description: Learn about the `extractTextOption` in Syncfusion #Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Extract Text Option
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-
-# Extract Text Option in Syncfusion ##Platform_Name## Pdfviewer Control
-
-The `extractTextOption` property in the Syncfusion PdfViewer control allows you to optimize memory usage by controlling the level of text extraction. This setting influences the data returned in the `extractTextCompleted` event. You can select one of the following options to determine the kind of text extraction and layout information to retrieve.
-
-### Available Options:
-
-**None:** No text information is extracted or returned. This is useful when you want to optimize memory usage and don't need any text data.
-
-**TextOnly:** Extracts only the plain text from the document. This option excludes any layout or positional information.
-
-**BoundsOnly:** Extracts layout information, such as bounds or coordinates, without including the plain text data.
-
-**TextAndBounds:** Extracts both the plain text and the layout (bounds) information, which is the default behavior.
-
-The following example demonstrates how to configure the `extractTextOption` property to control the level of text extraction:
-
-```ts
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
- TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer, ExtractTextOption} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
- TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer);
-
-let viewer: PdfViewer = new PdfViewer();
-viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-viewer.resourceUrl= "https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib";
-viewer.extractTextOption = ExtractTextOption.None; // Options: 'None', 'TextOnly', 'BoundsOnly', 'TextAndBounds'
-viewer.appendTo("#PdfViewer");
-
-```
-
-### Description of Each Option
-**extractTextOption.TextAndBounds (default):** This option returns both plain text and its positional data (bounds). Use this option when you need to access both the content of the PDF and its layout for further processing or analysis.
-
-**extractTextOption.TextOnly:** This option returns only the plain text from the PDF. No positional or layout data is included. Note that when using this option, text search functionality will be disabled. In such cases, it is recommended to use findTextAsync for text searching.
-
-**extractTextOption.BoundsOnly:** This option returns only the layout information (bounds) of the text, excluding the actual content. It is useful when the focus is on the position of text elements rather than the text itself.
-
-**extractTextOption.None:** This option does not extract or return any text or layout information. It is used to optimize memory usage when no text extraction is necessary. This setting is only relevant for the `extractTextCompleted` event and cannot be used with the `ExtractText` method.
-
-N> Text Search: When using the `extractTextOption.TextOnly` and `extractTextOption.None` option, the findText method will not work. Instead, you should use the findTextAsync method to perform text searches asynchronously.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/extract-text-ts.md b/ej2-javascript/pdfviewer/how-to/extract-text-ts.md
deleted file mode 100644
index 76341e8b3..000000000
--- a/ej2-javascript/pdfviewer/how-to/extract-text-ts.md
+++ /dev/null
@@ -1,84 +0,0 @@
----
-layout: post
-title: Extract Text in Syncfusion ##Platform_Name## Pdfviewer Control | Syncfusion
-description: Learn about the Extract Text in Syncfusion #Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Extract Text
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Extract Text Method in Syncfusion PdfViewer Control
-
-The `extractText` method of the Syncfusion PdfViewer control enables text extraction from one or more pages in a PDF document. This method is useful for retrieving the text content along with its associated data, such as the bounds of each text element.
-
-### extractText Method
-The extractText method retrieves text data from the specified page(s) of a PDF document. It can extract text from one page, a range of pages, or even provide detailed text data, depending on the options specified.
-
-#### Parameters:
-**startIndex:** The starting page index for text extraction (0-based index).
-
-**endIndex Or isOptions:** This can either be the ending page index for the text extraction (for extracting from multiple pages) or an option specifying text extraction criteria for a single page.
-
-**options (optional):** Specifies additional options, such as extracting plain text `TextOnly` or more detailed text data `TextAndBounds`. You can specify various options for text extraction. These options determine whether you want to extract plain text, text with bounds, or detailed text data.
-
-***TextOnly:*** Extracts only the plain text content without bounds or additional information.
-
-***TextAndBounds:*** Extracts text content along with its bounds (coordinates) within the PDF.
-
-#### Returns:
-The method returns a Promise that resolves to an object containing two properties:
-
-**textData:** An array of TextDataSettingsModel objects, each representing the details of the extracted text (including bounds, page text, etc.).
-
-**pageText:** A concatenated string of plain text extracted from the specified page(s).
-
-### Usage of extractText in Syncfusion PdfViewer Control
-Here is an example that demonstrates how to use the extractText method along with event handling:
-
-```html
-
-
-```
-```ts
-import { PdfViewer, TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields, PageInfoModel, ExtractTextOption } from '@syncfusion/ej2-pdfviewer';
-
-// Inject required modules
-PdfViewer.Inject(TextSelection, TextSearch, Print, Navigation, Toolbar, Magnification, Annotation, FormDesigner, FormFields);
-
-const viewer: PdfViewer = new PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib",
-});
-viewer.appendTo("#PdfViewer");
-
-// Event Listener for Extract Text from Single Page
-const extractTextButton = document.getElementById('extractText');
-if (extractTextButton) {
-extractTextButton.addEventListener('click', function () {
- viewer.extractText(1, ExtractTextOption.TextOnly).then((val) => {
- console.log('Extracted Text from Page 1:');
- console.log(val); // Logs the extracted text from page 1
- });
-});
-}
-
-// Event Listener for Extract Text from Multiple Pages
-const extractTextButtons = document.getElementById('extractTexts');
-if (extractTextButtons) {
-extractTextButtons.addEventListener('click', function () {
- viewer.extractText(0, 2, ExtractTextOption.TextOnly).then((val) => {
- console.log('Extracted Text from Pages 0 to 2:');
- console.log(val); // Logs the extracted text from pages 0 to 2
- });
-});
-}
-```
-
-#### Explanation:
-**Single Page Extraction:** The first `extractText` call extracts text from page 1 (`startIndex = 1`), using the 'TextOnly' option for plain text extraction.
-
-**Multiple Pages Extraction:** The second extractText call extracts text from pages 0 through 2 (`startIndex = 0, endIndex = 2`), using the `TextOnly` option for plain text extraction.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/find-text-async-js.md b/ej2-javascript/pdfviewer/how-to/find-text-async-js.md
deleted file mode 100644
index 95c5bc57f..000000000
--- a/ej2-javascript/pdfviewer/how-to/find-text-async-js.md
+++ /dev/null
@@ -1,85 +0,0 @@
----
-layout: post
-title: Find Text Async in Syncfusion ##Platform_Name## Pdfviewer Control | Syncfusion
-description: Learn about the `findTextAsync` in Syncfusion #Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Find Text Async
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-
-# Find Text using findTextAsync Method in Syncfusion ##Platform_Name## PdfViewer Control
-
-The findTextAsync method in the Syncfusion PdfViewer control allows you to search for specific text or an array of strings asynchronously within a PDF document. The method returns the bounding rectangles for each occurrence of the search term, allowing you to find and work with text positions in the document.
-
-Here is an example of how you can use the **findTextAsync** method:
-
-Example 1: Search for a single string ('pdf') with a case-insensitive search across all pages
-
-```html
-
-
-```
-```js
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: "https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib",
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
- pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('findText').addEventListener('click', function () {
- pdfviewer.textSearchModule.findTextAsync('pdf', false).then(res => {
- console.log(res); // Logs the search result for the term 'pdf'
- });
-});
-```
-Example 2: Search for multiple strings (['pdf', 'the']) with a case-insensitive search across all pages
-```js
-document.getElementById('findTexts').addEventListener('click', function () {
- pdfviewer.textSearchModule.findTextAsync(['pdf', 'the'], false).then(res => {
- console.log(res); // Logs the search result for the terms 'pdf' and 'the'
- });
-});
-```
-
-### Description:
-
-The `findTextAsync` method is designed for performing an asynchronous text search within a PDF document. You can use it to search for a single string or multiple strings, with the ability to control case sensitivity. By default, the search is applied to all pages of the document. However, you can adjust this behavior by specifying the page number (pageIndex), which allows you to search only a specific page if needed.
-
-### Parameters:
-
-**text (string | string[]):**
-
-The text or an array of texts you want to search for in the document.
-
-**matchCase (boolean):**
-
-Indicates whether the search should be case-sensitive.
-When set to true, the search will match the exact case.
-When set to false, the search will ignore case differences.
-
-**pageIndex (optional, number):**
-
-Specifies the page number (zero-based index) to search within the document.
-If not provided, the search will be performed across all pages in the document.
-For example, passing 0 would search only the first page of the document.
-
-### Example Workflow:
-
-**findTextAsync('pdf', false):**
-This will search for the term "pdf" in a case-insensitive manner across all pages of the document.
-
-**findTextAsync(['pdf', 'the'], false):**
-This will search for the terms "pdf" and "the" in a case-insensitive manner across all pages of the document.
-
-**findTextAsync('pdf', false, 0):**
-This will search for the term "pdf" in a case-insensitive manner only on the first page (page 0).
-
-**findTextAsync(['pdf', 'the'], false, 1):**
-This will search for the terms "pdf" and "the" in a case-insensitive manner only on the second page (page 1).
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/find-text-async-ts.md b/ej2-javascript/pdfviewer/how-to/find-text-async-ts.md
deleted file mode 100644
index e551aab8d..000000000
--- a/ej2-javascript/pdfviewer/how-to/find-text-async-ts.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-layout: post
-title: Find Text Async in Syncfusion ##Platform_Name## Pdfviewer Control | Syncfusion
-description: Learn about the `findTextAsync` in Syncfusion #Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Find Text Async
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-
-# Find Text using findTextAsync Method in Syncfusion ##Platform_Name## PdfViewer Control
-
-The findTextAsync method in the Syncfusion PdfViewer control allows you to search for specific text or an array of strings asynchronously within a PDF document. The method returns the bounding rectangles for each occurrence of the search term, allowing you to find and work with text positions in the document.
-
-Here is an example of how you can use the **findTextAsync** method:
-
-Example 1: Search for a single string ('pdf') with a case-insensitive search across all pages
-
-```html
-
-
-```
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
- TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer,
- ExtractTextOption} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
- TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer);
-
-let viewer: PdfViewer = new PdfViewer();
-viewer.documentPath= 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-viewer.resourceUrl= "https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2-pdfviewer-lib";
-viewer.appendTo("#PdfViewer");
-
-
-const findTextButton = document.getElementById('findText');
-if (findTextButton) {
- findTextButton.addEventListener('click', function () {
- viewer.textSearchModule.findTextAsync('pdf', false).then(res => {
- console.log(res); // Logs the search result for the term 'pdf'
- });
- });
-}
-```
-Example 2: Search for multiple strings (['pdf', 'the']) with a case-insensitive search across all pages
-```ts
-const findTextButtons = document.getElementById('findTexts');
-if(findTextButtons){
- findTextButtons.addEventListener('click', function () {
- viewer.textSearchModule.findTextAsync(['pdf', 'the'], false).then(res => {
- console.log(res); // Logs the search result for the terms 'pdf' and 'the'
- });
- });
-}
-```
-
-### Description:
-
-The `findTextAsync` method is designed for performing an asynchronous text search within a PDF document. You can use it to search for a single string or multiple strings, with the ability to control case sensitivity. By default, the search is applied to all pages of the document. However, you can adjust this behavior by specifying the page number (pageIndex), which allows you to search only a specific page if needed.
-
-### Parameters:
-
-**text (string | string[]):**
-
-The text or an array of texts you want to search for in the document.
-
-**matchCase (boolean):**
-
-Indicates whether the search should be case-sensitive.
-When set to true, the search will match the exact case.
-When set to false, the search will ignore case differences.
-
-**pageIndex (optional, number):**
-
-Specifies the page number (zero-based index) to search within the document.
-If not provided, the search will be performed across all pages in the document.
-For example, passing 0 would search only the first page of the document.
-
-### Example Workflow:
-
-**findTextAsync('pdf', false):**
-This will search for the term "pdf" in a case-insensitive manner across all pages of the document.
-
-**findTextAsync(['pdf', 'the'], false):**
-This will search for the terms "pdf" and "the" in a case-insensitive manner across all pages of the document.
-
-**findTextAsync('pdf', false, 0):**
-This will search for the term "pdf" in a case-insensitive manner only on the first page (page 0).
-
-**findTextAsync(['pdf', 'the'], false, 1):**
-This will search for the terms "pdf" and "the" in a case-insensitive manner only on the second page (page 1).
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/focus-on-a-form-field-after-loading.md b/ej2-javascript/pdfviewer/how-to/focus-on-a-form-field-after-loading.md
deleted file mode 100644
index bf9ee4d99..000000000
--- a/ej2-javascript/pdfviewer/how-to/focus-on-a-form-field-after-loading.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Focus on a form field after loading in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Focus on a form field after loading in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Focus on a form field after loading
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Focus on a form field after loading in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to focus to the respective form field using the [`focusFormField()`](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#focusformfield) API.
-
-The following steps are used to focus to the respective form field.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code sample to focus to the respective form field while loading as well as in a button click.
-
-```
-
-```
-
-```ts
-//Event triggers while clicking the FocusFormField button.
-document.getElementById('click').addEventListener('click', function () {
- var formField = viewer.retrieveFormFields();
- //API to bring the form fields in focus.
- viewer.focusFormField(formField[1]);
-});
-//Event triggers while loading the document.
-viewer.documentLoad = (args) => {
- var formField = viewer.retrieveFormFields();
- //API to bring the form fields in focus.
- viewer.focusFormField(formField[1]);
-};
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Form%20Fields/Focusing%20the%20form%20fields%20while%20loading).
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/get-base64-js.md b/ej2-javascript/pdfviewer/how-to/get-base64-js.md
deleted file mode 100644
index 3466d87fd..000000000
--- a/ej2-javascript/pdfviewer/how-to/get-base64-js.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: post
-title: Retrieving Base64 Value in JavaScript PdfViewer | Syncfusion
-description: Learn how to retrieve the Base64 value of a loaded PDF document in the Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Retrieving Base64 Value from a PDF in PDF Viewer
-
-### Overview
-
-This guide demonstrates how to fetch the base64-encoded value of a PDF document loaded in the Syncfusion PDF Viewer using JavaScript. This is useful for sending the PDF as a base64 string or processing it in the front end.
-
-### How to Retrieve Base64 Value
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-
-**Step 2:** Create a Button in Your HTML File
-
-Add a button element in your HTML file that will trigger the conversion to a base64 string.
-
-```html
-
-
-```
-
-**Step 3:** Add a Button Click Event Listener
-
-Add an event listener to the button to trigger the base64 retrieval function.
-
-```js
-document.getElementById('getBase64').addEventListener('click', function() {
- base64ofloadedDocument(); // Call the function to get the Base64 string
-});
-```
-
-**Step 4:** Retrieve Base64 of the Loaded Document
-
-Create a function that uses saveAsBlob, and convert the blob to a base64 string.
-
-```js
-function base64ofloadedDocument() {
- pdfviewer.saveAsBlob().then(function(value) {
- var data = value;
- var reader = new FileReader();
- reader.readAsDataURL(data);
- reader.onload = function() {
- var base64data = reader.result;
- console.log(base64data); // Outputs the base64 string of the PDF
- };
- });
-}
-```
-### Conclusion
-
-By implementing these steps, you can convert a PDF document loaded in the Syncfusion PDF Viewer to a base64 string on button click, facilitating the manipulation or transfer of PDF data as needed.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/get-base64-ts.md b/ej2-javascript/pdfviewer/how-to/get-base64-ts.md
deleted file mode 100644
index 900a075aa..000000000
--- a/ej2-javascript/pdfviewer/how-to/get-base64-ts.md
+++ /dev/null
@@ -1,62 +0,0 @@
----
-layout: post
-title: Retrieving Base64 Value in TypeScript PdfViewer | Syncfusion
-description: Learn how to retrieve the Base64 value of a loaded PDF document in the Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Retrieving Base64 Value from a PDF in PDF Viewer
-
-### Overview
-
-This guide demonstrates how to fetch the base64-encoded value of a PDF document loaded in the Syncfusion PDF Viewer using Typescript. This is useful for sending the PDF as a base64 string or processing it in the front end.
-
-### How to Retrieve Base64 Value
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-
-**Step 2:** Create a Button in Your HTML File
-
-Add a button element in your HTML file that will trigger the conversion to a base64 string.
-
-```html
-
-
-```
-
-**Step 3:** Add a Button Click Event Listener
-
-Add an event listener to the button to trigger the base64 retrieval function.
-
-```ts
-document.getElementById('getBase64')?.addEventListener('click', base64ofloadedDocument);
-```
-
-**Step 4:** Retrieve Base64 of the Loaded Document
-
-Create a function that uses saveAsBlob, and convert the blob to a base64 string.
-
-```ts
-// Function to get Base64 of the loaded document
-function base64ofloadedDocument() {
- pdfviewer.saveAsBlob().then((blob) => {
- const reader = new FileReader();
- reader.onload = () => {
- const base64data = reader.result;
- console.log(base64data);
- };
- // Read the blob as a data URL to get Base64
- reader.readAsDataURL(blob);
- })
-}
-```
-### Conclusion
-
-By implementing these steps, you can convert a PDF document loaded in the Syncfusion PDF Viewer to a base64 string on button click, facilitating the manipulation or transfer of PDF data as needed.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/get-page-info-js.md b/ej2-javascript/pdfviewer/how-to/get-page-info-js.md
deleted file mode 100644
index e71444ee1..000000000
--- a/ej2-javascript/pdfviewer/how-to/get-page-info-js.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: post
-title: Get Page Info in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Get Page Info in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Get Page Info ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to retrieves the information of a specified page in the viewer using the **getPageInfo()** method.This provides essential information such as the height, width and rotation.
-
-The following steps are used to getPageInfo.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** The following code snippet to implement the functionality for retrieving height, width and rotation of a specified page in the viewer.
-
-```html
-
-
-
-```
-
-```javascript
-
-document.getElementById('getPageInfo').addEventListener('click', function() {
- // Set the page index for which info is required
- let pageIndex=0;
- // To Retrieve and log the page information
- console.log(pdfviewer.getPageInfo(pageIndex));
- // To Log the specific page information details to the console
- const pageInfo = pdfviewer.getPageInfo(pageIndex);
- console.log(`Page Info for Page Index ${pageIndex}:`);
- console.log(`Height: ${pageInfo.height}`);
- console.log(`Width: ${pageInfo.width}`);
- console.log(`Rotation: ${pageInfo.rotation}`);
-});
-
-```
-
-By following these steps, you can successfully integrate and use the get page info API in the EJ2 PDF Viewer.
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/get-page-info-ts.md b/ej2-javascript/pdfviewer/how-to/get-page-info-ts.md
deleted file mode 100644
index f52bdf322..000000000
--- a/ej2-javascript/pdfviewer/how-to/get-page-info-ts.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-layout: post
-title: Get Page Info in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Get Page Info in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Get Page Info ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to retrieves the information of a specified page in the viewer using the **getPageInfo()** method.This provides essential information such as the height, width and rotation.
-
-The following steps are used to getPageInfo.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** The following code snippet to implement the functionality for retrieving height, width and rotation of a specified page in the viewer.
-
-```html
-
-
-
-```
-
-```ts
-
-// Event listener for getting page information
-document.getElementById('getPageInfo')?.addEventListener('click', function() {
- // Set the page index for which info is required
- let pageIndex: number = 0;
-
- // To Retrieve and log the page information
- console.log(pdfviewer.getPageInfo(pageIndex));
-
- // Log the specific page information details to the console
- const pageInfo:PageInfoModel = pdfviewer.getPageInfo(pageIndex);
- console.log(`Page Info for Page Index ${pageIndex}:`);
- console.log(`Height: ${pageInfo.height}`);
- console.log(`Width: ${pageInfo.width}`);
- console.log(`Rotation: ${pageInfo.rotation}`);
- });
-
-```
-
-By following these steps, you can successfully integrate and use the get page info API in the EJ2 PDF Viewer.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/highlight-underline-strikeout-text.md b/ej2-javascript/pdfviewer/how-to/highlight-underline-strikeout-text.md
deleted file mode 100644
index f4884f963..000000000
--- a/ej2-javascript/pdfviewer/how-to/highlight-underline-strikeout-text.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: post
-title: Highlight underline strikeout text in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Highlight underline strikeout text in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Highlight underline strikeout text
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Highlight underline strikeout text in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to highlight, underline and strikeout text in the loaded PDF document programmatically using the [**setAnnotationMode()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/annotation/#setannotationmode) method.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to highlight, underline, and strikeout text in index.ts file with button click events.
-
-```ts
-
- document.getElementById('setHighlight').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('Highlight');
- });
- document.getElementById('setUnderline').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('Underline');
- });
- document.getElementById('setStrikeout').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('Strikethrough');
- });
- document.getElementById('setNone').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('None');
- });
-
-```
-
-Find the Sample [how to highlight, underline and strikeout text programmatically](https://stackblitz.com/edit/rmfrlw-jgx99q?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/highlight-underline-strikeout.md b/ej2-javascript/pdfviewer/how-to/highlight-underline-strikeout.md
deleted file mode 100644
index 374269d2c..000000000
--- a/ej2-javascript/pdfviewer/how-to/highlight-underline-strikeout.md
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: post
-title: Highlight underline strikeout in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Highlight underline strikeout in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Highlight underline strikeout
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Highlight underline strikeout in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to highlight, underline and strikeout text in the loaded PDF document programmatically using the [**setAnnotationMode()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/annotation/#setannotationmode) method.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to highlight, underline, and strikeout text in the loaded document with button click events.
-
-```javascript
-
- document.getElementById('setHighlight').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('Highlight');
- });
- document.getElementById('setUnderline').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('Underline');
- });
- document.getElementById('setStrikeout').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('Strikethrough');
- });
- document.getElementById('setNone').addEventListener('click', ()=> {
- viewer.annotation.setAnnotationMode('None');
- });
-
-```
-
-Find the Sample [how to highlight, underline and strikeout text programmatically](https://stackblitz.com/edit/bf3k6y?devtoolsheight=33&file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/identify-added-annotation-mode.md b/ej2-javascript/pdfviewer/how-to/identify-added-annotation-mode.md
deleted file mode 100644
index e2ef4c387..000000000
--- a/ej2-javascript/pdfviewer/how-to/identify-added-annotation-mode.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: post
-title: Identify added annotation mode in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Identify added annotation mode in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Identify added annotation mode
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Identify added annotation mode in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to identify whether the added annotations in PDF document is UI drawn, imported or existing annotation. Annotation mode can be identified using the [**annotationAddMode**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationadd) property of [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** The following code snippet explains how to identify added annotation mode.
-
-```ts
-
-viewer.annotationSelect =(args) =>{
-console.log(args.annotationAddMode);
-}
-
-```
-
-Find the Sample [how to identify added annotation mode](https://stackblitz.com/edit/nldhsr?devtoolsheight=33&file=index.ts)
diff --git a/ej2-javascript/pdfviewer/how-to/identify-added-annotation.md b/ej2-javascript/pdfviewer/how-to/identify-added-annotation.md
deleted file mode 100644
index 57ba077f6..000000000
--- a/ej2-javascript/pdfviewer/how-to/identify-added-annotation.md
+++ /dev/null
@@ -1,28 +0,0 @@
----
-layout: post
-title: Identify added annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Identify added annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Identify added annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Identify added annotation in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to identify whether the added annotations in PDF document is UI drawn, imported or existing annotation. Annotation mode can be identified using the [**annotationAddMode**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationadd) property of **annotationSelect**9(https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** The following code snippet explains how to identify added annotation mode.
-
-```javascript
-
-viewer.annotationSelect =(args) =>{
-console.log(args.annotationAddMode);
-}
-
-```
-
-Find the Sample [how to identify added annotation mode](https://stackblitz.com/edit/xntzu8?devtoolsheight=33&file=index.js)
diff --git a/ej2-javascript/pdfviewer/how-to/images/Coreapp.png b/ej2-javascript/pdfviewer/how-to/images/Coreapp.png
deleted file mode 100644
index f13eebee1..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/Coreapp.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/Coreapp1.png b/ej2-javascript/pdfviewer/how-to/images/Coreapp1.png
deleted file mode 100644
index 1cca37635..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/Coreapp1.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/CoreappCreate.png b/ej2-javascript/pdfviewer/how-to/images/CoreappCreate.png
deleted file mode 100644
index 6badfd7a5..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/CoreappCreate.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/ErrorinformationuintheNetworkTab.png b/ej2-javascript/pdfviewer/how-to/images/ErrorinformationuintheNetworkTab.png
deleted file mode 100644
index 8838f9a62..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/ErrorinformationuintheNetworkTab.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/Nugetpackage.png b/ej2-javascript/pdfviewer/how-to/images/Nugetpackage.png
deleted file mode 100644
index ca97a8dc0..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/Nugetpackage.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/Start.png b/ej2-javascript/pdfviewer/how-to/images/Start.png
deleted file mode 100644
index 3e1868305..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/Start.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/add-revised.png b/ej2-javascript/pdfviewer/how-to/images/add-revised.png
deleted file mode 100644
index 0e0a24bae..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/add-revised.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/add-shapes.png b/ej2-javascript/pdfviewer/how-to/images/add-shapes.png
deleted file mode 100644
index 09ab8ef22..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/add-shapes.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/add-signature.png b/ej2-javascript/pdfviewer/how-to/images/add-signature.png
deleted file mode 100644
index 3bf8fe062..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/add-signature.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/add-sticky-notes.png b/ej2-javascript/pdfviewer/how-to/images/add-sticky-notes.png
deleted file mode 100644
index d86780c44..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/add-sticky-notes.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/add-text-markup.png b/ej2-javascript/pdfviewer/how-to/images/add-text-markup.png
deleted file mode 100644
index 7a09d8d5a..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/add-text-markup.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/addformfield.gif b/ej2-javascript/pdfviewer/how-to/images/addformfield.gif
deleted file mode 100644
index 88f70cbb4..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/addformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/adding-signature.png b/ej2-javascript/pdfviewer/how-to/images/adding-signature.png
deleted file mode 100644
index fd92aa760..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/adding-signature.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/after-enabling-annotation-toolbar.png b/ej2-javascript/pdfviewer/how-to/images/after-enabling-annotation-toolbar.png
deleted file mode 100644
index 2387c4035..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/after-enabling-annotation-toolbar.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/api-controller.png b/ej2-javascript/pdfviewer/how-to/images/api-controller.png
deleted file mode 100644
index 4afff0902..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/api-controller.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/apicontroller.png b/ej2-javascript/pdfviewer/how-to/images/apicontroller.png
deleted file mode 100644
index 7cdaf60b1..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/apicontroller.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/appearanceproperties.png b/ej2-javascript/pdfviewer/how-to/images/appearanceproperties.png
deleted file mode 100644
index 14d99c667..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/appearanceproperties.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/azure_pdfviewer.png b/ej2-javascript/pdfviewer/how-to/images/azure_pdfviewer.png
deleted file mode 100644
index e3fc61964..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/azure_pdfviewer.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/azure_publish.png b/ej2-javascript/pdfviewer/how-to/images/azure_publish.png
deleted file mode 100644
index cc48af57b..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/azure_publish.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/azure_target.png b/ej2-javascript/pdfviewer/how-to/images/azure_target.png
deleted file mode 100644
index 8a15cd104..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/azure_target.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/bookmark.png b/ej2-javascript/pdfviewer/how-to/images/bookmark.png
deleted file mode 100644
index bab491c45..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/bookmark.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/change-property.png b/ej2-javascript/pdfviewer/how-to/images/change-property.png
deleted file mode 100644
index edb1b772d..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/change-property.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/clipboardformfield.png b/ej2-javascript/pdfviewer/how-to/images/clipboardformfield.png
deleted file mode 100644
index e27af034d..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/clipboardformfield.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/close-comment-panel.png b/ej2-javascript/pdfviewer/how-to/images/close-comment-panel.png
deleted file mode 100644
index 26af17938..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/close-comment-panel.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/comment-panel.png b/ej2-javascript/pdfviewer/how-to/images/comment-panel.png
deleted file mode 100644
index 61c066ec0..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/comment-panel.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/default-template.png b/ej2-javascript/pdfviewer/how-to/images/default-template.png
deleted file mode 100644
index b82ddc737..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/default-template.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/delete-icon.png b/ej2-javascript/pdfviewer/how-to/images/delete-icon.png
deleted file mode 100644
index 9c99dc690..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/delete-icon.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/delete_button.png b/ej2-javascript/pdfviewer/how-to/images/delete_button.png
deleted file mode 100644
index 3642d2e50..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/delete_button.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/download.png b/ej2-javascript/pdfviewer/how-to/images/download.png
deleted file mode 100644
index aa3660027..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/download.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/dragformfield.gif b/ej2-javascript/pdfviewer/how-to/images/dragformfield.gif
deleted file mode 100644
index 97666468f..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/dragformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/dropdownproperties.png b/ej2-javascript/pdfviewer/how-to/images/dropdownproperties.png
deleted file mode 100644
index 9bb5dc3dd..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/dropdownproperties.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/edit-annotation.png b/ej2-javascript/pdfviewer/how-to/images/edit-annotation.png
deleted file mode 100644
index 1b00dad78..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/edit-annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/edit_color.png b/ej2-javascript/pdfviewer/how-to/images/edit_color.png
deleted file mode 100644
index 1c335dd0b..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/edit_color.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/edit_opacity.png b/ej2-javascript/pdfviewer/how-to/images/edit_opacity.png
deleted file mode 100644
index 1c813aca2..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/edit_opacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/generalproperties.png b/ej2-javascript/pdfviewer/how-to/images/generalproperties.png
deleted file mode 100644
index e0cd4ee89..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/generalproperties.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/highlight_button.PNG b/ej2-javascript/pdfviewer/how-to/images/highlight_button.PNG
deleted file mode 100644
index 742cf4412..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/highlight_button.PNG and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/highlight_context.png b/ej2-javascript/pdfviewer/how-to/images/highlight_context.png
deleted file mode 100644
index 43e5f5f88..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/highlight_context.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/ink-annotation.png b/ej2-javascript/pdfviewer/how-to/images/ink-annotation.png
deleted file mode 100644
index 0699edb19..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/ink-annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/link.png b/ej2-javascript/pdfviewer/how-to/images/link.png
deleted file mode 100644
index 6ff713700..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/link.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/navigation.png b/ej2-javascript/pdfviewer/how-to/images/navigation.png
deleted file mode 100644
index 143a0f0d4..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/navigation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/open-comment.png b/ej2-javascript/pdfviewer/how-to/images/open-comment.png
deleted file mode 100644
index 900069fad..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/open-comment.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/open-fillcolor.png b/ej2-javascript/pdfviewer/how-to/images/open-fillcolor.png
deleted file mode 100644
index 5eaa67806..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/open-fillcolor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/open-ink.png b/ej2-javascript/pdfviewer/how-to/images/open-ink.png
deleted file mode 100644
index c52125247..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/open-ink.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/open-radius.png b/ej2-javascript/pdfviewer/how-to/images/open-radius.png
deleted file mode 100644
index 0dd083a9c..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/open-radius.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/open-stamp.png b/ej2-javascript/pdfviewer/how-to/images/open-stamp.png
deleted file mode 100644
index 74ccf1664..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/open-stamp.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/openexistingpdf.gif b/ej2-javascript/pdfviewer/how-to/images/openexistingpdf.gif
deleted file mode 100644
index b88e0f096..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/openexistingpdf.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/pan.png b/ej2-javascript/pdfviewer/how-to/images/pan.png
deleted file mode 100644
index 3d5cc4ac1..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/pan.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/pdfviewer-dependency.png b/ej2-javascript/pdfviewer/how-to/images/pdfviewer-dependency.png
deleted file mode 100644
index 8de1ed0df..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/pdfviewer-dependency.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/print.png b/ej2-javascript/pdfviewer/how-to/images/print.png
deleted file mode 100644
index 588950330..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/print.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/printformfield.gif b/ej2-javascript/pdfviewer/how-to/images/printformfield.gif
deleted file mode 100644
index 9365bf7fd..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/printformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/radius-annotation.png b/ej2-javascript/pdfviewer/how-to/images/radius-annotation.png
deleted file mode 100644
index 2559f6da8..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/radius-annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/resizeformfield.gif b/ej2-javascript/pdfviewer/how-to/images/resizeformfield.gif
deleted file mode 100644
index 06d97cf67..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/resizeformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/saveformfield.gif b/ej2-javascript/pdfviewer/how-to/images/saveformfield.gif
deleted file mode 100644
index b254a7df4..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/saveformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/search.png b/ej2-javascript/pdfviewer/how-to/images/search.png
deleted file mode 100644
index b8246ab69..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/search.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/select-text.png b/ej2-javascript/pdfviewer/how-to/images/select-text.png
deleted file mode 100644
index b7d119b38..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/select-text.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/selection.png b/ej2-javascript/pdfviewer/how-to/images/selection.png
deleted file mode 100644
index 901a0cd72..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/selection.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/solution-explorer.png b/ej2-javascript/pdfviewer/how-to/images/solution-explorer.png
deleted file mode 100644
index 11d012579..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/solution-explorer.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/sticky-notes-in-page.png b/ej2-javascript/pdfviewer/how-to/images/sticky-notes-in-page.png
deleted file mode 100644
index 3a96cc714..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/sticky-notes-in-page.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/strikethrough_button.png b/ej2-javascript/pdfviewer/how-to/images/strikethrough_button.png
deleted file mode 100644
index c416e49cd..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/strikethrough_button.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/strikethrough_context.png b/ej2-javascript/pdfviewer/how-to/images/strikethrough_context.png
deleted file mode 100644
index 0bcea7b82..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/strikethrough_context.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/text_markup_annotation.png b/ej2-javascript/pdfviewer/how-to/images/text_markup_annotation.png
deleted file mode 100644
index 7165f1e11..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/text_markup_annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/thumbnail.png b/ej2-javascript/pdfviewer/how-to/images/thumbnail.png
deleted file mode 100644
index 99c63d926..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/thumbnail.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/toc.png b/ej2-javascript/pdfviewer/how-to/images/toc.png
deleted file mode 100644
index 617e1ea9d..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/toc.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/toolbar.png b/ej2-javascript/pdfviewer/how-to/images/toolbar.png
deleted file mode 100644
index e899e9678..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/toolbar.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/underline_button.png b/ej2-javascript/pdfviewer/how-to/images/underline_button.png
deleted file mode 100644
index a93d3b86f..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/underline_button.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/underline_context.png b/ej2-javascript/pdfviewer/how-to/images/underline_context.png
deleted file mode 100644
index 2aab9892e..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/underline_context.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/viewer-dependency.png b/ej2-javascript/pdfviewer/how-to/images/viewer-dependency.png
deleted file mode 100644
index 79564dbf4..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/viewer-dependency.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/images/zoom.png b/ej2-javascript/pdfviewer/how-to/images/zoom.png
deleted file mode 100644
index 69adbf988..000000000
Binary files a/ej2-javascript/pdfviewer/how-to/images/zoom.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/how-to/import-annotation.md b/ej2-javascript/pdfviewer/how-to/import-annotation.md
deleted file mode 100644
index dde45c4da..000000000
--- a/ej2-javascript/pdfviewer/how-to/import-annotation.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: post
-title: Import annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Import annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Import annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Import annotation in ##Platform_Name## Pdfviewer control
-
-To import annotations into a Syncfusion PDF Viewer when loading a PDF document, you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method of the PDF Viewer. This method allows you to import annotations from a file or a string in the PDF Viewer.
-
-Here is an example of how you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method to import annotations when loading a PDF document:
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to import annotations on load PDF document.
-
-```javascript
-
-document.getElementById('importAnnot').addEventListener('click', ()=> {
-viewer.importAnnotation({
- pdfAnnotation: {
- '0': {
- shapeAnnotation: [
- {
- ShapeAnnotationType: 'Square',
- Author: 'Guest',
- AnnotationSelectorSettings: {
- selectionBorderColor: '',
- resizerBorderColor: 'black',
- resizerFillColor: '#FF4081',
- resizerSize: 8,
- selectionBorderThickness: 1,
- resizerShape: 'Square',
- selectorLineDashArray: [],
- resizerLocation: 3,
- resizerCursorType: null
- },
- ModifiedDate: '4/22/2021, 10:33:04 AM',
- Subject: 'Rectangle',
- Note: '',
- IsCommentLock: false,
- StrokeColor: 'rgba(255,0,0,1)',
- FillColor: 'rgba(255,255,255,0)',
- Opacity: 1,
- Bounds: {
- X: 124,
- Y: 76,
- Width: 202,
- Height: 154,
- Location: { X: 124, Y: 76 },
- Size: { IsEmpty: false, Width: 202, Height: 154 },
- Left: 124,
- Top: 76,
- Right: 326,
- Bottom: 230
- },
- Thickness: 2,
- BorderStyle: 'Solid',
- BorderDashArray: 0,
- RotateAngle: 'RotateAngle0',
- IsCloudShape: false,
- CloudIntensity: 0,
- RectangleDifference: null,
- VertexPoints: null,
- LineHeadStart: null,
- LineHeadEnd: null,
- IsLocked: false,
- AnnotName: 'e9a14dbe-5d09-4226-329e-c6edab201284',
- Comments: null,
- State: '',
- StateModel: '',
- AnnotType: 'shape',
- EnableShapeLabel: false,
- LabelContent: null,
- LabelFillColor: null,
- LabelBorderColor: null,
- FontColor: null,
- FontSize: 0,
- CustomData: null,
- LabelBounds: {
- X: 0,
- Y: 0,
- Width: 0,
- Height: 0,
- Location: { X: 0, Y: 0 },
- Size: { IsEmpty: true, Width: 0, Height: 0 },
- Left: 0,
- Top: 0,
- Right: 0,
- Bottom: 0
- },
- LabelSettings: null,
- AnnotationSettings: {
- minWidth: 0,
- maxWidth: 0,
- minHeight: 0,
- maxHeight: 0,
- isLock: false,
- isPrint: true
- },
- AllowedInteractions: ['None'],
- IsPrint: true,
- ExistingCustomData: null
- },
- ]
- }
- }
- });
-});
-
-```
-
-In this example, the PDF Viewer is first used to load the PDF document from a file. The **importAnnotations()** method is then used to import annotations from a string. The imported annotations will be added to the PDF Viewer and displayed along with the document.
-
-Alternatively, we can import annotations from a file in JSON or XFDF format.
-
-```javascript
-
-document.getElementById('import').addEventListener('click', function() {
- viewer.importAnnotation('F# Succinctly.xfdf');
-});
-
-```
-
-Find the sample [how to import annotations on loading a PDF Document](https://stackblitz.com/edit/eus1kk?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/import-annotations.md b/ej2-javascript/pdfviewer/how-to/import-annotations.md
deleted file mode 100644
index 4ff5f082f..000000000
--- a/ej2-javascript/pdfviewer/how-to/import-annotations.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: post
-title: Import annotations in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Import annotations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Import annotations
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Import annotations in ##Platform_Name## Pdfviewer control
-
-To import annotations into a Syncfusion PDF Viewer when loading a PDF document, you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method of the PDF Viewer. This method allows you to import annotations from a file or a string in the PDF Viewer.
-
-Here is an example of how you can use the [**importAnnotations()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#importannotation) method to import annotations when loading a PDF document:
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to import annotations on load PDF document.
-
-```ts
-
-document.getElementById('importAnnot').addEventListener('click', ()=> {
-viewer.importAnnotation({
- pdfAnnotation: {
- '0': {
- shapeAnnotation: [
- {
- ShapeAnnotationType: 'Square',
- Author: 'Guest',
- AnnotationSelectorSettings: {
- selectionBorderColor: '',
- resizerBorderColor: 'black',
- resizerFillColor: '#FF4081',
- resizerSize: 8,
- selectionBorderThickness: 1,
- resizerShape: 'Square',
- selectorLineDashArray: [],
- resizerLocation: 3,
- resizerCursorType: null
- },
- ModifiedDate: '4/22/2021, 10:33:04 AM',
- Subject: 'Rectangle',
- Note: '',
- IsCommentLock: false,
- StrokeColor: 'rgba(255,0,0,1)',
- FillColor: 'rgba(255,255,255,0)',
- Opacity: 1,
- Bounds: {
- X: 124,
- Y: 76,
- Width: 202,
- Height: 154,
- Location: { X: 124, Y: 76 },
- Size: { IsEmpty: false, Width: 202, Height: 154 },
- Left: 124,
- Top: 76,
- Right: 326,
- Bottom: 230
- },
- Thickness: 2,
- BorderStyle: 'Solid',
- BorderDashArray: 0,
- RotateAngle: 'RotateAngle0',
- IsCloudShape: false,
- CloudIntensity: 0,
- RectangleDifference: null,
- VertexPoints: null,
- LineHeadStart: null,
- LineHeadEnd: null,
- IsLocked: false,
- AnnotName: 'e9a14dbe-5d09-4226-329e-c6edab201284',
- Comments: null,
- State: '',
- StateModel: '',
- AnnotType: 'shape',
- EnableShapeLabel: false,
- LabelContent: null,
- LabelFillColor: null,
- LabelBorderColor: null,
- FontColor: null,
- FontSize: 0,
- CustomData: null,
- LabelBounds: {
- X: 0,
- Y: 0,
- Width: 0,
- Height: 0,
- Location: { X: 0, Y: 0 },
- Size: { IsEmpty: true, Width: 0, Height: 0 },
- Left: 0,
- Top: 0,
- Right: 0,
- Bottom: 0
- },
- LabelSettings: null,
- AnnotationSettings: {
- minWidth: 0,
- maxWidth: 0,
- minHeight: 0,
- maxHeight: 0,
- isLock: false,
- isPrint: true
- },
- AllowedInteractions: ['None'],
- IsPrint: true,
- ExistingCustomData: null
- },
- ]
- }
- }
- });
-});
-
-```
-
-In this example, the PDF Viewer is first used to load the PDF document from a file. The **importAnnotations()** method is then used to import annotations from a string. The imported annotations will be added to the PDF Viewer and displayed along with the document.
-
-Alternatively, we can import annotations from a file in JSON or XFDF format.
-
-```ts
-
-document.getElementById('import').addEventListener('click', function() {
- viewer.importAnnotation('F# Succinctly.xfdf');
-});
-
-```
-
-Find the sample [how to import annotations on loading a PDF Document](https://stackblitz.com/edit/maxwf1-fqxduj?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/import-export-annotation-js.md b/ej2-javascript/pdfviewer/how-to/import-export-annotation-js.md
deleted file mode 100644
index 2eb87a717..000000000
--- a/ej2-javascript/pdfviewer/how-to/import-export-annotation-js.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-layout: post
-title: Import export annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Import export annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Import export annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Import export annotation in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to import annotations from objects or streams instead of loading it as a file. To import such annotation objects, the PDF Viewer control must export the PDF annotations as objects using the [**ExportAnnotationsAsObject()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#exportannotationsasobject) method. Only the annotation objects that are exported from the PDF Viewer can be imported.
-
-The following steps are used to import and export annotations in various formats such as objects, JSON, and XFDF.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to perform import and export annotation.
-
-```
-
-
-
-
-```
-
-```js
-
-//Export annotation as object.
-// Export annotations in XFDF format.
-document.getElementById('ExportXfdf').addEventListener('click', function () {
- viewer.exportAnnotation('Xfdf');
-});
-
-// Export annotations in JSON format.
-document.getElementById('ExportJSON').addEventListener('click', function () {
- viewer.exportAnnotation('Json');
-});
-
-// Export annotations as an object.
-document.getElementById('export').addEventListener('click', () => {
- viewer.exportAnnotationsAsObject().then(function(value) {
- exportObject = value;
- });
-});
-
-// Import annotations that were exported as objects.
-document.getElementById('import').addEventListener('click', () => {
- viewer.importAnnotation(JSON.parse(exportObject));
-});
-
-```
-
-[View Sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/import-export-annotation-ts.md b/ej2-javascript/pdfviewer/how-to/import-export-annotation-ts.md
deleted file mode 100644
index 4de2d0ce4..000000000
--- a/ej2-javascript/pdfviewer/how-to/import-export-annotation-ts.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: post
-title: Import export annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Import export annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Import export annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Import export annotation in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to import annotations from objects or streams instead of loading it as a file. To import such annotation objects, the PDF Viewer control must export the PDF annotations as objects using the [**ExportAnnotationsAsObject()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#exportannotationsasobject) method. Only the annotations objects that are exported from the PDF Viewer can be imported.
-
-The following steps are used to import and export annotations in various formats such as objects, JSON, and XFDF.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to perform import and export annotation.
-
-```
-
-
-
-
-```
-
-```ts
-enum AnnotationDataFormat {
- Json = 'Json',
- Xfdf = 'Xfdf'
- }
-
-let ExportXfdf = document.getElementById('ExportXfdf');
-if (ExportXfdf) {
- ExportXfdf.addEventListener('click', function () {
- // export the annotation in XFDF format.
- pdfviewer.exportAnnotation(AnnotationDataFormat.Xfdf);
- });
-}
-
-let ExportJSON = document.getElementById('ExportJSON');
-if (ExportJSON) {
- ExportJSON.addEventListener('click', function () {
- // export the annotation in JSON format.
- pdfviewer.exportAnnotation(AnnotationDataFormat.Json);
- });
-}
-
-let exportObject: any;
-let ExportAnnotationsAsObject = document.getElementById('export');
-//Export annotation as object.
-if (ExportAnnotationsAsObject) {
- ExportAnnotationsAsObject.addEventListener('click', () => {
- pdfviewer.exportAnnotationsAsObject().then(function (value: any) {
- exportObject = value;
- });
- });
-}
-
-let Import = document.getElementById('import');
-//Import annotation that are exported as object.
-if (Import) {
- Import.addEventListener('click', () => {
- pdfviewer.importAnnotation(JSON.parse(exportObject));
- });
-}
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/load-document.md b/ej2-javascript/pdfviewer/how-to/load-document.md
deleted file mode 100644
index ff50a5f38..000000000
--- a/ej2-javascript/pdfviewer/how-to/load-document.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-layout: post
-title: Load document in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Load document in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Load document
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Load document in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows to switch or load the PDF documents dynamically after the initial load operation. To achieve this, load the PDF document as a base64 string or file name in PDF Viewer control using the [**Load()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#load) method dynamically.
-
-The following steps are used to load the PDF document dynamically.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to load PDF document using base64 string.
-
-```
-
-```
-
-```ts
-// Load PDF document from Base64 string
-document.getElementById('load1').addEventListener('click', () => {
- viewer.load(
- 'data:application/pdf;base64,'+ AddBase64String, null);
-}
-```
-
-**Step 3:** Use the following code snippet to load PDF document using document name.
-
-```
-
-```
-
-```ts
-// Load PDF document using file name
-document.getElementById('load2').addEventListener('click', () => {
- viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
-});
-
-```
-
-Find the sample, [how to load PDF documents dynamically](https://stackblitz.com/edit/1tkfra-a8yca8?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/load-documents.md b/ej2-javascript/pdfviewer/how-to/load-documents.md
deleted file mode 100644
index 2c5c30062..000000000
--- a/ej2-javascript/pdfviewer/how-to/load-documents.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-layout: post
-title: Load documents in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Load documents in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Load documents
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Load documents in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows to switch or load the PDF documents dynamically after the initial load operation. To achieve this, load the PDF document as a base64 string or file name in PDF Viewer control using the [**Load()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#load) method dynamically.
-
-The following steps are used to load the PDF document dynamically.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to load PDF document using base64 string.
-
-```
-
-```
-
-```javascript
-// Load PDF document from Base64 string
-document.getElementById('load1').addEventListener('click', () => {
- viewer.load(
- 'data:application/pdf;base64,'+ AddBase64String, null);
-}
-```
-
-**Step 3:** Use the following code snippet to load PDF document using document name.
-
-```
-
-```
-
-```javascript
-// Load PDF document using file name
-document.getElementById('load2').addEventListener('click', () => {
- viewer.load('https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf', null);
-});
-
-```
-
-Find the sample, [how to load PDF documents dynamically](https://stackblitz.com/edit/w82pgd?devtoolsheight=33&file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/min-max-zoom-js.md b/ej2-javascript/pdfviewer/how-to/min-max-zoom-js.md
deleted file mode 100644
index a9ed2be73..000000000
--- a/ej2-javascript/pdfviewer/how-to/min-max-zoom-js.md
+++ /dev/null
@@ -1,103 +0,0 @@
----
-layout: post
-title: Minimum and Maximum Zoom in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Minimum and Maximum Zoom in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Minimum and Maximum Zoom Properties
-
-The Syncfusion PDF Viewer provides the ability to control zoom levels for viewing PDF documents. The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties enable developers to set the minimum and maximum zoom levels, ensuring a consistent and controlled viewing experience.
-
-### minZoom
-
-The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) property specifies the minimum zoom percentage allowed in the PDF Viewer. This ensures that users cannot zoom out beyond a certain limit, which helps maintain readability and performance. Developers can set the `minZoom` property programmatically, defining the minimum zoom level based on the application's requirements. This is particularly useful for preventing users from zooming out too much, which could make the content difficult to read.
-
-### maxZoom
-
-The [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) property defines the maximum zoom percentage allowed in the PDF Viewer. By setting this property, developers can prevent users from zooming in too much, helping to avoid performance issues and maintain a smooth viewing experience. The `maxZoom` property can be set programmatically to control the upper limit of the zoom level. This is useful for applications where extremely high zoom levels might degrade performance or user experience.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- maxZoom : 100,
- minZoom : 10,
-
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- maxZoom : 100,
- minZoom : 10,
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Restrict Zoom Percentage on Mobile Devices
-
-You can easily restrict the zoom percentage on mobile devices using the [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading on mobile devices. By controlling the zoom levels, you can provide a better user experience across different devices.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !viewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !viewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/min-max-zoom-ts.md b/ej2-javascript/pdfviewer/how-to/min-max-zoom-ts.md
deleted file mode 100644
index 8d4e74c38..000000000
--- a/ej2-javascript/pdfviewer/how-to/min-max-zoom-ts.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-layout: post
-title: Minimum and Maximum Zoom in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Minimum and Maximum Zoom in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Minimum and Maximum Zoom Properties
-
-The Syncfusion PDF Viewer provides the ability to control zoom levels for viewing PDF documents. The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties enable developers to set the minimum and maximum zoom levels, ensuring a consistent and controlled viewing experience.
-
-### minZoom
-
-The [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) property specifies the minimum zoom percentage allowed in the PDF Viewer. This ensures that users cannot zoom out beyond a certain limit, which helps maintain readability and performance. Developers can set the `minZoom` property programmatically, defining the minimum zoom level based on the application's requirements. This is particularly useful for preventing users from zooming out too much, which could make the content difficult to read.
-
-### maxZoom
-
-The [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) property defines the maximum zoom percentage allowed in the PDF Viewer. By setting this property, developers can prevent users from zooming in too much, helping to avoid performance issues and maintain a smooth viewing experience. The `maxZoom` property can be set programmatically to control the upper limit of the zoom level. This is useful for applications where extremely high zoom levels might degrade performance or user experience.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
-pdfviewer.maxZoom = 100;
-pdfviewer.minZoom = 10;
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.maxZoom = 100;
-pdfviewer.minZoom = 10;
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-#### Restrict Zoom Percentage on Mobile Devices
-
-You can easily restrict the zoom percentage on mobile devices using the [minZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#minzoom) and [maxZoom](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#maxzoom) properties. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading on mobile devices. By controlling the zoom levels, you can provide a better user experience across different devices.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation,
- LinkAnnotation, ThumbnailView, BookmarkView, TextSelection,
- TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
-import {Browser} from '@syncfusion/ej2-base';
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !pdfviewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation,
- LinkAnnotation, ThumbnailView, BookmarkView, TextSelection,
- TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
-import {Browser} from '@syncfusion/ej2-base';
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !pdfviewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/open-bookmark-js.md b/ej2-javascript/pdfviewer/how-to/open-bookmark-js.md
deleted file mode 100644
index 6e81c2ab0..000000000
--- a/ej2-javascript/pdfviewer/how-to/open-bookmark-js.md
+++ /dev/null
@@ -1,45 +0,0 @@
----
-layout: post
-title: Open Bookmark in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Open Bookmark in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open and Close Bookmark pane programmatically
-
-The PDF Viewer library allows you to open the Bookmark pane programmatically using the **openBookmarkPane()** method.
-
-The following steps are used to open the Bookmark.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Insert the following code snippet to implement the functionality for opening the Bookmark pane:
-
-```html
-
-```
-
-```js
-document.getElementById('openBookmark').addEventListener('click', () => {
- // Open Bookmark pane
- viewer.bookmarkViewModule.openBookmarkPane();
-});
-```
-
-Similarly, to close the Bookmark pane programmatically, employ the following code snippet:
-
-```html
-
-```
-
-```js
-document.getElementById('closeBookmark').addEventListener('click', () => {
- // close Bookmark pane
- viewer.bookmarkViewModule.closeBookmarkPane();
-});
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Open%20and%20Close%20bookmark%20pane)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/open-bookmark-ts.md b/ej2-javascript/pdfviewer/how-to/open-bookmark-ts.md
deleted file mode 100644
index 579041ddc..000000000
--- a/ej2-javascript/pdfviewer/how-to/open-bookmark-ts.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-layout: post
-title: Open Bookmark in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Open Bookmark in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open and Close Bookmark pane programmatically
-
-The PDF Viewer library allows you to open the Bookmark pane programmatically using the **openBookmarkPane()** method.
-
-The following steps are used to open the Bookmark.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Insert the following code snippet to implement the functionality for opening the Bookmark pane:
-
-```html
-
-```
-
-```ts
-document.getElementById('openBookmark').addEventListener('click', () => {
- // Open Bookmark pane
- viewer.bookmarkViewModule.openBookmarkPane();
-});
-```
-
-Similarly, to close the Bookmark pane programmatically, employ the following code snippet:
-
-```html
-
-```
-
-```ts
-document.getElementById('closeBookmark').addEventListener('click', () => {
- // close Bookmark pane
- viewer.bookmarkViewModule.closeBookmarkPane();
-});
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/open-thumbnail-js.md b/ej2-javascript/pdfviewer/how-to/open-thumbnail-js.md
deleted file mode 100644
index 28ba2768c..000000000
--- a/ej2-javascript/pdfviewer/how-to/open-thumbnail-js.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Open thumbnail js in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Open thumbnail js in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Open thumbnail js
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open thumbnail js in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to open the thumbnail pane programmatically using the [**openThumbnailPane()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/thumbnailView/#openthumbnailpane) method.
-
-The following steps are used to open the thumbnail.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to open thumbnail.
-
-```
-
-```
-
-```js
-document.getElementById('openThumbnail').addEventListener('click', () => {
- // Open Thumbnail pane
- viewer.thumbnailViewModule.openThumbnailPane();
-});
-```
-
-Find the sample, [how to open the thumbnail pane programmatically](https://stackblitz.com/edit/ejvemx?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/open-thumbnail.md b/ej2-javascript/pdfviewer/how-to/open-thumbnail.md
deleted file mode 100644
index b9e86e0f8..000000000
--- a/ej2-javascript/pdfviewer/how-to/open-thumbnail.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Open thumbnail in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Open thumbnail in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Open thumbnail
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open thumbnail in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to open the thumbnail pane programmatically using the [**openThumbnailPane()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/thumbnailView/#openthumbnailpane) method.
-
-The following steps are used to open the thumbnail.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Use the following code snippet to open thumbnail.
-
-```
-
-```
-
-```ts
-document.getElementById('openThumbnail').addEventListener('click', () => {
- // Open Thumbnail pane
- viewer.thumbnailViewModule.openThumbnailPane();
-});
-```
-
-Find the sample, [how to open the thumbnail pane programmatically](https://stackblitz.com/edit/hjoij3?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/overlapped-annotation.md b/ej2-javascript/pdfviewer/how-to/overlapped-annotation.md
deleted file mode 100644
index e94dd3537..000000000
--- a/ej2-javascript/pdfviewer/how-to/overlapped-annotation.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: post
-title: Overlapped annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Overlapped annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Overlapped annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Overlapped annotation in ##Platform_Name## Pdfviewer control
-
-To get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer, you can use the [**annotationCollection**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationcollection) property of [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.This event is triggered when the user clicks on an annotation in the PDF document.
-
-Here is an example of how you can use the **annotationSelect** event to get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer:
-
-```ts
-
-// Get overlapped annotation collections.
-viewer.annotationSelect =(args) =>{
- console.log(args.annotationCollection);
-}
-
-```
-
-Find the sample [how to get the overlapped annotations on mouse click](https://stackblitz.com/edit/9jn6bk-kmzqr5?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/overlapped-annotations.md b/ej2-javascript/pdfviewer/how-to/overlapped-annotations.md
deleted file mode 100644
index 30f2d87bd..000000000
--- a/ej2-javascript/pdfviewer/how-to/overlapped-annotations.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: post
-title: Overlapped annotations in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Overlapped annotations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Overlapped annotations
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Overlapped annotations in ##Platform_Name## Pdfviewer control
-
-To get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer, you can use the [**annotationCollection**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationcollection) property of [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event.This event is triggered when the user clicks on an annotation in the PDF document.
-
-Here is an example of how you can use the [**annotationSelect**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#annotationselect) event to get the overlapped annotations on a mouse click in a Syncfusion PDF Viewer:
-
-```javascript
-
-// Get overlapped annotation collections.
-viewer.annotationSelect =(args) =>{
- console.log(args.annotationCollection);
-}
-
-```
-
-Find the sample [how to get the overlapped annotations on mouse click](https://stackblitz.com/edit/a93cem-lprlap?devtoolsheight=33&file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-js.md b/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-js.md
deleted file mode 100644
index f767e0498..000000000
--- a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-js.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Rendering events in | Syncfusion
-description: Learn here all about the pageRenderInitiate and pageRenderComplete event in Syncfusion Javascript PDF Viewer component of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# PageRenderInitiate and PageRenderComplete event
-
-In Syncfusion PDF Viewer, [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) actions are events that occur during the rendering process of PDF documents.
-
-**pageRenderInitiate**
-
-The pageRenderInitiate event is triggered when the rendering of a page in the PDF document begins. This event provides developers with an opportunity to perform any necessary initialization or setup before the rendering of the page content commences. It can be utilized to prepare resources, set up rendering parameters, or execute any other actions required before the page rendering process starts.
-
-**pageRenderComplete**
-
-The pageRenderComplete event is triggered when the rendering of a page in the PDF document is completed. This event allows developers to perform cleanup tasks or finalize rendering-related processes after the rendering of the page content finishes. It can be used to release resources, finalize rendering settings, or handle any post-rendering tasks necessary for the application.
-
-```js
-pdfviewer.pageRenderInitiate = args => {
- // This method is called when the page rendering starts
- console.log('Rendering of pages started');
- console.log(args);
- };
-
-pdfviewer.pageRenderComplete = args => {
- // This method is called when the page rendering completes
- console.log('Rendering of pages completed');
- console.log(args);
-};
-```
-
-The provided code demonstrates how to subscribe to the [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) events in the Syncfusion PDF Viewer component.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/PageRenderStarted%20and%20PageRenderCompleted%20event)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-ts.md b/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-ts.md
deleted file mode 100644
index 96c577690..000000000
--- a/ej2-javascript/pdfviewer/how-to/pagerenderstarted-pagerendercompleted-ts.md
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: post
-title: Rendering events in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about pageRenderInitiate and pageRenderComplete event in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# PageRenderInitiate and pageRenderComplete event
-
-In Syncfusion PDF Viewer, [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) actions are events that occur during the rendering process of PDF documents.
-
-**PageRenderInitiate**
-
-The `pageRenderInitiate` event is triggered when the rendering of a page in the PDF document begins. This event provides developers with an opportunity to perform any necessary initialization or setup before the rendering of the page content commences. It can be utilized to prepare resources, set up rendering parameters, or execute any other actions required before the page rendering process starts.
-
-**PageRenderComplete**
-
-The `pageRenderComplete` event is triggered when the rendering of a page in the PDF document is completed. This event allows developers to perform cleanup tasks or finalize rendering-related processes after the rendering of the page content finishes. It can be used to release resources, finalize rendering settings, or handle any post-rendering tasks necessary for the application.
-
-
-```ts
-
-pdfviewer.pageRenderInitiate = (args: any) => {
- // This method is called when the page rendering starts
- console.log('Rendering of pages started');
- console.log(args);
- };
-
-pdfviewer.pageRenderComplete = (args: any) => {
- // This method is called when the page rendering completes
- console.log('Rendering of pages completed');
- console.log(args);
-};
-
-```
-
-The provided code demonstrates how to subscribe to the [pageRenderInitiate](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerenderinitiate) and [pageRenderComplete](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#pagerendercomplete) events in the Syncfusion PDF Viewer component.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/print-document.md b/ej2-javascript/pdfviewer/how-to/print-document.md
deleted file mode 100644
index 812337478..000000000
--- a/ej2-javascript/pdfviewer/how-to/print-document.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Print document in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Print document in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Print document
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Print document in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to print the PDF document programmatically using the [**print()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#print) method in the **PrintModule**.
-
-The following steps are used to print the PDF document programmatically.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to perform the print operation.
-
-```
-
-```
-
-```ts
-document.getElementById('print').addEventListener('click', ()=> {
- //Print the loaded document.
- viewer.printModule.print();
-});
-```
-
-Find the Sample, [how to print the PDF document programmatically](https://stackblitz.com/edit/j9tu5j-cc3akh?devtoolsheight=33&file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/print-documents.md b/ej2-javascript/pdfviewer/how-to/print-documents.md
deleted file mode 100644
index 4bb27eed7..000000000
--- a/ej2-javascript/pdfviewer/how-to/print-documents.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Print documents in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Print documents in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Print documents
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Print documents in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to print the PDF document programmatically using the [**print()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#print) method in the **PrintModule**.
-
-The following steps are used to print the PDF document programmatically.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to perform the print operation.
-
-```
-
-```
-
-```ts
-document.getElementById('print').addEventListener('click', ()=> {
- //Print the loaded document.
- viewer.printModule.print();
-});
-```
-
-Find the Sample, [how to print the PDF document programmatically](https://stackblitz.com/edit/rawhaj?devtoolsheight=33&file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/resolve-unable-to-find-an-entry-point-error.md b/ej2-javascript/pdfviewer/how-to/resolve-unable-to-find-an-entry-point-error.md
deleted file mode 100644
index 660e4b787..000000000
--- a/ej2-javascript/pdfviewer/how-to/resolve-unable-to-find-an-entry-point-error.md
+++ /dev/null
@@ -1,27 +0,0 @@
----
-layout: post
-title: Resolve unable to find an entry point error in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Resolve unable to find an entry point error in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Resolve unable to find an entry point error
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Resolve unable to find an entry point error in ##Platform_Name## Pdfviewer control
-
-From the release of version **21.1.0.35 (2023 Volume 1)** of Essential Studio, the Pdfium package has been upgraded to improve various functionalities like text search, text selection, rendering, and even performance. If you are updating your project to this version of the Syncfusion PDF Viewer, you may encounter the **"Web-Service is not listening"** error. The Network tab can help you identify the root cause of the issue, which is typically caused by an old version of pdfium assembly being referenced in the local web service project. Below are the assemblies to be referred to in the respective operating systems.
-
-* Windows – pdfium.dll
-* Linux – libpdfium.so
-* OSX – libpdfium.dylib
-
-
-
-## To solve this issue, you should follow the below steps
-
-1. Clear the bin and object files of the web-service project.
-2. Re-publish the web-service project.
-
-N>Note: If you are hosting your application in Azure, AWS, or in Linux environments, delete the older published files and republish the application.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md
deleted file mode 100644
index 5cd2b40b8..000000000
--- a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-js.md
+++ /dev/null
@@ -1,63 +0,0 @@
----
-layout: post
-title: Restrict Zoom Percentage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all how to restrict zoom percentage in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# How to Restrict Zoom Percentage on Mobile Devices
-
-In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !viewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !viewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Restrict%20Zoom%20Percentage%20on%20Mobile%20Devices)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md b/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md
deleted file mode 100644
index 4bf63617b..000000000
--- a/ej2-javascript/pdfviewer/how-to/restricting-zoom-in-mobile-mode-ts.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-layout: post
-title: Restrict Zoom Percentage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all how to restrict zoom percentage in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# How to Restrict Zoom Percentage on Mobile Devices
-
-In Syncfusion PDF Viewer, you can easily restrict the zoom percentage on mobile devices using the **maxZoom** and **minZoom** property. This feature allows you to set specific limits for zooming, ensuring smoother scrolling performance and efficient document loading, on mobile devices.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation,
- LinkAnnotation, ThumbnailView, BookmarkView, TextSelection,
- TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !viewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation,
- LinkAnnotation, ThumbnailView, BookmarkView, TextSelection,
- TextSearch, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView,
- BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.appendTo('#PdfViewer');
-
-pdfviewer.documentLoad = (): void => {
- if (Browser.isDevice && !viewer.enableDesktopMode) {
- pdfviewer.maxZoom = 200;
- pdfviewer.minZoom = 10;
- }
- else{
- pdfviewer.zoomMode = 'Default';
- }
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-By implementing this, you ensure that the maximum zoom percentage on mobile devices is limited to 200% and the minimum zoom percentage is set to 10%. This prevents performance issues that may arise from excessive zooming on mobile platforms.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to/Restrict%20Zoom%20Percentage%20on%20Mobile%20Devices)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/save-pdf-document-to-url.md b/ej2-javascript/pdfviewer/how-to/save-pdf-document-to-url.md
deleted file mode 100644
index 6b0836b61..000000000
--- a/ej2-javascript/pdfviewer/how-to/save-pdf-document-to-url.md
+++ /dev/null
@@ -1,121 +0,0 @@
----
-layout: post
-title: Save pdf document to url in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Save pdf document to url in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Save pdf document to url
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save pdf document to url in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to save the PDF document to specific URL.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create simple PDF Viewer sample.
-
-**Step 2:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service/) to create the PDF Viewer web service.
-
-**Step 3:** Add the below code snippet in the PDF Viewer controller code to save the PDF document to the URL.
-
-```ts
-
-[HttpPost]
-[EnableCors("AllowAllOrigins")]
-[Route("SaveUrl")]
-public async Task SaveUrl([FromBody] Dictionary jsonObject)
-{
- PdfRenderer pdfviewer;
- if (Startup.isRedisCacheEnable)
- pdfviewer = new PdfRenderer(_mCache, _dCache, _slidingTime);
- else
- pdfviewer = new PdfRenderer(_mCache);
- try
- {
- HttpClient client = new HttpClient();
- Dictionary RequestDetails = new Dictionary();
- RequestDetails.Add("Url", jsonObject["RequestedUrl"]);
- RequestDetails.Add("base64", jsonObject["base64Data"]);
- string jsonString = JsonConvert.SerializeObject(RequestDetails);
- StringContent Data = new StringContent(jsonString);
- string UriAddress = jsonObject["UriAddress"];
- var result = await client.PutAsync(UriAddress, Data);
- if (result.StatusCode.ToString() == "OK")
- {
- return Content("Document saved successfully!");
- }
- else
- {
- return Content("Failed to save the document!");
- }
- } catch (Exception exception)
- {
- return Content(exception.Message);
- }
-}
-
-```
-
-**Step 4:** Add the following code in your file server which you want to rewrite the content.
-
-```ts
-
-[AcceptVerbs("Put")]
-[HttpPut]
-[EnableCors("AllowAllOrigins")]
-public async System.Threading.Tasks.Task PutAsync(string name)
-{
-using (var Reader = new StreamReader(Request.Body))
-{
-var Data = await Reader.ReadToEndAsync();
-Dictionary Response = JsonConvert.DeserializeObject>(Data);
-string Url = Response["Url"].ToString();
-string base64String = Response["base64"].ToString();
-var document = Url.Split(Request.Host.Value + "/");
-System.Net.WebClient WebClient = new WebClient();
-Stream stream = WebClient.OpenWrite(document[1], "PUT");
-byte[] bytes = System.Convert.FromBase64String(base64String);
-stream.Write(bytes, 0, bytes.Length);
-}
-}
-
-```
-
-**Step 5:** The following code snippet explains how to send Ajax Request for sending request to save the PDF document to specific URL.
-
-```
-
-```
-
-```ts
-
-let jsonData: any = {};
-document.getElementById('save').addEventListener('click', () => {
- let data: any;
- let base64data: any;
- viewer.saveAsBlob().then(function (value) {
- data = value;
- var reader = new FileReader();
- reader.readAsDataURL(data);
- reader.onload = () => {
- base64data = reader.result;
- let RequestHandler = new AjaxHandler(viewer);
- RequestHandler.url = viewer.serviceUrl + "/" + "saveUrl";
- RequestHandler.responseType = "json";
- jsonData["action"] = 'SaveUrl';
- // base64 string
- jsonData["base64Data"] = base64data.replace('data:application/pdf;base64,', '');
- // File location of the file server which we have to rewrite the content
- jsonData["RequestedUrl"] = "http://localhost:65534/Data/PDF_Succinctly.pdf";
- // Hosted file server address
- jsonData["UriAddress"] = "http://localhost:65534/pdfviewer";
- RequestHandler.send(jsonData);
- RequestHandler.onSuccess = function (result: any) {
- console.log("PDF Document saved to URL!");
- }
- };
- });
-});
-
-```
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotation.md b/ej2-javascript/pdfviewer/how-to/select-multi-page-annotation.md
deleted file mode 100644
index d45764b02..000000000
--- a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotation.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: Select multi page annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Select multi page annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Select multi page annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Select multi page annotation in ##Platform_Name## Pdfviewer control
-
-To select a multi-page TextMarkup annotation as a single annotation in a Syncfusion PDF viewer, you can use by enabling the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property. By default it is `false`.
-
-Here is an example of how you can use the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property to select the multi page TextMarkup annotation as a single annotation, export and import multi page annotation:
-
-```javascript
-
-// Enable multi-page TextMarkup Annotation.
-viewer.enableMultiPageAnnotation = true;
-
-// Export Annotation
-document.getElementById('export').addEventListener('click', () => {
- viewer.exportAnnotation();
-});
-
-// Import Annotation.
-document.getElementById('import').addEventListener('click', () => {
- viewer.importAnnotation("Add Export annotation file content");
-});
-
-```
-
-Find the sample [how to select multi-page TextMarkup annotation as single annotation](https://stackblitz.com/edit/1epvap-vewcbt?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotations.md b/ej2-javascript/pdfviewer/how-to/select-multi-page-annotations.md
deleted file mode 100644
index 99bb5b954..000000000
--- a/ej2-javascript/pdfviewer/how-to/select-multi-page-annotations.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-layout: post
-title: Select multi page annotations in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Select multi page annotations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Select multi page annotations
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Select multi page annotations in ##Platform_Name## Pdfviewer control
-
-To select a multi-page TextMarkup annotation as a single annotation in a Syncfusion PDF viewer, you can use by enabling the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property. By default it is `false`.
-
-Here is an example of how you can use the [**enableMultiPageAnnotation**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#enablemultipageannotation) property to select the multi page TextMarkup annotation as a single annotation, export and import multi page annotation:
-
-```ts
-
-// Enable multi-page TextMarkup Annotation.
-viewer.enableMultiPageAnnotation = true;
-
-// Export Annotation
-document.getElementById('export').addEventListener('click', () => {
- viewer.exportAnnotation();
-});
-
-// Import Annotation.
-document.getElementById('import').addEventListener('click', () => {
- viewer.importAnnotation("Add Export annotation file content");
-});
-
-```
-
-Find the sample [how to select multi-page TextMarkup annotation as single annotation](https://stackblitz.com/edit/xuyjgt-bjwrbw?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/show-custom-stamp-item-js.md b/ej2-javascript/pdfviewer/how-to/show-custom-stamp-item-js.md
deleted file mode 100644
index c165bd285..000000000
--- a/ej2-javascript/pdfviewer/how-to/show-custom-stamp-item-js.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: post
-title: Displaying Custom Items in Custom Stamp in Syncfusion PDF Viewer
-description: Learn how to display custom items in the custom stamp Dropdown in Syncfusion PDF Viewer using JavaScript.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Displaying Custom Items in Custom Stamp Dropdown
-
-### Overview
-
-This guide explains how to add and display custom items in the custom stamp dropdown menu of Syncfusion's PDF Viewer using JavaScript. This feature allows users to easily access and apply custom stamps to their PDF documents.
-
-### Steps to Show Custom Items in Custom Stamp Dropdown
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Configure Custom Stamp Settings
-
-Within the PDF Viewer setup, utilize `customStampSettings` to specify the custom stamps that should appear in the dropdown menu.
-```js
-
-// Initialize the PDF Viewer component
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: 'https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib',
- // Configure custom stamp settings
- customStampSettings: {
- isAddToMenu: true,
- customStamps: [
- {
- customStampName: 'Image1',
- customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
- },
- {
- customStampName: 'Image2',
- customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
- }
- ],
- enableCustomStamp: true,
- opacity: 1
- }
-});
-
-```
-
-By following these instructions, you can successfully configure to display custom items in the custom stamp dropdown, allowing users to easily apply personalized stamps to their documents.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/show-custom-stamp-item-ts.md b/ej2-javascript/pdfviewer/how-to/show-custom-stamp-item-ts.md
deleted file mode 100644
index cdc08dbe3..000000000
--- a/ej2-javascript/pdfviewer/how-to/show-custom-stamp-item-ts.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: post
-title: Displaying Custom Items in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn how to display custom items in the custom stamp in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Displaying Custom Items in Custom Stamp Dropdown in PDF Viewer
-
-### Overview
-
-This guide explains how to add and display custom items in the custom stamp dropdown menu of Syncfusion's PDF Viewer using TypeScript. This feature allows users to easily access and apply custom stamps to their PDF documents.
-
-### Steps to Show Custom Items in Custom Stamp Dropdown
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Configure Custom Stamp Settings
-
-Within the PDF Viewer setup, utilize `customStampSettings` to specify the custom stamps that should appear in the dropdown menu.
-
-```ts
-
-const pdfviewer: PdfViewer = new PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- resourceUrl: 'https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib',
- customStampSettings: {
- isAddToMenu: true,
- customStamps: [
- {
- customStampName: 'Image1',
- customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
- },
- {
- customStampName: 'Image2',
- customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
- }
- ],
- enableCustomStamp: true,
- opacity: 1
- }
-});
-
-```
-
-By following these instructions, you can successfully configure to display custom items in the custom stamp dropdown, allowing users to easily apply personalized stamps to their documents.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/show-hide-annotation-js.md b/ej2-javascript/pdfviewer/how-to/show-hide-annotation-js.md
deleted file mode 100644
index 246d28dab..000000000
--- a/ej2-javascript/pdfviewer/how-to/show-hide-annotation-js.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: post
-title: Show and Hide Annotations in JavaScript PdfViewer | Syncfusion
-description: Learn how to show or hide annotations in the Syncfusion ##Platform_Name## PdfViewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Show and Hide Annotations in PDF Viewer
-
-## Overview
-
-This guide demonstrates how to show or hide annotations in the Syncfusion PDF Viewer control. This functionality allows users to temporarily remove annotations from view and restore them later without permanently deleting them.
-
-## How to Show/Hide Annotations
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Create a Button in Your HTML File
-
-Add a toggle button element in your HTML file that will control the visibility of annotations.
-
-```html
-
-
-
-```
-**Step 3:** Initialize the PDF Viewer with Annotation Support
-
-Set up the PDF Viewer with necessary modules including Annotation support.
-
-```js
-let exportObject = null;
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- resourceUrl: 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib',
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print,
- ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation,
- ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-```
-**Step 4:** Add Toggle Functionality for Annotations
-
-Implement the toggle button click event to show or hide annotations.
-
-```js
-// Function to hide annotations
-function HideAnnotations() {
- pdfviewer.exportAnnotationsAsObject().then(function(value) {
- exportObject = value;
- pdfviewer.deleteAnnotations();
- });
-}
-
-// Function to unhide annotations
-function UnHideAnnotations() {
- pdfviewer.importAnnotation(JSON.parse(exportObject));
-}
-
-// Add event listeners to buttons
-document.getElementById('hideBtn').addEventListener('click', HideAnnotations);
-document.getElementById('unhideBtn').addEventListener('click', UnHideAnnotations);
-```
-### Conclusion
-
-This implementation provides a clean way to temporarily hide and show annotations in the PDF Viewer without permanently deleting them. This can be useful in scenarios where users need to temporarily view the document without annotations for better clarity.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/show-hide-annotation-ts.md b/ej2-javascript/pdfviewer/how-to/show-hide-annotation-ts.md
deleted file mode 100644
index aa378520f..000000000
--- a/ej2-javascript/pdfviewer/how-to/show-hide-annotation-ts.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-layout: post
-title: Show and Hide Annotations in TypeScript PdfViewer | Syncfusion
-description: Learn how to show and hide annotations in the Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Show and Hide Annotations in PDF Viewer
-
-### Overview
-
-This guide demonstrates how to toggle the visibility of annotations in the Syncfusion PDF Viewer using TypeScript. This feature is useful when you want to temporarily hide annotations for a cleaner view or show them again as needed.
-
-### How to Toggle Annotation Visibility
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample.
-
-**Step 2:** Create Toggle Buttons in Your HTML File
-
-Add button elements in your HTML file that will trigger the show and hide functionality.
-
-```html
-
-
-
-
-```
-
-**Step 3:** Initialize the PDF Viewer with Required Modules
-
-In your TypeScript file, initialize the PDF Viewer with necessary modules including the Annotation module.
-
-```ts
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
-TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer } from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView,
-TextSelection, TextSearch, Print, Annotation, FormFields, FormDesigner, PageOrganizer);
-
-// Create the PDF viewer instance
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.resourceUrl = 'https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib';
-pdfviewer.documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
-// Append the viewer to the container element
-pdfviewer.appendTo('#PdfViewer');
-```
-
-**Step 4:** Implement the Show/Hide Annotation Functionality
-
-Add the code to handle the show and hide functionality of annotations by exporting and importing them as needed.
-
-```ts
-// Variable to store exported annotations
-let exportObject: any = "";
-
-// Function to hide annotations
-function HideAnnotations(): void {
- pdfviewer.exportAnnotationsAsObject().then(function(value: any) {
- exportObject = value;
- pdfviewer.deleteAnnotations();
- });
-}
-
-// Function to unhide annotations
-function UnHideAnnotations(): void {
- pdfviewer.importAnnotation(JSON.parse(exportObject));
-}
-
-// Add event listeners to buttons
-document.getElementById('hideBtn')?.addEventListener('click', HideAnnotations);
-document.getElementById('unhideBtn')?.addEventListener('click', UnHideAnnotations);
-```
-
-### Conclusion
-
-By implementing these steps, you can easily add functionality to toggle the visibility of annotations in your PDF Viewer application. This feature enhances user experience by allowing selective viewing of annotations.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js.md b/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js.md
deleted file mode 100644
index 841f379da..000000000
--- a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-js.md
+++ /dev/null
@@ -1,38 +0,0 @@
----
-layout: post
-title: Selection events in | Syncfusion
-description: Learn here all about the SignatureSelect and SignatureUnselect event in Syncfusion Javascript PDF Viewer component of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# SignatureSelect and SignatureUnselect event
-
-The Syncfusion PDF Viewer provides event-handling capabilities for various actions, including selecting and unselecting handwritten signatures. The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events enable developers to programmatically manage the selection state of signatures within the PDF Viewer component.
-
-**signatureSelect**
-
-The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) event triggers when a handwritten signature annotation is selected. This event allows developers to capture the signature selection and handle it programmatically, such as updating the UI or storing the selection data for further processing.
-
-**signatureUnselect**
-
-The [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) event triggers when a handwritten signature annotation is unselected. This event enables developers to manage the unselection programmatically, which can be useful for tasks like cleanup operations or updating the application's state to reflect that a signature is no longer selected.
-
-The code snippet demonstrates how to subscribe to the [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events in the Syncfusion PDF Viewer component.
-
-```js
-pdfviewer.signatureSelect = (args: any) => {
- console.log('Signature selected:', args);
- };
-
-pdfviewer.signatureUnselect = (args: any) => {
- console.log('Signature selected:', args);
-};
-```
-
-The `signatureSelect` and `signatureUnselect` events in Syncfusion PDF Viewer offer robust options for managing the state of handwritten signatures within your application. By handling these events, developers can create a more interactive and dynamic user experience, responding programmatically to signature selection and unselection.
-
-[View sample in GitHub]()
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-ts.md b/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-ts.md
deleted file mode 100644
index 9d1722ecb..000000000
--- a/ej2-javascript/pdfviewer/how-to/signatureselect-signatureunselect-ts.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-layout: post
-title: Selection events in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about SignatureSelect and SignatureUnselect event in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# SignatureSelect and SignatureUnselect event
-
-The Syncfusion PDF Viewer provides event-handling capabilities for various actions, including selecting and unselecting handwritten signatures. The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events enable developers to programmatically manage the selection state of signatures within the PDF Viewer component.
-
-**signatureSelect**
-
-The [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) event triggers when a handwritten signature annotation is selected. This event allows developers to capture the signature selection and handle it programmatically, such as updating the UI or storing the selection data for further processing.
-
-**signatureUnselect**
-
-The [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) event triggers when a handwritten signature annotation is unselected. This event enables developers to manage the unselection programmatically, which can be useful for tasks like cleanup operations or updating the application's state to reflect that a signature is no longer selected.
-
-The code snippet demonstrates how to subscribe to the [signatureSelect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureselect) and [signatureUnselect](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#signatureunselect) events in the Syncfusion PDF Viewer component.
-
-```ts
-
-pdfviewer.signatureSelect = (args: any) => {
- console.log('Signature selected:', args);
- };
-
-pdfviewer.signatureUnselect = (args: any) => {
- console.log('Signature selected:', args);
-};
-
-```
-
-The `signatureSelect` and `signatureUnselect` events in Syncfusion PDF Viewer offer robust options for managing the state of handwritten signatures within your application. By handling these events, developers can create a more interactive and dynamic user experience, responding programmatically to signature selection and unselection.
-
-[View sample in GitHub]()
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/unload-document.md b/ej2-javascript/pdfviewer/how-to/unload-document.md
deleted file mode 100644
index fad1beb02..000000000
--- a/ej2-javascript/pdfviewer/how-to/unload-document.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Unload document in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Unload document in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Unload document
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Unload document in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to unload the PDF document being display in the PDF Viewer control programmatically using the [**unload()**](https://ej2.syncfusion.com/documentation/api/pdfviewer/#unload) method.
-
-The following steps are used to unload the PDF document programmatically.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to perform the unload operation.
-
-```
-
-```
-
-```ts
-document.getElementById('unload').addEventListener('click', () => {
- // Unload the document.
- viewer.unload();
-});
-```
-
-Find the Sample, [how to unload the PDF document programmatically](https://stackblitz.com/edit/jhnx4g?file=index.ts)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/unload-documents.md b/ej2-javascript/pdfviewer/how-to/unload-documents.md
deleted file mode 100644
index 1cab6f5aa..000000000
--- a/ej2-javascript/pdfviewer/how-to/unload-documents.md
+++ /dev/null
@@ -1,33 +0,0 @@
----
-layout: post
-title: Unload documents in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Unload documents in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Unload documents
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Unload documents in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer library allows you to unload the PDF document being display in the PDF Viewer control programmatically using the [**unload()**](https://ej2.syncfusion.com/javascript/documentation/api/pdfviewer/#unload) method.
-
-The following steps are used to unload the PDF document programmatically.
-
-**Step 1:** Follow the steps provided in the [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started/) to create a simple PDF Viewer sample.
-
-**Step 2:** Add the following code snippet to perform the unload operation.
-
-```
-
-```
-
-```ts
-document.getElementById('unload').addEventListener('click', () => {
- // Unload the document.
- viewer.unload();
-});
-```
-
-Find the Sample, [how to unload the PDF document programmatically](https://stackblitz.com/edit/vkr6f1?file=index.js)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/how-to/use-local-script-and-style-references.md b/ej2-javascript/pdfviewer/how-to/use-local-script-and-style-references.md
deleted file mode 100644
index 8a5bc398c..000000000
--- a/ej2-javascript/pdfviewer/how-to/use-local-script-and-style-references.md
+++ /dev/null
@@ -1,72 +0,0 @@
----
-layout: post
-title: Use local script and style references in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Use local script and style references in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Use local script and style references
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Use local script and style references in ##Platform_Name## Pdfviewer control
-
-**Step 1:** Create an app folder `myapp` for Essential JS 2 JavaScript components.
-
-**Step 2:** You can get the global scripts and styles from the [Essential Studio JavaScript (Essential JS 2)](https://www.syncfusion.com/downloads/essential-js2/) build installed location.
-
-**Syntax:**
-> Script: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/dist/{PACKAGE_NAME}.min.js`
->
-> Styles: `**(installed location)**/Syncfusion/Essential Studio/JavaScript - EJ2/{RELEASE_VERSION}/Web(Essential JS 2)/JavaScript/{PACKAGE_NAME}/styles/material.css`
-
-**Example:**
-> Script: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/19.3.53/Web(Essential JS 2)/JavaScript/ej2/dist/ej2.min.js`
->
-> Styles: `C:/Program Files (x86)/Syncfusion/Essential Studio/JavaScript - EJ2/19.3.53/Web(Essential JS 2)/JavaScript/ej2-js-es5/styles/material.css`
-
-You can also clone the [`Essential JS 2 quickstart`](https://github.com/syncfusion/ej2-quickstart.git) project and install necessary packages by using the following commands.
-
-```
-git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
-cd quickstart
-npm install
-```
-
-**Step 3:** Create a folder `myapp/resources` and copy/paste the scripts and styles of ej2 package from the above installed location to `myapp/resources` location.
-
-**Step 4:** Add the `Div` element and initiate the `Essential JS 2 PDF Viewer` component with script and style references in the `index.html` by using following code
-
-```html
-
-
-
- Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-**Step 6:** Now, run the `index.html` in web browser, it will render the **Essential JS 2 PDF Viewer** component as below.
-
-
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/images/Checkbox.png b/ej2-javascript/pdfviewer/images/Checkbox.png
deleted file mode 100644
index 50d4f8ef7..000000000
Binary files a/ej2-javascript/pdfviewer/images/Checkbox.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/Dropdown.png b/ej2-javascript/pdfviewer/images/Dropdown.png
deleted file mode 100644
index 967dea1d0..000000000
Binary files a/ej2-javascript/pdfviewer/images/Dropdown.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/InitialField.png b/ej2-javascript/pdfviewer/images/InitialField.png
deleted file mode 100644
index dbeabe526..000000000
Binary files a/ej2-javascript/pdfviewer/images/InitialField.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/Listbox.png b/ej2-javascript/pdfviewer/images/Listbox.png
deleted file mode 100644
index 750126846..000000000
Binary files a/ej2-javascript/pdfviewer/images/Listbox.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/MultiSearchPopup.png b/ej2-javascript/pdfviewer/images/MultiSearchPopup.png
deleted file mode 100644
index c7e90da24..000000000
Binary files a/ej2-javascript/pdfviewer/images/MultiSearchPopup.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/Password.png b/ej2-javascript/pdfviewer/images/Password.png
deleted file mode 100644
index 09430e212..000000000
Binary files a/ej2-javascript/pdfviewer/images/Password.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/Radiobutton.png b/ej2-javascript/pdfviewer/images/Radiobutton.png
deleted file mode 100644
index 3599e0084..000000000
Binary files a/ej2-javascript/pdfviewer/images/Radiobutton.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/SearchNavigationMatchCase.png b/ej2-javascript/pdfviewer/images/SearchNavigationMatchCase.png
deleted file mode 100644
index cd1a0229a..000000000
Binary files a/ej2-javascript/pdfviewer/images/SearchNavigationMatchCase.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/SearchNavigationNoMatchCase.png b/ej2-javascript/pdfviewer/images/SearchNavigationNoMatchCase.png
deleted file mode 100644
index 6a52877f3..000000000
Binary files a/ej2-javascript/pdfviewer/images/SearchNavigationNoMatchCase.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/SearchResultFromPopup.png b/ej2-javascript/pdfviewer/images/SearchResultFromPopup.png
deleted file mode 100644
index ab754ab65..000000000
Binary files a/ej2-javascript/pdfviewer/images/SearchResultFromPopup.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/SignatureField.png b/ej2-javascript/pdfviewer/images/SignatureField.png
deleted file mode 100644
index 939ea85fc..000000000
Binary files a/ej2-javascript/pdfviewer/images/SignatureField.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/SingleSearchPopup.png b/ej2-javascript/pdfviewer/images/SingleSearchPopup.png
deleted file mode 100644
index 19a07343d..000000000
Binary files a/ej2-javascript/pdfviewer/images/SingleSearchPopup.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/Textbox.png b/ej2-javascript/pdfviewer/images/Textbox.png
deleted file mode 100644
index 13eaf454c..000000000
Binary files a/ej2-javascript/pdfviewer/images/Textbox.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/add-revised.png b/ej2-javascript/pdfviewer/images/add-revised.png
deleted file mode 100644
index 0e0a24bae..000000000
Binary files a/ej2-javascript/pdfviewer/images/add-revised.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/add-role.png b/ej2-javascript/pdfviewer/images/add-role.png
deleted file mode 100644
index 1f7f58fcf..000000000
Binary files a/ej2-javascript/pdfviewer/images/add-role.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/add-shapes.png b/ej2-javascript/pdfviewer/images/add-shapes.png
deleted file mode 100644
index 09ab8ef22..000000000
Binary files a/ej2-javascript/pdfviewer/images/add-shapes.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/add-signature.png b/ej2-javascript/pdfviewer/images/add-signature.png
deleted file mode 100644
index 3bf8fe062..000000000
Binary files a/ej2-javascript/pdfviewer/images/add-signature.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/add-sticky-notes.png b/ej2-javascript/pdfviewer/images/add-sticky-notes.png
deleted file mode 100644
index d86780c44..000000000
Binary files a/ej2-javascript/pdfviewer/images/add-sticky-notes.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/add-text-markup.png b/ej2-javascript/pdfviewer/images/add-text-markup.png
deleted file mode 100644
index 7a09d8d5a..000000000
Binary files a/ej2-javascript/pdfviewer/images/add-text-markup.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/add_sign.png b/ej2-javascript/pdfviewer/images/add_sign.png
deleted file mode 100644
index 1a157d31b..000000000
Binary files a/ej2-javascript/pdfviewer/images/add_sign.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/addformfield.gif b/ej2-javascript/pdfviewer/images/addformfield.gif
deleted file mode 100644
index 88f70cbb4..000000000
Binary files a/ej2-javascript/pdfviewer/images/addformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/adding-signature.png b/ej2-javascript/pdfviewer/images/adding-signature.png
deleted file mode 100644
index fd92aa760..000000000
Binary files a/ej2-javascript/pdfviewer/images/adding-signature.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/after-enabling-annotation-toolbar.png b/ej2-javascript/pdfviewer/images/after-enabling-annotation-toolbar.png
deleted file mode 100644
index 2387c4035..000000000
Binary files a/ej2-javascript/pdfviewer/images/after-enabling-annotation-toolbar.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/app-registration.png b/ej2-javascript/pdfviewer/images/app-registration.png
deleted file mode 100644
index 052231b9b..000000000
Binary files a/ej2-javascript/pdfviewer/images/app-registration.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/appearanceproperties.png b/ej2-javascript/pdfviewer/images/appearanceproperties.png
deleted file mode 100644
index 14d99c667..000000000
Binary files a/ej2-javascript/pdfviewer/images/appearanceproperties.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/azure_pdfviewer.png b/ej2-javascript/pdfviewer/images/azure_pdfviewer.png
deleted file mode 100644
index e3fc61964..000000000
Binary files a/ej2-javascript/pdfviewer/images/azure_pdfviewer.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/azure_publish.png b/ej2-javascript/pdfviewer/images/azure_publish.png
deleted file mode 100644
index cc48af57b..000000000
Binary files a/ej2-javascript/pdfviewer/images/azure_publish.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/azure_target.png b/ej2-javascript/pdfviewer/images/azure_target.png
deleted file mode 100644
index 8a15cd104..000000000
Binary files a/ej2-javascript/pdfviewer/images/azure_target.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/bookmark.png b/ej2-javascript/pdfviewer/images/bookmark.png
deleted file mode 100644
index bab491c45..000000000
Binary files a/ej2-javascript/pdfviewer/images/bookmark.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_annotation.png b/ej2-javascript/pdfviewer/images/calibrate_annotation.png
deleted file mode 100644
index fa0355e5a..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_fillcolor.png b/ej2-javascript/pdfviewer/images/calibrate_fillcolor.png
deleted file mode 100644
index 69d7499cd..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_fillcolor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_lineprop.png b/ej2-javascript/pdfviewer/images/calibrate_lineprop.png
deleted file mode 100644
index 7ea04ca4e..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_lineprop.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_opacity.png b/ej2-javascript/pdfviewer/images/calibrate_opacity.png
deleted file mode 100644
index c56989c37..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_opacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_scaledialog.png b/ej2-javascript/pdfviewer/images/calibrate_scaledialog.png
deleted file mode 100644
index 3ec905674..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_scaledialog.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_scaleratio.png b/ej2-javascript/pdfviewer/images/calibrate_scaleratio.png
deleted file mode 100644
index 4cc41a352..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_scaleratio.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_stroke.png b/ej2-javascript/pdfviewer/images/calibrate_stroke.png
deleted file mode 100644
index 4381f1a82..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_stroke.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_thickness.png b/ej2-javascript/pdfviewer/images/calibrate_thickness.png
deleted file mode 100644
index 14824432f..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_thickness.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/calibrate_tool.png b/ej2-javascript/pdfviewer/images/calibrate_tool.png
deleted file mode 100644
index f60523a24..000000000
Binary files a/ej2-javascript/pdfviewer/images/calibrate_tool.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/change-property.png b/ej2-javascript/pdfviewer/images/change-property.png
deleted file mode 100644
index edb1b772d..000000000
Binary files a/ej2-javascript/pdfviewer/images/change-property.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/change_opacity.png b/ej2-javascript/pdfviewer/images/change_opacity.png
deleted file mode 100644
index 9d5ef807a..000000000
Binary files a/ej2-javascript/pdfviewer/images/change_opacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/change_stroke.png b/ej2-javascript/pdfviewer/images/change_stroke.png
deleted file mode 100644
index 39ddd96fe..000000000
Binary files a/ej2-javascript/pdfviewer/images/change_stroke.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/change_thickness.png b/ej2-javascript/pdfviewer/images/change_thickness.png
deleted file mode 100644
index 1404a8bcf..000000000
Binary files a/ej2-javascript/pdfviewer/images/change_thickness.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/client-secret.png b/ej2-javascript/pdfviewer/images/client-secret.png
deleted file mode 100644
index 4dcbae2a8..000000000
Binary files a/ej2-javascript/pdfviewer/images/client-secret.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/clipboardformfield.png b/ej2-javascript/pdfviewer/images/clipboardformfield.png
deleted file mode 100644
index e27af034d..000000000
Binary files a/ej2-javascript/pdfviewer/images/clipboardformfield.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/close-comment-panel.png b/ej2-javascript/pdfviewer/images/close-comment-panel.png
deleted file mode 100644
index 26af17938..000000000
Binary files a/ej2-javascript/pdfviewer/images/close-comment-panel.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/comment-panel.png b/ej2-javascript/pdfviewer/images/comment-panel.png
deleted file mode 100644
index 61c066ec0..000000000
Binary files a/ej2-javascript/pdfviewer/images/comment-panel.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/commentPanel.png b/ej2-javascript/pdfviewer/images/commentPanel.png
deleted file mode 100644
index 0b71294c9..000000000
Binary files a/ej2-javascript/pdfviewer/images/commentPanel.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/commentannot.png b/ej2-javascript/pdfviewer/images/commentannot.png
deleted file mode 100644
index 1d2bda964..000000000
Binary files a/ej2-javascript/pdfviewer/images/commentannot.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/commentsdelete.png b/ej2-javascript/pdfviewer/images/commentsdelete.png
deleted file mode 100644
index a1a75e045..000000000
Binary files a/ej2-javascript/pdfviewer/images/commentsdelete.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/commentsedit.png b/ej2-javascript/pdfviewer/images/commentsedit.png
deleted file mode 100644
index f38a6be5f..000000000
Binary files a/ej2-javascript/pdfviewer/images/commentsedit.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/commentstatus.png b/ej2-javascript/pdfviewer/images/commentstatus.png
deleted file mode 100644
index 5971312ca..000000000
Binary files a/ej2-javascript/pdfviewer/images/commentstatus.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/create_sign.png b/ej2-javascript/pdfviewer/images/create_sign.png
deleted file mode 100644
index b3bd4e5e2..000000000
Binary files a/ej2-javascript/pdfviewer/images/create_sign.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/customStamp.png b/ej2-javascript/pdfviewer/images/customStamp.png
deleted file mode 100644
index db7d16488..000000000
Binary files a/ej2-javascript/pdfviewer/images/customStamp.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/delete-icon.png b/ej2-javascript/pdfviewer/images/delete-icon.png
deleted file mode 100644
index 9c99dc690..000000000
Binary files a/ej2-javascript/pdfviewer/images/delete-icon.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/delete_button.png b/ej2-javascript/pdfviewer/images/delete_button.png
deleted file mode 100644
index 3642d2e50..000000000
Binary files a/ej2-javascript/pdfviewer/images/delete_button.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/download.png b/ej2-javascript/pdfviewer/images/download.png
deleted file mode 100644
index aa3660027..000000000
Binary files a/ej2-javascript/pdfviewer/images/download.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/dragformfield.gif b/ej2-javascript/pdfviewer/images/dragformfield.gif
deleted file mode 100644
index 97666468f..000000000
Binary files a/ej2-javascript/pdfviewer/images/dragformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/dropdownproperties.png b/ej2-javascript/pdfviewer/images/dropdownproperties.png
deleted file mode 100644
index 9bb5dc3dd..000000000
Binary files a/ej2-javascript/pdfviewer/images/dropdownproperties.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/edit-annotation.png b/ej2-javascript/pdfviewer/images/edit-annotation.png
deleted file mode 100644
index 1b00dad78..000000000
Binary files a/ej2-javascript/pdfviewer/images/edit-annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/editAnnotation.png b/ej2-javascript/pdfviewer/images/editAnnotation.png
deleted file mode 100644
index 9086dcb15..000000000
Binary files a/ej2-javascript/pdfviewer/images/editAnnotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/edit_color.png b/ej2-javascript/pdfviewer/images/edit_color.png
deleted file mode 100644
index 1c335dd0b..000000000
Binary files a/ej2-javascript/pdfviewer/images/edit_color.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/edit_opacity.png b/ej2-javascript/pdfviewer/images/edit_opacity.png
deleted file mode 100644
index 1c813aca2..000000000
Binary files a/ej2-javascript/pdfviewer/images/edit_opacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fillcolor.png b/ej2-javascript/pdfviewer/images/fillcolor.png
deleted file mode 100644
index d0f4f4361..000000000
Binary files a/ej2-javascript/pdfviewer/images/fillcolor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fontcolor.png b/ej2-javascript/pdfviewer/images/fontcolor.png
deleted file mode 100644
index 2937b4984..000000000
Binary files a/ej2-javascript/pdfviewer/images/fontcolor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fontfamily.png b/ej2-javascript/pdfviewer/images/fontfamily.png
deleted file mode 100644
index 7be45631c..000000000
Binary files a/ej2-javascript/pdfviewer/images/fontfamily.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fontopacity.png b/ej2-javascript/pdfviewer/images/fontopacity.png
deleted file mode 100644
index 16beaca6f..000000000
Binary files a/ej2-javascript/pdfviewer/images/fontopacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fontsize.png b/ej2-javascript/pdfviewer/images/fontsize.png
deleted file mode 100644
index 9517f09b1..000000000
Binary files a/ej2-javascript/pdfviewer/images/fontsize.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fontstroke.png b/ej2-javascript/pdfviewer/images/fontstroke.png
deleted file mode 100644
index 6b40cf7d7..000000000
Binary files a/ej2-javascript/pdfviewer/images/fontstroke.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fontstyle.png b/ej2-javascript/pdfviewer/images/fontstyle.png
deleted file mode 100644
index 46a760611..000000000
Binary files a/ej2-javascript/pdfviewer/images/fontstyle.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/fontthickness.png b/ej2-javascript/pdfviewer/images/fontthickness.png
deleted file mode 100644
index f792d0acf..000000000
Binary files a/ej2-javascript/pdfviewer/images/fontthickness.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/freetext_tool.png b/ej2-javascript/pdfviewer/images/freetext_tool.png
deleted file mode 100644
index 5ccf232e7..000000000
Binary files a/ej2-javascript/pdfviewer/images/freetext_tool.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/generalproperties.png b/ej2-javascript/pdfviewer/images/generalproperties.png
deleted file mode 100644
index e0cd4ee89..000000000
Binary files a/ej2-javascript/pdfviewer/images/generalproperties.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/highlight_button.PNG b/ej2-javascript/pdfviewer/images/highlight_button.PNG
deleted file mode 100644
index 742cf4412..000000000
Binary files a/ej2-javascript/pdfviewer/images/highlight_button.PNG and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/highlight_context.png b/ej2-javascript/pdfviewer/images/highlight_context.png
deleted file mode 100644
index 43e5f5f88..000000000
Binary files a/ej2-javascript/pdfviewer/images/highlight_context.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/import.gif b/ej2-javascript/pdfviewer/images/import.gif
deleted file mode 100644
index 54d25773a..000000000
Binary files a/ej2-javascript/pdfviewer/images/import.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/ink_annotation.png b/ej2-javascript/pdfviewer/images/ink_annotation.png
deleted file mode 100644
index 163a1130e..000000000
Binary files a/ej2-javascript/pdfviewer/images/ink_annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/ink_opacity.png b/ej2-javascript/pdfviewer/images/ink_opacity.png
deleted file mode 100644
index 9170a26b9..000000000
Binary files a/ej2-javascript/pdfviewer/images/ink_opacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/ink_strokecolor.png b/ej2-javascript/pdfviewer/images/ink_strokecolor.png
deleted file mode 100644
index 718216c40..000000000
Binary files a/ej2-javascript/pdfviewer/images/ink_strokecolor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/ink_thickness.png b/ej2-javascript/pdfviewer/images/ink_thickness.png
deleted file mode 100644
index aabe10b5b..000000000
Binary files a/ej2-javascript/pdfviewer/images/ink_thickness.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/ink_tool.png b/ej2-javascript/pdfviewer/images/ink_tool.png
deleted file mode 100644
index 696563c0f..000000000
Binary files a/ej2-javascript/pdfviewer/images/ink_tool.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/insert-delete-copy.gif b/ej2-javascript/pdfviewer/images/insert-delete-copy.gif
deleted file mode 100644
index c617714bd..000000000
Binary files a/ej2-javascript/pdfviewer/images/insert-delete-copy.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/javascript_output.png b/ej2-javascript/pdfviewer/images/javascript_output.png
deleted file mode 100644
index 5e1654468..000000000
Binary files a/ej2-javascript/pdfviewer/images/javascript_output.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/link.png b/ej2-javascript/pdfviewer/images/link.png
deleted file mode 100644
index 6ff713700..000000000
Binary files a/ej2-javascript/pdfviewer/images/link.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/mobileToolbar.png b/ej2-javascript/pdfviewer/images/mobileToolbar.png
deleted file mode 100644
index fb6cdfe79..000000000
Binary files a/ej2-javascript/pdfviewer/images/mobileToolbar.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/more-options.png b/ej2-javascript/pdfviewer/images/more-options.png
deleted file mode 100644
index e722639bf..000000000
Binary files a/ej2-javascript/pdfviewer/images/more-options.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/navigation.png b/ej2-javascript/pdfviewer/images/navigation.png
deleted file mode 100644
index 143a0f0d4..000000000
Binary files a/ej2-javascript/pdfviewer/images/navigation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/open-comment.png b/ej2-javascript/pdfviewer/images/open-comment.png
deleted file mode 100644
index 900069fad..000000000
Binary files a/ej2-javascript/pdfviewer/images/open-comment.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/open-fillcolor.png b/ej2-javascript/pdfviewer/images/open-fillcolor.png
deleted file mode 100644
index 5eaa67806..000000000
Binary files a/ej2-javascript/pdfviewer/images/open-fillcolor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/open-ink.png b/ej2-javascript/pdfviewer/images/open-ink.png
deleted file mode 100644
index c52125247..000000000
Binary files a/ej2-javascript/pdfviewer/images/open-ink.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/open-radius.png b/ej2-javascript/pdfviewer/images/open-radius.png
deleted file mode 100644
index 0dd083a9c..000000000
Binary files a/ej2-javascript/pdfviewer/images/open-radius.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/open-stamp.png b/ej2-javascript/pdfviewer/images/open-stamp.png
deleted file mode 100644
index 74ccf1664..000000000
Binary files a/ej2-javascript/pdfviewer/images/open-stamp.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/openexistingpdf.gif b/ej2-javascript/pdfviewer/images/openexistingpdf.gif
deleted file mode 100644
index b88e0f096..000000000
Binary files a/ej2-javascript/pdfviewer/images/openexistingpdf.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/organize-page.png b/ej2-javascript/pdfviewer/images/organize-page.png
deleted file mode 100644
index b43b9d5d4..000000000
Binary files a/ej2-javascript/pdfviewer/images/organize-page.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/organizePages.png b/ej2-javascript/pdfviewer/images/organizePages.png
deleted file mode 100644
index ea648f518..000000000
Binary files a/ej2-javascript/pdfviewer/images/organizePages.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/pan.png b/ej2-javascript/pdfviewer/images/pan.png
deleted file mode 100644
index 3d5cc4ac1..000000000
Binary files a/ej2-javascript/pdfviewer/images/pan.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/pdfviewer-digitalsignature.png b/ej2-javascript/pdfviewer/images/pdfviewer-digitalsignature.png
deleted file mode 100644
index 09352bbf6..000000000
Binary files a/ej2-javascript/pdfviewer/images/pdfviewer-digitalsignature.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/print.png b/ej2-javascript/pdfviewer/images/print.png
deleted file mode 100644
index 588950330..000000000
Binary files a/ej2-javascript/pdfviewer/images/print.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/printformfield.gif b/ej2-javascript/pdfviewer/images/printformfield.gif
deleted file mode 100644
index 9365bf7fd..000000000
Binary files a/ej2-javascript/pdfviewer/images/printformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/radius-annotation.png b/ej2-javascript/pdfviewer/images/radius-annotation.png
deleted file mode 100644
index 2559f6da8..000000000
Binary files a/ej2-javascript/pdfviewer/images/radius-annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/resizeformfield.gif b/ej2-javascript/pdfviewer/images/resizeformfield.gif
deleted file mode 100644
index 06d97cf67..000000000
Binary files a/ej2-javascript/pdfviewer/images/resizeformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/rotate-rearrange.gif b/ej2-javascript/pdfviewer/images/rotate-rearrange.gif
deleted file mode 100644
index 172906f96..000000000
Binary files a/ej2-javascript/pdfviewer/images/rotate-rearrange.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/saveformfield.gif b/ej2-javascript/pdfviewer/images/saveformfield.gif
deleted file mode 100644
index b254a7df4..000000000
Binary files a/ej2-javascript/pdfviewer/images/saveformfield.gif and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/search.png b/ej2-javascript/pdfviewer/images/search.png
deleted file mode 100644
index b8246ab69..000000000
Binary files a/ej2-javascript/pdfviewer/images/search.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/searchOption.png b/ej2-javascript/pdfviewer/images/searchOption.png
deleted file mode 100644
index f896cfb83..000000000
Binary files a/ej2-javascript/pdfviewer/images/searchOption.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/select-text.png b/ej2-javascript/pdfviewer/images/select-text.png
deleted file mode 100644
index b7d119b38..000000000
Binary files a/ej2-javascript/pdfviewer/images/select-text.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/select_sign.png b/ej2-javascript/pdfviewer/images/select_sign.png
deleted file mode 100644
index 800487e45..000000000
Binary files a/ej2-javascript/pdfviewer/images/select_sign.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/selectall.png b/ej2-javascript/pdfviewer/images/selectall.png
deleted file mode 100644
index efe64ff32..000000000
Binary files a/ej2-javascript/pdfviewer/images/selectall.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/selection.png b/ej2-javascript/pdfviewer/images/selection.png
deleted file mode 100644
index 901a0cd72..000000000
Binary files a/ej2-javascript/pdfviewer/images/selection.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/selectstamp_annot.png b/ej2-javascript/pdfviewer/images/selectstamp_annot.png
deleted file mode 100644
index 0ed5198e3..000000000
Binary files a/ej2-javascript/pdfviewer/images/selectstamp_annot.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/shape_annot.png b/ej2-javascript/pdfviewer/images/shape_annot.png
deleted file mode 100644
index 9d47219c1..000000000
Binary files a/ej2-javascript/pdfviewer/images/shape_annot.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/shape_fillColor.png b/ej2-javascript/pdfviewer/images/shape_fillColor.png
deleted file mode 100644
index 3f7a2519e..000000000
Binary files a/ej2-javascript/pdfviewer/images/shape_fillColor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/shape_lineprty.png b/ej2-javascript/pdfviewer/images/shape_lineprty.png
deleted file mode 100644
index 765361063..000000000
Binary files a/ej2-javascript/pdfviewer/images/shape_lineprty.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/shape_opacity.png b/ej2-javascript/pdfviewer/images/shape_opacity.png
deleted file mode 100644
index 70cf57c03..000000000
Binary files a/ej2-javascript/pdfviewer/images/shape_opacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/shape_strokecolor.png b/ej2-javascript/pdfviewer/images/shape_strokecolor.png
deleted file mode 100644
index 366b7e763..000000000
Binary files a/ej2-javascript/pdfviewer/images/shape_strokecolor.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/shape_thickness.png b/ej2-javascript/pdfviewer/images/shape_thickness.png
deleted file mode 100644
index 7d3545d5f..000000000
Binary files a/ej2-javascript/pdfviewer/images/shape_thickness.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/shape_toolbar.png b/ej2-javascript/pdfviewer/images/shape_toolbar.png
deleted file mode 100644
index 15aea3098..000000000
Binary files a/ej2-javascript/pdfviewer/images/shape_toolbar.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/squiggly_button.png b/ej2-javascript/pdfviewer/images/squiggly_button.png
deleted file mode 100644
index 86418c5b1..000000000
Binary files a/ej2-javascript/pdfviewer/images/squiggly_button.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/squiggly_context.png b/ej2-javascript/pdfviewer/images/squiggly_context.png
deleted file mode 100644
index 97377da1d..000000000
Binary files a/ej2-javascript/pdfviewer/images/squiggly_context.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/stamp_annot.png b/ej2-javascript/pdfviewer/images/stamp_annot.png
deleted file mode 100644
index 36a359b1b..000000000
Binary files a/ej2-javascript/pdfviewer/images/stamp_annot.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/stamp_tool.png b/ej2-javascript/pdfviewer/images/stamp_tool.png
deleted file mode 100644
index 7282f4436..000000000
Binary files a/ej2-javascript/pdfviewer/images/stamp_tool.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/sticky-notes-in-page.png b/ej2-javascript/pdfviewer/images/sticky-notes-in-page.png
deleted file mode 100644
index 3a96cc714..000000000
Binary files a/ej2-javascript/pdfviewer/images/sticky-notes-in-page.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/sticky_editbtn.png b/ej2-javascript/pdfviewer/images/sticky_editbtn.png
deleted file mode 100644
index f917a35c4..000000000
Binary files a/ej2-javascript/pdfviewer/images/sticky_editbtn.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/sticky_opacity.png b/ej2-javascript/pdfviewer/images/sticky_opacity.png
deleted file mode 100644
index 2a60b7b0c..000000000
Binary files a/ej2-javascript/pdfviewer/images/sticky_opacity.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/stickycomment.png b/ej2-javascript/pdfviewer/images/stickycomment.png
deleted file mode 100644
index d87c4306d..000000000
Binary files a/ej2-javascript/pdfviewer/images/stickycomment.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/stickynotes_annotation.png b/ej2-javascript/pdfviewer/images/stickynotes_annotation.png
deleted file mode 100644
index e25e7035a..000000000
Binary files a/ej2-javascript/pdfviewer/images/stickynotes_annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/stickynotes_comment.png b/ej2-javascript/pdfviewer/images/stickynotes_comment.png
deleted file mode 100644
index 76b288752..000000000
Binary files a/ej2-javascript/pdfviewer/images/stickynotes_comment.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/stickynotes_tool.png b/ej2-javascript/pdfviewer/images/stickynotes_tool.png
deleted file mode 100644
index ad91b673b..000000000
Binary files a/ej2-javascript/pdfviewer/images/stickynotes_tool.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/storage-account.png b/ej2-javascript/pdfviewer/images/storage-account.png
deleted file mode 100644
index fe240b165..000000000
Binary files a/ej2-javascript/pdfviewer/images/storage-account.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/strikethrough_button.png b/ej2-javascript/pdfviewer/images/strikethrough_button.png
deleted file mode 100644
index c416e49cd..000000000
Binary files a/ej2-javascript/pdfviewer/images/strikethrough_button.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/strikethrough_context.png b/ej2-javascript/pdfviewer/images/strikethrough_context.png
deleted file mode 100644
index 0bcea7b82..000000000
Binary files a/ej2-javascript/pdfviewer/images/strikethrough_context.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/text_markup_annotation.png b/ej2-javascript/pdfviewer/images/text_markup_annotation.png
deleted file mode 100644
index a0684a628..000000000
Binary files a/ej2-javascript/pdfviewer/images/text_markup_annotation.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/textalign.png b/ej2-javascript/pdfviewer/images/textalign.png
deleted file mode 100644
index 07826f3a3..000000000
Binary files a/ej2-javascript/pdfviewer/images/textalign.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/thumbnail.png b/ej2-javascript/pdfviewer/images/thumbnail.png
deleted file mode 100644
index 99c63d926..000000000
Binary files a/ej2-javascript/pdfviewer/images/thumbnail.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/toc.png b/ej2-javascript/pdfviewer/images/toc.png
deleted file mode 100644
index 617e1ea9d..000000000
Binary files a/ej2-javascript/pdfviewer/images/toc.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/toolbar.png b/ej2-javascript/pdfviewer/images/toolbar.png
deleted file mode 100644
index e899e9678..000000000
Binary files a/ej2-javascript/pdfviewer/images/toolbar.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/underline_button.png b/ej2-javascript/pdfviewer/images/underline_button.png
deleted file mode 100644
index a93d3b86f..000000000
Binary files a/ej2-javascript/pdfviewer/images/underline_button.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/underline_context.png b/ej2-javascript/pdfviewer/images/underline_context.png
deleted file mode 100644
index 2aab9892e..000000000
Binary files a/ej2-javascript/pdfviewer/images/underline_context.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/undo-redo.png b/ej2-javascript/pdfviewer/images/undo-redo.png
deleted file mode 100644
index 3ead9ff13..000000000
Binary files a/ej2-javascript/pdfviewer/images/undo-redo.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/upload-pdf.png b/ej2-javascript/pdfviewer/images/upload-pdf.png
deleted file mode 100644
index d49aaabfb..000000000
Binary files a/ej2-javascript/pdfviewer/images/upload-pdf.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/zoom.png b/ej2-javascript/pdfviewer/images/zoom.png
deleted file mode 100644
index 41a222105..000000000
Binary files a/ej2-javascript/pdfviewer/images/zoom.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/images/zoomOrganize.png b/ej2-javascript/pdfviewer/images/zoomOrganize.png
deleted file mode 100644
index e55f6058b..000000000
Binary files a/ej2-javascript/pdfviewer/images/zoomOrganize.png and /dev/null differ
diff --git a/ej2-javascript/pdfviewer/js/accessibility.md b/ej2-javascript/pdfviewer/js/accessibility.md
deleted file mode 100644
index 15556ce5b..000000000
--- a/ej2-javascript/pdfviewer/js/accessibility.md
+++ /dev/null
@@ -1,292 +0,0 @@
----
-layout: post
-title: Accessibility in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about accessibility in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Accessibility in Syncfusion PDF Viewer components
-
-The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
-
-The accessibility compliance for the PDF Viewer component is outlined below.
-
-| Accessibility Criteria | Compatibility |
-| -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | |
-| [Section 508 Support](../common/accessibility#accessibility-standards) | |
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | |
-| [Color Contrast](../common/accessibility#color-contrast) | |
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
-| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
-
-
-
- All features of the component meet the requirement.
-
-
- Some features of the component do not meet the requirement.
-
-
- The component does not meet the requirement.
-
-## WAI-ARIA attributes
-
-[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript,and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. The following ARIA attributes are used in the PDF Viewer component:
-
-| Attributes | Purpose |
-| --- | --- |
-| `aria-disabled`| Indicates whether the PDF Viewer component is in a disabled state or not.|
-| `aria-expanded`| Indicates whether the suggestion list has expanded or not. |
-| `aria-readonly` | Indicates the readonly state of the PDF Viewer element. |
-| `aria-haspopup` | Indicates whether the PDF Viewer input element has a suggestion list or not. |
-| `aria-label` | Indicates the breadcrumb item text. |
-| `aria-labelledby` | Provides a label for the PDF Viewer. Typically, the "aria-labelledby" attribute will contain the id of the element used as the PDF Viewer's title. |
-| `aria-describedby` | This attribute points to the PDF Viewer element describing the one it's set on. |
-| `aria-orientation` | Indicates whether the PDF Viewer element is oriented horizontally or vertically. |
-| `aria-valuetext` | Returns the current text of the PDF Viewer. |
-| `aria-valuemax` | Indicates the Maximum value of the PDF Viewer. |
-| `aria-valuemin` | Indicates the Minimum value of the PDF Viewer. |
-| `aria-valuenow` | Indicates the current value of the PDF Viewer. |
-| `aria-controls` | Attribute is set to the button and it points to the corresponding content. |
-
-
-## Keyboard interaction
-
-The PDF Viewer component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Message component.
-
-| **Press (Windows)** |**Press (Macintosh)** | **To do this** |
-| --- | --- | --- |
-|||**Shortcuts for page navigation**|
-| CONTROL + Left Arrow (or) CONTROL + Up Arrow | COMMAND + Left Arrow (or) COMMAND + Up Arrow |Navigate to the first page |
-| CONTROL + Right Arrow (or) CONTROL + Down Arrow |COMMAND + Right Arrow (or) COMMAND + Down Arrow |Navigate to the last page |
-|Left Arrow | Left Arrow (or) Shift + Space |Navigate to the previous page|
-| Right Arrow | Right Arrow (or) Space | Navigate to the next page |
-| CONTROL + G | COMMAND + G | Go To The Page|
-|Up Arrow |Up Arrow |Scroll up|
-| Down Arrow | Down Arrow | Scroll down|
-|||**Shortcuts for Zooming**|
-|CONTROL + = |COMMAND + = | Perform zoom-in operation |
-| CONTROL + - | COMMAND + - | Perform zoom-out operation |
-|CONTROL + 0 |COMMAND + 0 | Retain the zoom level to 1 |
-|||**Shortcut for Text Search**|
-| CONTROL + F | COMMAND + F |Open the search toolbar|
-|||**Shortcut for Text Selection**|
-|CONTROL + C |CONTROL + C | Copy the selected text or annotation or form field |
-| CONTROL + X | CONTROL + X |Cut the selected text or annotation of the form field|
-|CONTROL + Y |CONTROL + Y |Paste the selected text or annotation or form field|
-|||**Shortcuts for the general operation**|
-| CONTROL + Z | CONTROL + Z |Undo the action|
-|CONTROL + Y |CONTROL + Y |Redo the action|
-| CONTROL + P | COMMAND + P |Print the document|
-|Delete |Delete |Delete the annotations and form fields|
-|CONTROL + Shift + A |COMMAND + Shift + A |Toggle Annotation Toolbar|
-|CONTROL + Alt + 0 |COMMAND + Option + 0 |Show Command panel|
-|CONTROL + Alt + 2 |COMMAND + Option + 2 |Show Bookmarks|
-|CONTROL + Alt + 1 |COMMAND + Option + 1 |Show Thumbnails|
-|CONTROL + S |COMMAND + S |Download|
-|Shift + H |Shift + H |Enable pan mode|
-|Shift + V |Shift + V |Enable text selection mode|
-
-The current implementation of our PDF Viewer includes keyboard shortcuts for various functions like scrolling, zooming, text search, printing, and annotation deletion.
-
-To enhance user experience, we're adding additional keyboard shortcuts for actions such as navigating between pages, accessing specific pages, toggling annotation tools, and displaying PDF elements like outlines, annotations, bookmarks, and thumbnails.
-
-To support this, we're introducing a new class called **commandManager**, which handles custom commands triggered by specific key gestures. These custom commands will be defined by users and executed accordingly.
-
-The **commandManager** will have a parameter called Commands, which will hold the collection of custom keyboard commands specified by users. Each custom command will be represented by a KeyboardCommand class, containing the `command name` and associated `keyboard combination`.
-
-Additionally, we're introducing the **keyboardCustomCommands** parameter for the CommandManager, which will utilize the EventCallback to handle keyboard events and trigger appropriate methods when specific key combinations are pressed.
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endhighlight %}
-{% endtabs %}
-
-Each `keyboardCommand` object consists of a name property, specifying the `name` of the `custom command`, and a `gesture property`, defining the key gesture associated with the command.
-
-For example, the first command named `customCopy` is associated with the **G** key and requires both the **Shift** and **Alt** modifier keys to be pressed simultaneously.
-
-Additionally, there's an explanation of the key modifiers used in the gestures:
-
-* Ctrl corresponds to the Control key, represented by the value `1`.
-* Alt corresponds to the Alt key, represented by the value `2`.
-* Shift corresponds to the Shift key, represented by the value `4`.
-* Meta corresponds to the Command key on macOS or the Windows key on Windows, represented by the value `8`.
-
-This setup allows users to perform custom actions within the PDF viewer by pressing specific key combinations, enhancing the user experience and providing more efficient navigation and interaction options.
-
-## Ensuring accessibility
-
-The PDF Viewer component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
-
-The accessibility compliance of the PDF Viewer component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/pdf-viewer.html) in a new window to evaluate the accessibility of the PDF Viewer component with accessibility tools.
-
-{% previewsample "https://ej2.syncfusion.com/accessibility/pdf-viewer.html" %}
-
-## See also
-
-* [Accessibility in Syncfusion EJ2 JavaScript components](../common/accessibility)
diff --git a/ej2-javascript/pdfviewer/js/annotations/comments.md b/ej2-javascript/pdfviewer/js/annotations/comments.md
deleted file mode 100644
index f0c7d0395..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/comments.md
+++ /dev/null
@@ -1,166 +0,0 @@
----
-layout: post
-title: Comments in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Comments in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Comments in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents:
-
-* Shape annotation
-* Stamp annotation
-* Sticky note annotation
-* Measurement annotation
-* Text markup annotation
-* Free text annotation
-* Ink annotation
-
-
-
-## Adding a comment to the annotation
-
-Annotation comment, comment replies, and status can be added to the PDF document using the comment panel.
-
-### Comment panel
-
-Annotation comments can be added to the PDF using the comment panel. The comment panel can be opened in the following ways:
-
-1. Using the annotation menu
-
- * Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
- * Click the Comment Panel button. A comment panel will appear.
-
-2. Using Context menu
-
- * Select annotation in the PDF document and right-click it.
- * Select the comment option in the context menu that appears.
-
-3. Using the Mouse click
-
- * Select annotation in the PDF document and double click it, a comment panel will appear.
-
-If the comment panel is already in the open state, you can select the annotations and add annotation comments using the comment panel.
-
-### Adding comments
-
-* Select annotation in the PDF document and click it.
-* The selected annotation comment container is highlighted in the comment panel.
-* Now, you can add comment and comment replies using the comment panel.
-
-
-
-### Adding Comment Replies
-
-* The PDF Viewer control provides an option to add multiple replies to the comment.
-* After adding the annotation comment, you can add a reply to the comment.
-
-### Adding Comment or Reply Status
-
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
-
-
-
-### Editing the comments and comments replies of the annotations
-
-The comment, comment replies, and status of the annotation can be edited using the comment panel.
-
-### Editing the Comment or Comment Replies
-
-The annotation comment and comment replies can be edited in the following ways:
-
-1. Using the Context menu
-
- * Select the Annotation Comments in the comment panel.
- * Click the More options button showing in the Comments or reply container.
- * Select the Edit option in the context menu that appears.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
-
-2. Using the Mouse Click
-
- * Select the annotation comments in the comment panel.
- * Double click the comment or comment reply content.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
-
-### Editing Comment or Reply Status
-
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
-* Status ‘None’ is the default state. If the status is set to ‘None,’ the comments or reply does not appear.
-
-
-
-### Delete Comment or Comment Replies
-
-* Select the Annotation Comments in the comment panel.
-* Click the more options button shown in the Comments or reply container.
-* Select the Delete option in the context menu that appears.
-
-
-
->The annotation will be deleted on deleting the comment using comment panel.
-
-## How to check the comments added by the user
-
-The comments added to the PDF document can be viewed by using the [comments](https://helpej2.syncfusion.com/documentation/api/pdfviewer/commentEventArgs/) property of the annotation.
-
-Refer to the following code to check the comments added in the PDF document using a button click event.
-
-```html
-
-```
-
-{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/23.1.43/dist/ej2-pdfviewer-lib";
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-```typescript
-//Method to check the comments added in the PDF document.
-document.getElementById('checkComments').addEventListener('click', function () {
- var annotationCollections = pdfviewer.annotationCollection;
- for (var x = 0; x < annotationCollections.length; x++) {
- //Prints the annotation id in the console window.
- console.log("annotation Id : " +annotationCollections[x].annotationId);
- var comments = annotationCollections[x].comments;
- for (var y = 0; y < comments.length; y++) {
- var comment = comments[y];
- //Prints the PDF document's comments in the console window.
- console.log("comment" + "[" + y + "] :" + comment.note);
- }
- var note = annotationCollections[x].note;
- console.log("note : " + note);
- }
-});
-
-```
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/annotations/free-text-annotation.md b/ej2-javascript/pdfviewer/js/annotations/free-text-annotation.md
deleted file mode 100644
index 219b2d0e0..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/free-text-annotation.md
+++ /dev/null
@@ -1,299 +0,0 @@
----
-layout: post
-title: Free text annotation in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Free text annotation in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Free text annotation in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer control provides the options to add, edit, and delete the free text annotations.
-
-## Adding a free text annotation to the PDF document
-
-The Free text annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **Free Text Annotation** button in the annotation toolbar. It enables the Free Text annotation mode.
-* You can add the text over the pages of the PDF document.
-
-In the pan mode, if the free text annotation mode is entered, the PDF Viewer control will switch to text select mode.
-
-
-
-Refer to the following code sample to switch to the Free Text annotation mode using a button click.
-
-
-```html
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation');
-if (addFreeTextAnnotationButton) {
- addFreeTextAnnotationButton.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("FreeText");
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let addFreeTextAnnotationButton = document.getElementById('addFreeTextAnnotation');
-if (addFreeTextAnnotationButton) {
- addFreeTextAnnotationButton.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("FreeText");
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding a free text annotation programatically to the PDF document
-
-The PDF Viewer library allows you to add the free text annotation in the PDF Viewer control programmatically using the [**addAnnotation()**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here is an example of how you can use the [**addAnnotation()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#addannotation) method to move the free text annotation programmatically:
-
-```html
-
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation');
-if (addFreeTextAnnotation) {
- addFreeTextAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("FreeText", {
- offset: { x: 120, y: 80 },
- fontSize: 16,
- fontFamily: "Helvetica",
- pageNumber: 1,
- width: 200,
- height: 40,
- isLock: false,
- defaultText: "Syncfusion"
- } );
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let addFreeTextAnnotation = document.getElementById('addFreeTextAnnotation');
-if (addFreeTextAnnotation) {
- addFreeTextAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("FreeText", {
- offset: { x: 120, y: 80 },
- fontSize: 16,
- fontFamily: "Helvetica",
- pageNumber: 1,
- width: 200,
- height: 40,
- isLock: false,
- defaultText: "Syncfusion"
- } );
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Change the content of an existing Free text annotation programmatically
-
-To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
-
-Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation:
-
-```html
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let changeContent = document.getElementById('changeContent');
-if (changeContent) {
- changeContent.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === 'Text Box') {
- pdfviewer.annotationCollection[i].dynamicText = 'syncfusion';
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let changeContent = document.getElementById('changeContent');
-if (changeContent) {
- changeContent.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === 'Text Box') {
- pdfviewer.annotationCollection[i].dynamicText = 'syncfusion';
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-N> Please note that the current version of the PDF Viewer does not offer the functionality to edit existing text within a PDF document. However, you can add new free text annotations and modify existing free text annotations within the document.
-
-## Editing the properties of free text annotation
-
-The font family, font size, font styles, font color, text alignment, fill color, the border stroke color, border thickness, and opacity of the free text annotation can be edited using the Font Family tool, Font Size tool, Font Color tool, Text Align tool, Font Style tool Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
-
-### Editing font family
-
-The font family of the annotation can be edited by selecting the desired font in the Font Family tool.
-
-
-
-### Editing font size
-
-The font size of the annotation can be edited by selecting the desired size in the Font Size tool.
-
-
-
-### Editing font color
-
-The font color of the annotation can be edited using the color palette provided in the Font Color tool.
-
-
-
-### Editing the text alignment
-
-The text in the annotation can be aligned by selecting the desired styles in the drop-down pop-up in the Text Align tool.
-
-
-
-### Editing text styles
-
-The style of the text in the annotation can be edited by selecting the desired styles in the drop-down pop-up in the Font Style tool.
-
-
-
-### Editing fill color
-
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-
-
-
-### Editing stroke color
-
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
-
-
-### Editing thickness
-
-The border thickness of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
-
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-## Setting default properties during control initialization
-
-The properties of the free text annotation can be set before creating the control using the FreeTextSettings.
-
-After editing the default values, they will be changed to the selected values. Refer to the following code sample to set the default free text annotation settings.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' }
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- freeTextSettings : { fillColor: 'green', borderColor: 'blue', fontColor: 'yellow' }
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
diff --git a/ej2-javascript/pdfviewer/js/annotations/ink-annotation.md b/ej2-javascript/pdfviewer/js/annotations/ink-annotation.md
deleted file mode 100644
index eafee4580..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/ink-annotation.md
+++ /dev/null
@@ -1,271 +0,0 @@
----
-layout: post
-title: Ink annotation in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Ink annotation in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Ink annotation in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer control provides the options to add, edit, and delete the ink annotations.
-
-
-
-## Adding an ink annotation to the PDF document
-
-The ink annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **Draw Ink** button in the annotation toolbar. It enables the ink annotation mode.
-* You can draw anything over the pages of the PDF document.
-
-
-
-Refer to the following code sample to switch to the ink annotation mode.
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addInkAnnotation = document.getElementById('addInkAnnotation');
-if (addInkAnnotation) {
- addInkAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("Ink");
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addInkAnnotation = document.getElementById('addInkAnnotation');
-if (addInkAnnotation) {
- addInkAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("Ink");
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding a Ink annotation programatically to the PDF document
-
-The PDF Viewer library allows you to add the Ink annotation in the PDF Viewer control programmatically using the [**addAnnotation()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-
-Here is an example of how you can use the **addAnnotation()** method to move the Ink annotation programmatically:
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addInkAnnotation = document.getElementById('addInkAnnotation');
-if (addInkAnnotation) {
- addInkAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Ink", {
- offset: { x: 150, y: 100 },
- pageNumber: 1,
- width : 200,
- height:60,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addInkAnnotation = document.getElementById('addInkAnnotation');
-if (addInkAnnotation) {
- addInkAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Ink", {
- offset: { x: 150, y: 100 },
- pageNumber: 1,
- width : 200,
- height:60,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
- });
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the existing Ink annotation programmatically
-
-To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
-
-Here is an example of how you can use the **editAnnotation()** method:
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let editInkAnnotation = document.getElementById('editInkAnnotation');
-if (editInkAnnotation) {
- editInkAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") {
- var width = pdfviewer.annotationCollection[i].bounds.width;
- var height = pdfviewer.annotationCollection[i].bounds.height;
- pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let editInkAnnotation = document.getElementById('editInkAnnotation');
-if (editInkAnnotation) {
- editInkAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].shapeAnnotationType === "Ink") {
- var width = pdfviewer.annotationCollection[i].bounds.width;
- var height = pdfviewer.annotationCollection[i].bounds.height;
- pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Editing the properties of the ink annotation
-
-The stroke color, thickness, and opacity of the ink annotation can be edited using the Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
-
-### Editing stroke color
-
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
-
-
-### Editing thickness
-
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
-
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-## Setting default properties during the control initialization
-
-The properties of the ink annotation can be set before creating the control using the InkAnnotationSettings.
-
-After editing the default values, they will be changed to the selected values.
-Refer to the following code sample to set the default ink annotation settings.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.resourceUrl = "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib";
-pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6};
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.inkAnnotationSettings = {author: 'Syncfusion', strokeColor: 'green', thickness: 3, opacity: 0.6};
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/annotations/measurement-annotation.md b/ej2-javascript/pdfviewer/js/annotations/measurement-annotation.md
deleted file mode 100644
index 8c7e1cb7b..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/measurement-annotation.md
+++ /dev/null
@@ -1,582 +0,0 @@
----
-layout: post
-title: Measurement annotation in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Measurement annotation in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Measurement annotation in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are:
-
-* Distance
-* Perimeter
-* Area
-* Radius
-* Volume
-
-
-
-## Adding measurement annotations to the PDF document
-
-The measurement annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Measurement Annotation** dropdown button. A dropdown pop-up will appear and shows the measurement annotations to be added.
-* Select the measurement type to be added to the page in the dropdown pop-up. It enables the selected measurement annotation mode.
-* You can measure and add the annotation over the pages of the PDF document.
-
-In the pan mode, if the measurement annotation mode is entered, the PDF Viewer control will switch to text select mode.
-
- 
-
-Refer to the following code snippet to switch to distance annotation mode.
-
-```html
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let distanceMode = document.getElementById('distanceMode');
-if (distanceMode) {
- distanceMode.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("Distance");
- }
- });
-}
-
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let distanceMode = document.getElementById('distanceMode');
-if (distanceMode) {
- distanceMode.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("Distance");
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding a measurement annotation to the PDF document Programmatically
-
-With the PDF Viewer library, you can add a measurement annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's a example of how you can utilize the **addAnnotation()** method to include a measurement annotation programmatically:
-
-```html
-
-
-
-
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addDistanceAnnotation = document.getElementById('addDistanceAnnotation');
-if (addDistanceAnnotation) {
- addDistanceAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Distance", {
- offset: { x: 200, y: 230 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
- });
- }
- });
-}
-
-let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation');
-if (addPerimeterAnnotation) {
- addPerimeterAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Perimeter", {
- offset: { x: 200, y: 350 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }]
- });
- }
- });
-}
-
-let addAreaAnnotation = document.getElementById('addAreaAnnotation');
-if (addAreaAnnotation) {
- addAreaAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Area", {
- offset: { x: 200, y: 500 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }]
- });
- }
- });
-}
-
-let addRadiusAnnotation = document.getElementById('addRadiusAnnotation');
-if (addRadiusAnnotation) {
- addRadiusAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Radius", {
- offset: { x: 200, y: 630 },
- pageNumber: 1,
- width: 90,
- height: 90
- });
- }
- });
-}
-
-let addVolumeAnnotation = document.getElementById('addVolumeAnnotation');
-if (addVolumeAnnotation) {
- addVolumeAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Volume", {
- offset: { x: 200, y: 810 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }]
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addDistanceAnnotation = document.getElementById('addDistanceAnnotation');
-if (addDistanceAnnotation) {
- addDistanceAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Distance", {
- offset: { x: 200, y: 230 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
- });
- }
- });
-}
-
-let addPerimeterAnnotation = document.getElementById('addPerimeterAnnotation');
-if (addPerimeterAnnotation) {
- addPerimeterAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Perimeter", {
- offset: { x: 200, y: 350 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 350 }, { x: 285, y: 350 }, { x: 286, y: 412 }]
- });
- }
- });
-}
-
-let addAreaAnnotation = document.getElementById('addAreaAnnotation');
-if (addAreaAnnotation) {
- addAreaAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Area", {
- offset: { x: 200, y: 500 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 500 }, { x: 288, y: 499 }, { x: 289, y: 553 }, { x: 200, y: 500 }]
- });
- }
- });
-}
-
-let addRadiusAnnotation = document.getElementById('addRadiusAnnotation');
-if (addRadiusAnnotation) {
- addRadiusAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Radius", {
- offset: { x: 200, y: 630 },
- pageNumber: 1,
- width: 90,
- height: 90
- });
- }
- });
-}
-
-let addVolumeAnnotation = document.getElementById('addVolumeAnnotation');
-if (addVolumeAnnotation) {
- addVolumeAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Volume", {
- offset: { x: 200, y: 810 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 810 }, { x: 200, y: 919 }, { x: 320, y: 919 }, { x: 320, y: 809 }, { x: 200, y: 810 }]
- });
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the existing measurement annotation programmatically
-
-To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
-
-Here is an example of how you can use the **editAnnotation()** method:
-
-```html
-
-
-
-
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let editDistanceAnnotation = document.getElementById('editDistanceAnnotation');
-if (editDistanceAnnotation) {
- editDistanceAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Distance calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation');
-if (editPerimeterAnnotation) {
- editPerimeterAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editAreaAnnotation = document.getElementById('editAreaAnnotation');
-if (editAreaAnnotation) {
- editAreaAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Area calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editRadiusAnnotation = document.getElementById('editRadiusAnnotation');
-if (editRadiusAnnotation) {
- editRadiusAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Radius calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editVolumeAnnotation = document.getElementById('editVolumeAnnotation');
-if (editVolumeAnnotation) {
- editVolumeAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Volume calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let editDistanceAnnotation = document.getElementById('editDistanceAnnotation');
-if (editDistanceAnnotation) {
- editDistanceAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Distance calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editPerimeterAnnotation = document.getElementById('editPerimeterAnnotation');
-if (editPerimeterAnnotation) {
- editPerimeterAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Perimeter calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editAreaAnnotation = document.getElementById('editAreaAnnotation');
-if (editAreaAnnotation) {
- editAreaAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Area calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editRadiusAnnotation = document.getElementById('editRadiusAnnotation');
-if (editRadiusAnnotation) {
- editRadiusAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Radius calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editVolumeAnnotation = document.getElementById('editVolumeAnnotation');
-if (editVolumeAnnotation) {
- editVolumeAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Volume calculation") {
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Editing the properties of measurement annotation
-
-The fill color, stroke color, thickness, and opacity of the measurement annotation can be edited using the Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
-
-### Editing fill color
-
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-
-
-
-### Editing stroke color
-
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
-
-
-### Editing thickness
-
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit thickness tool.
-
-
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-### Editing the line properties
-
-The properties of the line shapes such as distance and perimeter annotations can be edited using the Line properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the distance and perimeter annotations.
-
-
-
-## Setting default properties during control initialization
-
-The properties of the shape annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings and volumeSettings.
-
-Refer to the following code snippet to set the default annotation settings.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'},
- perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'},
- areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'},
- radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'},
- volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'},
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- distanceSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'},
- perimeterSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'},
- areaSettings :{fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'},
- radiusSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'},
- volumeSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'},
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-## Editing scale ratio and unit of the measurement annotation
-
-The scale ratio and unit of measurement can be modified using the scale ratio option provided in the context menu of the PDF Viewer control.
-
- 
-
-The Units of measurements support for the measurement annotations in the PDF Viewer are
-
-* Inch
-* Millimeter
-* Centimeter
-* Point
-* Pica
-* Feet
-
-
-
-## Setting default scale ratio settings during control initialization
-
-The properties of scale ratio for measurement annotation can be set before creating the control using ScaleRatioSettings as shown in the following code snippet,
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'},
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- measurementSettings = {scaleRatio: 2, conversionUnit: 'cm', displayUnit: 'cm'},
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
diff --git a/ej2-javascript/pdfviewer/js/annotations/shape-annotation.md b/ej2-javascript/pdfviewer/js/annotations/shape-annotation.md
deleted file mode 100644
index 4898eaa8b..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/shape-annotation.md
+++ /dev/null
@@ -1,535 +0,0 @@
----
-layout: post
-title: Shape annotation in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Shape annotation in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Shape annotation in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer control provides the options to add, edit, and delete the shape annotations. The shape annotation types supported in the PDF Viewer control are:
-
-* Line
-* Arrow
-* Rectangle
-* Circle
-* Polygon
-
-
-
-## Adding a shape annotation to the PDF document
-
-Shape annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Shape Annotation** drop-down button. A drop-down pop-up will appear and shows the shape annotations to be added.
-* Select the shape types to be added to the page in the drop-down pop-up. It enables the selected shape annotation mode.
-* You can add the shapes over the pages of the PDF document.
-
-N> While you're in the pan mode, for navigating through the document, and you click on the shape annotation button to add the shape annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface.
-
-
-
-Refer to the following code sample to switch to the circle annotation mode.
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let circleAnnotationButton = document.getElementById('circleAnnotationButton');
-if (circleAnnotationButton) {
- circleAnnotationButton.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("Circle");
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let circleAnnotationButton = document.getElementById('circleAnnotationButton');
-if (circleAnnotationButton) {
- circleAnnotationButton.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode("Circle");
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding a Shape annotation to the PDF document Programmatically
-
-With the PDF Viewer library, you can add a Shape annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's a example of how you can utilize the **addAnnotation()** method to include a Shape annotation programmatically:
-
-```html
-
-
-
-
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addLineAnnotation = document.getElementById('addLineAnnotation');
-if (addLineAnnotation) {
- addLineAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Line", {
- offset: { x: 200, y: 230 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
- });
- }
- });
-}
-
-let addArrowAnnotation = document.getElementById('addArrowAnnotation');
-if (addArrowAnnotation) {
- addArrowAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Arrow", {
- offset: { x: 200, y: 370 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }]
- });
- }
- });
-}
-
-let addRectangleAnnotation = document.getElementById('addRectangleAnnotation');
-if (addRectangleAnnotation) {
- addRectangleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Rectangle", {
- offset: { x: 200, y: 480 },
- pageNumber: 1,
- width: 150,
- height: 75
- });
- }
- });
-}
-
-let addCircleAnnotation = document.getElementById('addCircleAnnotation');
-if (addCircleAnnotation) {
- addCircleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Circle", {
- offset: { x: 200, y: 620 },
- pageNumber: 1,
- width: 90,
- height: 90
- });
- }
- });
-}
-
-let addPolygonAnnotation = document.getElementById('addPolygonAnnotation');
-if (addPolygonAnnotation) {
- addPolygonAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Polygon", {
- offset: { x: 200, y: 800 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }]
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addLineAnnotation = document.getElementById('addLineAnnotation');
-if (addLineAnnotation) {
- addLineAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Line", {
- offset: { x: 200, y: 230 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
- });
- }
- });
-}
-
-let addArrowAnnotation = document.getElementById('addArrowAnnotation');
-if (addArrowAnnotation) {
- addArrowAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Arrow", {
- offset: { x: 200, y: 370 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 370 }, { x: 350, y: 370 }]
- });
- }
- });
-}
-
-let addRectangleAnnotation = document.getElementById('addRectangleAnnotation');
-if (addRectangleAnnotation) {
- addRectangleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Rectangle", {
- offset: { x: 200, y: 480 },
- pageNumber: 1,
- width: 150,
- height: 75
- });
- }
- });
-}
-
-let addCircleAnnotation = document.getElementById('addCircleAnnotation');
-if (addCircleAnnotation) {
- addCircleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Circle", {
- offset: { x: 200, y: 620 },
- pageNumber: 1,
- width: 90,
- height: 90
- });
- }
- });
-}
-
-let addPolygonAnnotation = document.getElementById('addPolygonAnnotation');
-if (addPolygonAnnotation) {
- addPolygonAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Polygon", {
- offset: { x: 200, y: 800 },
- pageNumber: 1,
- vertexPoints: [{ x: 200, y: 800 }, { x: 242, y: 771 }, { x: 289, y: 799 }, { x: 278, y: 842 }, { x: 211, y: 842 }, { x: 200, y: 800 }]
- });
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the existing shape annotation programmatically
-
-To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
-
-Here is an example of how you can use the **editAnnotation()** method:
-
-```html
-
-
-
-
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let editLineAnnotation = document.getElementById('editLineAnnotation');
-if (editLineAnnotation) {
- editLineAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Line") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editArrowAnnotation = document.getElementById('editArrowAnnotation');
-if (editArrowAnnotation) {
- editArrowAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Arrow") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editRectangleAnnotation = document.getElementById('editRectangleAnnotation');
-if (editRectangleAnnotation) {
- editRectangleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Rectangle") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editCircleAnnotation = document.getElementById('editCircleAnnotation');
-if (editCircleAnnotation) {
- editCircleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Circle") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editPolygonAnnotation = document.getElementById('editPolygonAnnotation');
-if (editPolygonAnnotation) {
- editPolygonAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Polygon") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let editLineAnnotation = document.getElementById('editLineAnnotation');
-if (editLineAnnotation) {
- editLineAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Line") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editArrowAnnotation = document.getElementById('editArrowAnnotation');
-if (editArrowAnnotation) {
- editArrowAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Arrow") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editRectangleAnnotation = document.getElementById('editRectangleAnnotation');
-if (editRectangleAnnotation) {
- editRectangleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Rectangle") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editCircleAnnotation = document.getElementById('editCircleAnnotation');
-if (editCircleAnnotation) {
- editCircleAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Circle") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-let editPolygonAnnotation = document.getElementById('editPolygonAnnotation');
-if (editPolygonAnnotation) {
- editPolygonAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].subject === "Polygon") {
- pdfviewer.annotationCollection[i].strokeColor = "#0000FF";
- pdfviewer.annotationCollection[i].thickness = 2;
- pdfviewer.annotationCollection[i].fillColor = "#FFFF00";
- pdfviewer.annotationCollection[i].annotationSelectorSettings.resizerShape = "Circle"
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Editing the properties of the shape annotation
-
-The fill color, stroke color, thickness, and opacity of the shape annotation can be edited using the Edit color tool, Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
-
-### Editing fill color
-
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-
-
-
-### Editing stroke color
-
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
-
-
-### Editing thickness
-
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
-
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-### Editing the line properties
-
-The properties of the line shapes such as line and arrow annotations can be edited using the Line Properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the line and arrow annotations.
-
-Refer to the following code sample to set the default annotation settings.
-
-
-
-## Setting default properties during the control initialization
-
-The properties of the shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'},
- arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'},
- rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'},
- circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'},
- polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- lineSettings : {fillColor: 'blue', opacity: 0.6, strokeColor: 'green'},
- arrowSettings : {fillColor: 'green', opacity: 0.6, strokeColor: 'blue'},
- rectangleSettings : {fillColor: 'yellow', opacity: 0.6, strokeColor: 'orange'},
- circleSettings : {fillColor: 'orange', opacity: 0.6, strokeColor: 'pink'},
- polygonSettings : {fillColor: 'pink', opacity: 0.6, strokeColor: 'yellow'}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/annotations/signature-annotation.md b/ej2-javascript/pdfviewer/js/annotations/signature-annotation.md
deleted file mode 100644
index f1aead3cb..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/signature-annotation.md
+++ /dev/null
@@ -1,257 +0,0 @@
----
-layout: post
-title: Handwritten signature in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Handwritten signature in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Handwritten signature ##Platform_Name## PDF Viewer control
-
-The PDF Viewer control supports adding handwritten signatures to a PDF document. The handwritten signature reduces the paper work of reviewing the content and verifies it digitally.
-
-## Adding a handwritten signature to the PDF document
-
-The handwritten signature can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel will appear.
-
-
-
-* Draw the signature in the signature panel.
-
-
-
-* Then click **Create** button and move the signature using the mouse and place them in the desired location.
-
-
-
-Refer to the following code sample to switch to the handwritten signature mode programmatically.
-
-```html
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let handWrittenSignature = document.getElementById('handWrittenSignature');
-if (handWrittenSignature) {
- handWrittenSignature.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.setAnnotationMode('HandWrittenSignature');
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let handWrittenSignature = document.getElementById('handWrittenSignature');
-if (handWrittenSignature) {
- handWrittenSignature.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.setAnnotationMode('HandWrittenSignature');
- }
- });
-}
-{% endhighlight %}
-{% endtabs %}
-
-
-## How to enable the handwritten signature
-
-The following code snippet describes how to enable the handwritten signature in PDF Viewer. When the value is set to `false` it disables the handwritten signature.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- enableHandwrittenSignature : false,
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- enableHandwrittenSignature : false
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding Handwritten signature programatically to the PDF document
-
-With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [**addAnnotation()**](https://helpej2.syncfusion.com/documentation/api/pdfviewer/annotation/#annotation) method.
-
-Here is an example of how you can use the **addAnnotation()** method to add the Handwritten signature programmatically
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let addHandwrittenSignature = document.getElementById('addHandwrittenSignature');
-if(addHandwrittenSignature){
- addHandwrittenSignature.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("HandWrittenSignature", {
- offset: { x: 220, y: 180 },
- pageNumber: 1,
- width: 150,
- height: 60,
- signatureItem: ['Signature'],
- signatureDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Draw
- },
- canSave: true,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
- });
- pdfviewer.annotation.addAnnotation("HandWrittenSignature", {
- offset: { x: 200, y: 310 },
- pageNumber: 1,
- width: 200,
- height: 65,
- signatureItem: ['Signature'],
- signatureDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false
- },
- canSave: false,
- path: 'Syncfusion',
- fontFamily: "Helvetica",
- });
- pdfviewer.annotation.addAnnotation("Initial", {
- offset: { x: 200, y: 500 },
- pageNumber: 1,
- width: 200,
- height: 80,
- signatureItem: ['Initial'],
- initialDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Upload, hideSaveSignature: false
- },
- canSave: true,
- path: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z"
- });
- }
- });
-}
-
-{% endhighlight %}
-
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let addHandwrittenSignature = document.getElementById('addHandwrittenSignature');
-if(addHandwrittenSignature){
- addHandwrittenSignature.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Initial", {
- offset: { x: 220, y: 180 },
- pageNumber: 1,
- width: 150,
- height: 60,
- signatureItem: ['Initial'],
- initialDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Draw
- },
- canSave: true,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
- });
- pdfviewer.annotation.addAnnotation("Initial", {
- offset: { x: 200, y: 380 },
- pageNumber: 1,
- width: 200,
- height: 65,
- signatureItem: ['Initial'],
- initialDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Text, hideSaveSignature: false
- },
- canSave: false,
- path: 'Syncfusion',
- fontFamily: "Helvetica",
- });
- pdfviewer.annotation.addAnnotation("HandWrittenSignature", {
- offset: { x: 200, y: 500 },
- pageNumber: 1,
- width: 200,
- height: 80,
- signatureItem: ['Signature'],
- signatureDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Upload, hideSaveSignature: false
- },
- canSave: true,
- path: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z"
- });
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Add%20Handwritten%20Signature%20Programmatically)
-
-## Editing the properties of handwritten signature
-
-The stroke color, border thickness, and opacity of the handwritten signature can be edited using the edit stroke color tool, edit thickness tool, and edit opacity tool in the annotation toolbar.
-
-### Editing stroke color
-
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
-
-
-### Editing thickness
-
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
-
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/annotations/stamp-annotation.md b/ej2-javascript/pdfviewer/js/annotations/stamp-annotation.md
deleted file mode 100644
index eac9c3d34..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/stamp-annotation.md
+++ /dev/null
@@ -1,383 +0,0 @@
----
-layout: post
-title: Stamp annotation in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Stamp annotation in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Stamp annotation in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents:
-
-* Dynamic
-* Sign Here
-* Standard Business
-* Custom Stamp
-
-
-
-## Adding stamp annotations to the PDF document
-
-The stamp annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
-
-
-
-* Select the annotation type to be added to the page in the pop-up.
-
-
-
-* You can add the annotation over the pages of the PDF document.
-
-N> While you're in the pan mode, for navigating through the document, and you click on the stamp annotation button to add the stamp annotation , the PDF Viewer control will smoothly transition to text select mode. This seamless transition ensures a fluid experience when switching between different interaction modes within the PDF Viewer interface.
-
-Refer to the following code sample to switch to the stamp annotation mode.
-
-```html
-
-
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib"
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let dynamicStamp = document.getElementById('dynamicStamp');
-if (dynamicStamp) {
- dynamicStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved');
- }
- });
-}
-let signStamp = document.getElementById('signStamp');
-if (signStamp) {
- signStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness');
- }
- });
-}
-let standardBusinessStamp = document.getElementById('standardBusinessStamp');
-if (standardBusinessStamp) {
- standardBusinessStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved');
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, SignStampItem, StandardBusinessStampItem, DynamicStampItem,} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject(Toolbar, Magnification, Navigation, Annotation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer);
-
-let pdfviewer: PdfViewer = new PdfViewer();
-pdfviewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
-pdfviewer.serviceUrl = 'https://services.syncfusion.com/js/production/api/pdfviewer';
-pdfviewer.appendTo('#PdfViewer');
-
-let dynamicStamp = document.getElementById('dynamicStamp');
-if (dynamicStamp) {
- dynamicStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode('Stamp', 'NotApproved');
- }
- });
-}
-let signStamp = document.getElementById('signStamp');
-if (signStamp) {
- signStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, 'Witness');
- }
- });
-}
-let standardBusinessStamp = document.getElementById('standardBusinessStamp');
-if (standardBusinessStamp) {
- standardBusinessStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotationModule.setAnnotationMode('Stamp', undefined, undefined, 'Approved');
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Adding custom stamp to the PDF document
-
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
-* Click the Custom Stamp button.
-
-
-
-* The file explorer dialog will appear, choose the image and then add the image to the PDF page.
-
->The JPG and JPEG image format is only supported in the custom stamp annotations.
-
-## Adding a Stamp annotation to the PDF document Programmatically
-
-With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically:
-
-```html
-
-
-
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let dynamicStamp = document.getElementById('dynamicStamp');
-if (dynamicStamp) {
- dynamicStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Stamp", {
- offset: { x: 200, y: 140 },
- pageNumber: 1
- }, 'Approved');
- }
- });
-}
-let signStamp = document.getElementById('signStamp');
-if (signStamp) {
- signStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Stamp", {
- offset: { x: 200, y: 240 },
- pageNumber: 1
- }, undefined,'Witness');
- }
- });
-}
-let standardBusinessStamp = document.getElementById('standardBusinessStamp');
-if (standardBusinessStamp) {
- standardBusinessStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Stamp", {
- offset: { x: 200, y: 340 },
- pageNumber: 1
- }, undefined, undefined, 'Approved');
- }
- });
-}
-
-let customStamp = document.getElementById('customStamp');
-if (customStamp) {
- customStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation('Stamp',
- {
- offset: { x: 100, y: 440 },
- width: 46,
- author: 'Guest',
- height: 100,
- isLock: true,
- pageNumber: 1,
- customStamps: [
- {
- customStampName: "Image",
- customStampImageSource:
- "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z"
- }
- ]
- });
- }
- });
-}
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let dynamicStamp = document.getElementById('dynamicStamp');
-if (dynamicStamp) {
- dynamicStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Stamp", {
- offset: { x: 200, y: 140 },
- pageNumber: 1
- }, 'Approved');
- }
- });
-}
-let signStamp = document.getElementById('signStamp');
-if (signStamp) {
- signStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Stamp", {
- offset: { x: 200, y: 240 },
- pageNumber: 1
- }, undefined,'Witness');
- }
- });
-}
-let standardBusinessStamp = document.getElementById('standardBusinessStamp');
-if (standardBusinessStamp) {
- standardBusinessStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Stamp", {
- offset: { x: 200, y: 340 },
- pageNumber: 1
- }, undefined, undefined, 'Approved');
- }
- });
-}
-
-let customStamp = document.getElementById('customStamp');
-if (customStamp) {
- customStamp.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation('Stamp',
- {
- offset: { x: 100, y: 440 },
- width: 46,
- author: 'Guest',
- height: 100,
- isLock: true,
- pageNumber: 1,
- customStamps: [
- {
- customStampName: "Image",
- customStampImageSource:
- "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z"
- }
- ]
- });
- }
- });
-}
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the existing sticky note annotation programmatically
-
-To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
-
-Here is an example of how you can use the **editAnnotation()** method:
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-if (editAnnotation) {
- editAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") {
- var width = pdfviewer.annotationCollection[i].bounds.width;
- var height = pdfviewer.annotationCollection[i].bounds.height;
- pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
- pdfviewer.annotationCollection[i].annotationSettings.isLock = true;
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-if (editAnnotation) {
- editAnnotation.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].shapeAnnotationType === "stamp") {
- var width = pdfviewer.annotationCollection[i].bounds.width;
- var height = pdfviewer.annotationCollection[i].bounds.height;
- pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
- pdfviewer.annotationCollection[i].annotationSettings.isLock = true;
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-{% endhighlight %}
-{% endtabs %}
-
-## Setting default properties during control initialization
-
-The properties of the stamp annotation can be set before creating the control using the StampSettings.
-
-After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values.
-Refer to the following code sample to set the default sticky note annotation settings.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- stampSettings : {opacity: 0.3, author: 'Guest User'}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- stampSettings : {opacity: 0.3, author: 'Guest User'}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/annotations/sticky-notes-annotation.md b/ej2-javascript/pdfviewer/js/annotations/sticky-notes-annotation.md
deleted file mode 100644
index 13a78a281..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/sticky-notes-annotation.md
+++ /dev/null
@@ -1,247 +0,0 @@
----
-layout: post
-title: Sticky notes in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Sticky notes in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Sticky notes in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document.
-
-
-
-## Adding a sticky note annotation to the PDF document
-
-Sticky note annotations can be added to the PDF document using the annotation toolbar.
-
-* Click the **Comments** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the position where you want to add sticky note annotation in the PDF document.
-* Sticky note annotation will be added in the clicked positions.
-
- 
-
- Annotation comments can be added to the PDF document using the comment panel.
-
-* Select a Sticky note annotation in the PDF document and right-click it.
-* Select the Comment option in the context menu that appears.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
-
-
-
-## Adding a sticky note annotation to the PDF document Programmatically
-
-With the PDF Viewer library, you can add a sticky note annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's a example of how you can utilize the **addAnnotation()** method to include a sticky note annotation programmatically:
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let stickyNote = document.getElementById('stickyNote');
-if (stickyNote) {
- stickyNote.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("StickyNotes", {
- offset: { x: 100, y: 200 },
- pageNumber: 1,
- isLock: false
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let stickyNote = document.getElementById('stickyNote');
-if (stickyNote) {
- stickyNote.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("StickyNotes", {
- offset: { x: 100, y: 200 },
- pageNumber: 1,
- isLock: false
- });
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Edit the existing sticky note annotation programmatically
-
-To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
-
-Here is an example of how you can use the **editAnnotation()** method:
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let stickyNote = document.getElementById('stickyNote');
-if (stickyNote) {
- stickyNote.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") {
- var width = pdfviewer.annotationCollection[i].bounds.width;
- var height = pdfviewer.annotationCollection[i].bounds.height;
- pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let stickyNote = document.getElementById('stickyNote');
-if (stickyNote) {
- stickyNote.addEventListener('click', function () {
- if (pdfviewer) {
- for (let i = 0; i < pdfviewer.annotationCollection.length; i++) {
- if (pdfviewer.annotationCollection[i].shapeAnnotationType === "sticky") {
- var width = pdfviewer.annotationCollection[i].bounds.width;
- var height = pdfviewer.annotationCollection[i].bounds.height;
- pdfviewer.annotationCollection[i].bounds = { x: 100, y: 100, width: width, height: height };
- pdfviewer.annotation.editAnnotation(pdfviewer.annotationCollection[i]);
- }
- }
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Editing the properties of the sticky note annotation
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-### Editing comments
-
-The comment, comment reply, and comment status of the annotation can be edited using the Comment Panel.
-
-* Open the comment panel using the Comment Panel button showing in the annotation toolbar.
-
- 
-
-You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel.
-
- 
-
-## Setting default properties during the control initialization
-
-The properties of the sticky note annotation can be set before creating the control using the StickyNoteSettings.
-
-After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. Refer to the following code sample to set the default sticky note annotation settings.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- stickyNotesSettings : {author: 'Syncfusion'}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- stickyNotesSettings : {author: 'Syncfusion'}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## Disabling sticky note annotations
-
-The PDF Viewer control provides an option to disable the sticky note annotations feature. The code sample for disabling the feature is as follows.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- enableStickyNotesAnnotation : false
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- enableStickyNotesAnnotation : false
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/annotations/text-markup-annotation.md b/ej2-javascript/pdfviewer/js/annotations/text-markup-annotation.md
deleted file mode 100644
index 5152d76d9..000000000
--- a/ej2-javascript/pdfviewer/js/annotations/text-markup-annotation.md
+++ /dev/null
@@ -1,570 +0,0 @@
----
-layout: post
-title: Text markup annotation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Text markup annotation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Text markup annotation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Text markup annotation in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer control provides the options to add, edit, and delete text markup annotations such as highlight, underline, strikethrough and squiggly annotations in the PDF document.
-
-
-
-## Highlight a text
-
-There are two ways to highlight a text in the PDF document:
-
-1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Highlight** option in the context menu that appears.
-
-
-
-
-2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Highlight** button in the annotation toolbar. It enables the highlight mode.
- * Select the text and the highlight annotation will be added.
- * You can also select the text and apply the highlight annotation using the **Highlight** button.
-
-
-
-In the pan mode, if the highlight mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for highlighting the text.
-
-Refer to the following code snippet to switch to highlight mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/highlight-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/highlight-mode-cs1" %}
-
-Refer to the following code snippet to switch back to normal mode from highlight mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/highlight-normal-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/highlight-normal-mode-cs1" %}
-
-## Highlight a text programmatically
-
-The PDF Viewer library enables you to programmatically highlight text within the PDF Viewer control using the [**addAnnotation()**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's an example of how you can use the **addAnnotation()** method to apply highlighting programmatically:
-
-```html
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let highlight = document.getElementById('highlight');
-if (highlight) {
- highlight.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Highlight", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let highlight = document.getElementById('highlight');
-if (highlight) {
- highlight.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Highlight", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-{% endhighlight %}
-{% endtabs %}
-
-## Underline a text
-
-There are two ways to underline a text in the PDF document:
-
-1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Underline** option in the context menu that appears.
-
-
-
-2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Underline** button in the annotation toolbar. It enables the underline mode.
- * Select the text and the underline annotation will be added.
- * You can also select the text and apply the underline annotation using the **Underline** button.
-
-
-
-In the pan mode, if the underline mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for underlining the text.
-
-Refer to the following code snippet to switch to underline mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/underline-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/underline-mode-cs1" %}
-
-
-Refer to the following code snippet to switch back to normal mode from underline mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/underline-normal-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/underline-normal-mode-cs1" %}
-
-## Underline a text programmatically
-
-The PDF Viewer library enables you to programmatically Underline text within the PDF Viewer control using the [**addAnnotation()**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's an example of how you can use the **addAnnotation()** method to apply Underline programmatically:
-
-```html
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let underline = document.getElementById('underline');
-if (underline) {
- underline.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Underline", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let underline = document.getElementById('underline');
-if (underline) {
- underline.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Underline", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-## Strikethrough a text
-
-There are two ways to strikethrough a text in the PDF document:
-
-1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Strikethrough** option in the context menu that appears.
-
-
-
-2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Strikethrough** button in the annotation toolbar. It enables the strikethrough mode.
- * Select the text and the strikethrough annotation will be added.
- * You can also select the text and apply the strikethrough annotation using the **Strikethrough** button.
-
-
-
-In the pan mode, if the strikethrough mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for striking through the text.
-
-Refer to the following code snippet to switch to strikethrough mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/strikethrough-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/strikethrough-mode-cs1" %}
-
-Refer to the following code snippet to switch back to normal mode from underline mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/strikethrough-normal-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/strikethrough-normal-mode-cs1" %}
-
-## Strikethrough a text programmatically
-
-The PDF Viewer library enables you to programmatically Strikethrough text within the PDF Viewer control using the [**addAnnotation()**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically:
-
-```html
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let strikethrough = document.getElementById('strikethrough');
-if (strikethrough) {
- strikethrough.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Strikethrough", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let strikethrough = document.getElementById('strikethrough');
-if (strikethrough) {
- strikethrough.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Strikethrough", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-{% endhighlight %}
-{% endtabs %}
-
-## Squiggly a text
-
-There are two ways to add squiggly to a text in the PDF document:
-
-1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Squiggly** option in the context menu that appears.
-
-
-
-2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Squiggly** button in the annotation toolbar. It enables the squiggly mode.
- * Select the text and the squiggly annotation will be added.
- * You can also select the text and apply the squiggly annotation using the **Squiggly** button.
-
-
-
-In the pan mode, if the squiggly mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for adding squiggly to the text.
-
-Refer to the following code snippet to switch to squiggly mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/squiggly-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/squiggly-mode-cs1" %}
-
-Refer to the following code snippet to switch back to normal mode from squiggly mode.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/squiggly-normal-mode-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/squiggly-normal-mode-cs1" %}
-
-## Squiggly a text programmatically
-
-The PDF Viewer library enables you to programmatically add squiggly to text within the PDF Viewer control using the [**addAnnotation()**](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/annotation/#addannotation) method.
-
-Here's an example of how you can use the **addAnnotation()** method to apply squiggly programmatically:
-
-```html
-
-```
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2-pdfviewer-lib",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-let squiggly = document.getElementById('squiggly');
-if (squiggly) {
- squiggly.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Squiggly", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl : "https://services.syncfusion.com/js/production/api/pdfviewer",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-let squiggly = document.getElementById('squiggly');
-if (squiggly) {
- squiggly.addEventListener('click', function () {
- if (pdfviewer) {
- pdfviewer.annotation.addAnnotation("Squiggly", {
- bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
- pageNumber: 1
- });
- }
- });
-}
-{% endhighlight %}
-{% endtabs %}
-
-## Deleting a text markup annotation
-
-The selected annotation can be deleted by the following ways:
-
-1. Using Delete key
- * Select the annotation to be deleted.
- * Click the Delete key in the keyboard. The selected annotation will be deleted.
-
-2. Using the annotation toolbar
- * Select the annotation to be deleted.
- * Click the **Delete Annotation** button in the annotation toolbar. The selected annotation will be deleted.
-
-
-
-## Editing the properties of the text markup annotation
-
-The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar.
-
-### Editing color
-
-The color of the annotation can be edited using the color palette provided in the Edit Color tool.
-
-
-
-### Editing opacity
-
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
-
-
-## Setting default properties during control initialization
-
-The properties of the text markup annotation can be set before creating the control using highlightSettings, underlineSettings, strikethroughSettings and squigglySettings.
-
->After editing the default color and opacity using the Edit Color tool and Edit Opacity tool, they will be changed to the selected values.
-
-Refer to the following code snippet to set the default annotation settings.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"",
- highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},
- underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''},
- strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''},
- squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''}
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},
- underlineSettings: {author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9, modifiedDate: ''},
- strikethroughSettings: {author: 'Guest User', subject: 'Not Important', color: '#ff00ff', opacity: 0.9, modifiedDate: ''},
- squigglySettings: {author: 'Guest User', subject: 'Spelling Error', color: '#ff0000', opacity: 0.9, modifiedDate: ''}
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## Performing undo and redo
-
-The PDF Viewer performs undo and redo for the changes made in the PDF document. In text markup annotation, undo and redo actions are provided for:
-
-* Inclusion of the text markup annotations.
-* Deletion of the text markup annotations.
-* Change of either color or opacity of the text markup annotations.
-
-Undo and redo actions can be done by the following ways:
-
-1. Using keyboard shortcuts:
- After performing a text markup annotation action, you can undo it by using Ctrl + Z shortcut and redo by using Ctrl + Y shortcut.
-2. Using toolbar:
- Undo and redo can be done using the **Undo** tool and **Redo** tool provided in the toolbar.
-
-Refer to the following code snippet for calling undo and redo actions from the client-side.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-text-markup-annotation/undo-redo-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-text-markup-annotation/undo-redo-cs1" %}
-
-## Saving the text markup annotation
-
-When you click the download tool in the toolbar, the text markup annotations will be saved in the PDF document. This action will not affect the original document.
-
-## Printing the text markup annotation
-
-When the print tool is selected in the toolbar, the PDF document will be printed along with the text markup annotations added to the pages. This action will not affect the original document.
-
-## Disabling text markup annotation
-
-The PDF Viewer control provides an option to disable the text markup annotation feature. The code snippet for disabling the feature is as follows.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableTextMarkupAnnotation: false,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableTextMarkupAnnotation: false,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## See also
-
-* [Toolbar items](../toolbar)
-* [Feature Modules](../feature-module)
diff --git a/ej2-javascript/pdfviewer/js/download.md b/ej2-javascript/pdfviewer/js/download.md
deleted file mode 100644
index ba4bceb10..000000000
--- a/ej2-javascript/pdfviewer/js/download.md
+++ /dev/null
@@ -1,141 +0,0 @@
----
-layout: post
-title: Download in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Download in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Download
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# Download in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer supports downloading the loaded PDF file. You can enable/disable the download using the following code snippet.
-
-```html
-{% raw %}
-
-
-
-Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endraw %}
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableDownload: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
-});
-
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableDownload: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
-});
-
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-You can invoke download action using following code snippet.,
-
-```
-
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableDownload: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('download').addEventListener('click', function () {
- pdfviewer.download()
-});
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableDownload: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('download').addEventListener('click', function () {
- pdfviewer.download()
-});
-
-{% endhighlight %}
-{% endtabs %}
-
-## How to get the base64 string while downloading the PDF document
-
-The [downloadEnd](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#downloadend) event of the PDF viewer allows you to get the downloaded document as a base64 string.
-
-The following code illustrates how to get the invoke the download action in a button click to get the downloaded document as a base64 string. And load the document from base64 string in another button click.
-
-```
-
-
-
-
-```
-
-```ts
-
-var pdfstream;
-document.getElementById('download').addEventListener('click', function () {
- //API to perform download action.
- viewer.download();
- viewer.downloadEnd = function (args) {
- pdfstream = args.downloadDocument;
- //Print the document as a base64 string in the console window.
- console.log(pdfstream);
- };
-});
-
-document.getElementById('load').addEventListener('click', function () {
- //Load the base64 string in the viewer.
- viewer.load(pdfstream, null);
-});
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Download/Get%20the%20base64%20string%20while%20downloading).
-
-## See also
-
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/ej1-api-migration.md b/ej2-javascript/pdfviewer/js/ej1-api-migration.md
deleted file mode 100644
index 9089193be..000000000
--- a/ej2-javascript/pdfviewer/js/ej1-api-migration.md
+++ /dev/null
@@ -1,80 +0,0 @@
----
-layout: post
-title: Ej1 api migration in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Ej1 api migration in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Ej1 api migration
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Ej1 api migration in ##Platform_Name## Pdfviewer control
-
-This article describes API migration process of PDF Viewer component from Essential JS 1 to Essential JS 2.
-
-## Properties
-
-
-
-| Behavior | API in Essential JS 1 | API in Essential JS 2 |
-|---|---|---|
-| Localization | **Property**: *locale* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', locale:"es-ES" });` | **Property**: *locale* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print); pdfviewer.appendTo('#PdfViewer');`|
-|To set the PDF document path for initial loading | **Property**: *documentPath* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentPath: "HTTP Succinctly.pdf" });` | **Property**: *documentPath* `var pdfviewer = new ej.pdfviewer.PdfViewer({ documentPath: "PDF_Succinctly.pdf", serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| To get the number of the page being displayed in the PDF Viewer | **Property**: *currentPageNumber* `$var pdfviewerObj = $("#viewer").data("ejPdfViewer");var currentPage = pdfviewerObj.currentPageNumber;` | **Property**: *currentPageNumber* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0];var currentPage = pdfviewerObj.currentPageNumber;`|
-| Enables or disables the hyperlinks in PDF document | **Property**: *enableHyperlink* `var pdfviewerObj =$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableHyperlink: false });` | **Property**: *enableHyperlink* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer',enableHyperlink: false});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Enables or disables the text selection in PDF document | **Property**: *enableTextSelection* `$var pdfviewerObj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', enableTextSelection: false });` | **Property**: *enableTextSelection* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer',enableTextSelection: false});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| To get the name of the PDF document loaded in PDF Viewer | **Property**: *fileName* `var pdfviewerObj = $("#viewer").data("ejPdfViewer"); var fileName = pdfviewerObj.fileName;` | **Property**: *fileName* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; var currentPage = pdfviewerObj.fileName;`|
-| Specifies the open state of hyperlink in the PDF document | **Property**: *hyperlinkOpenState* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', hyperlinkOpenState : ej.PdfViewer.LinkTarget.NewTab});` | **Property**: *hyperlinkOpenState* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer',hyperlinkOpenState :"NewTab",});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Checks whether the PDF document is edited | **Property**: *isDocumentEdited* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");var isEdited = pdfviewerObj.isDocumentEdited;` | **Property**: *isDocumentEdited* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; var isDocumentEdited = pdfviewerObj.isDocumentEdited;`|
-| Gets the total number of pages in PDF document | **Property**: *pageCount* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");var pageCount = pdfviewerObj.pageCount;` | **Property**: *pageCount* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; var pageCount = pdfviewerObj.pageCount;`|
-| Sets the PDF Web API service URL | **Property**: *serviceUrl* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentPath: "HTTP Succinctly.pdf" });` | **Property**: *serviceUrl* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer',});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Specifies the viewer interaction mode | **Property**: *interactionMode* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', interactionMode: ej.PdfViewer.InteractionMode.Pan})` | **Property**: *interactionMode* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer',interactionMode:"Pan"});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Gets the current zoom percentage of the PDF document in viewer | **Property**: *zoomPercentage* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");var zoomPercentage = pdfviewerObj.zoomPercentage;` | **Property**: *zoomPercentage* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; var zoomPercentage = pdfviewerObj.zoomPercentage;`|
-| Specifies the name of the action method in the server | **Property**: *serverActionSettings* `$("#viewer").ejPdfViewer ({ServiceUrl:'../api/PdfViewer', serverActionSettings: { load: "Load", fileUpload: "FileUpload", print: "Print", download: "Download" } });});` | **Property**: *serverActionSettings* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer',serverActionSettings: {load:'Upload', renderPages:'RenderPdfPages', renderComments:'RenderAnnotationComments', renderThumbnail:'RenderThumbnailImages' , unload:'Unload', print:'PrintImages', download:'Donwload' },});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Defines the settings of the PdfViewer toolbar | **Property**: *toolbarSettings* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', toolbarSettings: { showTooltip: false } });` | **Property**: *toolbarSettings* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer', toolbarSettings: { showTooltip : true, toolbarItem: ['OpenOption']}});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Gets/sets the settings of the highlight annotation | **Property**: *highlightSettings* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', highlightSettings: {color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true} });` | **Property**: *highlightSettings* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer', highlightSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Gets/sets the settings of the underline annotation | **Property**: *underlineSettings* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', underlineSettings: {color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true} });` | **Property**: *underlineSettings* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer', underlineSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-| Gets/sets the settings of the strikethrough annotation | **Property**: *strikethroughSettings* `$("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', strikethroughSettings: {color: "#ffff00", author: "Guest", opacity: 0.5, subject: "highlight", modifiedDate: "2017-03-27 12:00:51", isLocked: true} });` | **Property**: *strikethroughSettings* `var pdfviewer = new ej.pdfviewer.PdfViewer({serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer', strikethroughSettings: {author: 'Guest User', subject: 'Important', color: '#ffff00', opacity: 0.9, modifiedDate: ''},});ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-
-## Methods
-
-
-
-| Behavior | API in Essential JS 1 | API in Essential JS 2 |
-| --- | --- | --- |
-| Downloads the PDF document being loaded in the ejPdfViewer control | **Property**: *download()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.download();` | **Property**: *download()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.download();`|
-| Scales the page to fit the page in the container in the control | **Property**: *fitToPage()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.fitToPage();` | **Property**: *fitToPage()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.magnification.fitToPage();`|
-| Scales the page to fit the page width to the width of the container in the control | **Property**: *fitToWidth()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.fitToWidth();` | **Property**: *fitToWidth()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.magnification.fitToWidth();`|
-| Magnifies the page to the next value in the zoom drop down list | **Property**: *zoomIn()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.zoomIn();` | **Property**: *zoomIn()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.magnification.zoomIn();`|
-|Shrinks the page to the previous value in the magnification in the drop down list | **Property**: *zoomOut()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.zoomOut();` | **Property**: *zoomOut()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.magnification.zoomOut();`|
-|Shrinks the page to the previous value in the magnification in the drop down list | **Property**: *zoomTo(zoomValue)* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.zoomTo(130);` | **Property**: *zoomTo(zoomValue)* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.magnification.zoomTo("130");`|
-|Navigates to the first page of PDF document | **Property**: *goToFirstPage()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.goToFirstPage();` | **Property**: *goToFirstPage()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.navigation.goToFirstPage();`|
-|Navigates to the next page of PDF document | **Property**: *goToNextPage()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.goToNextPage();` | **Property**: *goToNextPage()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.navigation.goToNextPage();`|
-|Navigates to the previous page of PDF document | **Property**: *goToPreviousPage()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.goToPreviousPage();` | **Property**: *goToPreviousPage()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.navigation.goToPreviousPage();`|
-|Navigates to the last page of PDF document | **Property**: *goToLastPage()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.goToLastPage();` | **Property**: *goToLastPage()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.navigation.goToLastPage();`|
-|Navigates to the specific page in the PDF document | **Property**: *goToPage(pageNumber)* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.goToPage(3);` | **Property**: *goToPage(pageNumber)* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.navigation.goToPage(3);`|
-|Loads the document and displays it in PDF Viewer | **Property**: *load(fileName)* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.load("Manual");` | **Property**: *load(fileName, password)* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.load("Manual",null);`|
-|Searches the target text in the PDF document and highlights the occurrences in the pages | **Property**: *searchText(targetText)* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.searchText("name");` | **Property**: *searchText(searchText,isMatchCase)* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.textSearch.searchText("name", true);`|
-|Searches the next occurrence of the searched text from the current occurrence in the PDF Viewer control | **Property**: *searchNext()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.searchNext();` | **Property**: *searchNext()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.textSearch.searchNext();`|
-|Searches the previous occurrence of the searched text from the current occurrence in the PDF viewer control | **Property**: *searchPrevious()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.searchPrevious();` | **Property**: *searchPrevious()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.textSearch.searchPrevious();`|
-|Cancels the text search and removes the highlighted occurrences from the PDF Viewer | **Property**: *cancelSearchText()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.cancelSearchText();` | **Property**: *cancelSearchText()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.textSearch.cancelSearchText();`|
-|Prints the PDF document| **Property**: *print()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.print();` | **Property**: *print()* `var pdfviewer = new ej.pdfviewer.PdfViewer({locale: 'es-ES', serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer'}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');pdfviewer.print.print();`|
-|Performs redo function for the included annotations in the PDF document| **Property**: *redo()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.redo();` | **Property**: *redo()* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; pdfviewerObj.annotation.redo();`|
-|Performs undo function for the included annotations in the PDF document| **Property**: *undo()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.undo();` | **Property**: *undo()* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; pdfviewerObj.annotation.undo();`|
-|Unloads the PDF document being displayed in the PDF viewer| **Property**: *unload()* `var pdfviewerObj = $("#viewer").data("ejPdfViewer");pdfviewerObj.unload();` | **Property**: *unload()* `var pdfviewerObj = document.getElementById("PdfViewer").ej2_instances[0]; pdfviewerObj.unload();`|
-
-## Events
-
-
-
-| Behavior | API in Essential JS 1 | API in Essential JS 2 |
-| --- | --- | --- |
-|Triggers when the PDF document gets loaded and is ready to view in the Control| **Property**: *documentLoad* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', documentLoad:"documentLoaded" });});function documentLoaded(args) {alert("The document" +args.fileName + "is ready to view");}` | **Property**: *documentLoad* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',documentLoad: function () {alert("The PDF document is Loaded")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-|Triggers when hyperlink in the PDF document is clicked| **Property**: *hyperlinkClick* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', hyperlinkClick:"onHyperlinkClicked" });});function onHyperlinkClicked(args) {alert(""The hyperlink is " + args.hyperlink");}` | **Property**: *hyperlinkClick* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',hyperlinkClick: function () {alert("The hyperlink is clicked")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-|Triggers when there is a change in current page number| **Property**: *pageChange* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer',pageChange:"currentPageChanged" });});function currentPageChanged(args) {alert("The current page number is " + args.currentPageNumber);}` | **Property**: *pageChange* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',pageChange: function () {alert("Current page is changed")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-|Triggers when the mouse click is performed over the page of the PDF document| **Property**: *pageClick* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', pageClick: "onPageClicked" });});function onPageClicked(args) { alert("X-coordinate :" + args.XCoordinate + " Y-coordinate :" + args.YCoordinate);}` | **Property**: *pageClick* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',pageClick: function () {alert("Page is clicked")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-|Triggers when there is a change in the magnification value| **Property**: *zoomChange* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', zoomChange: "zoomChanged" });});function onPageClicked(args) { alert("The magnification changes from " + args.previousZoomPercentage + " to" + args.currentZoomPercentage);}` | **Property**: *zoomChange* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',zoomChange: function () {alert("Zoom Value is changed")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-|Triggers when an annotation is added over the page of the PDF document| **Property**: *annotationAdd* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', annotationAdd: "annotationAdd" });});function annotationAdd(args) { alert("The annotation is added to the PDF document successfully");}` | **Property**: *annotationAdd* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',annotationAdd: function () { alert("The annotation is added to the PDF document successfully")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-|Triggers when an annotation is removed from the page of the PDF document| **Property**: *annotationRemove* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', annotationRemove: "annotationRemove" });});function annotationRemove(args) {alert("The annotation is removed from the PDF document successfully");}` | **Property**: *annotationRemove* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',annotationRemove: function () {alert("The annotation is removed from the PDF document successfully")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
-|Triggers when the property of the annotation is changed in the page of the PDF document| **Property**: *annotationPropertiesChange* `$(function () {var obj = $("#viewer").ejPdfViewer({ serviceUrl: '../api/PdfViewer', annotationPropertiesChange: "annotationPropertiesChange" });});function annotationPropertiesChange(args) {alert("The annotation property is changed successfully");}` | **Property**: *annotationPropertiesChange* `var pdfviewer = new ej.pdfviewer.PdfViewer({ serviceUrl:https://services.syncfusion.com/js/production/api/pdfviewer',annotationPropertiesChange: function () {alert("The annotation property is changed successfully")}}); ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch,ej.pdfviewer.Navigation,ej.pdfviewer.Print);pdfviewer.appendTo('#PdfViewer');`|
diff --git a/ej2-javascript/pdfviewer/js/feature-module.md b/ej2-javascript/pdfviewer/js/feature-module.md
deleted file mode 100644
index be585ca63..000000000
--- a/ej2-javascript/pdfviewer/js/feature-module.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-layout: post
-title: Feature module in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Feature module in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Feature module
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Feature module in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer features are segregated into individual feature-wise modules to enable selectively referencing in the application. The required modules should be injected to extend its functionality. The following are the selective modules of PDF Viewer that can be included as required:
-
-The available PdfViewer modules are:
-
-* **Toolbar**:- Built-in toolbar for better user interaction.
-* **Magnification**:- Perform zooming operation for better viewing experience.
-* **Navigation**:- Easy navigation across the PDF pages.
-* **LinkAnnotation**:- Easy navigation within and outside of the PDF document.
-* **ThumbnailView**:- Easy navigation with in the PDF document.
-* **BookmarkView**:- Easy navigation based on the bookmark content of the PDF document.
-* **TextSelection**:- Select and copy text from a PDF file.
-* **TextSearch**:- Search a text easily across the PDF document.
-* **Print**:- Print the entire document or a specific page directly from the browser.
-* **Annotation**:- Annotations can be added or edited in the PDF document.
-* **FormFields**:- Preserve the form fields in the PDF document.
-* **FormDesigner**:- Form fields can be added or edited in the PDF document.
-
->In addition to injecting the required modules in your application, enable corresponding properties to extend the functionality for a PDF Viewer instance.
-Refer to the following table.
-
-| Module | Dependent modules to be injected for extending the functionality of PDF Viewer in your application | Property to enable the functionality for a PDF Viewer instance |
-|---|---|---|
-|Toolbar|`PdfViewer.Inject(Toolbar)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableToolbar: true });`|
-|Magnification|`PdfViewer.Inject(Magnification)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableMagnification: true });`|
-|Navigation|`PdfViewer.Inject(Navigation)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableNavigation: true });`|
-|LinkAnnotation|`PdfViewer.Inject(LinkAnnotation)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableHyperlink: true });`|
-|ThumbnailView|`PdfViewer.Inject(ThumbnailView)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableThumbnail: true });`|
-|BookmarkView|`PdfViewer.Inject(BookmarkView)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableBookmark: true });`|
-|TextSelection|`PdfViewer.Inject(TextSelection)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableTextSelection: true });`|
-|TextSearch|`PdfViewer.Inject(TextSearch)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableTextSearch: true });`|
-|Print|`PdfViewer.Inject(Print)`|`let pdfViewer: PdfViewer = new PdfViewer({ enablePrint: true });`|
-|Annotation|`PdfViewer.Inject(Annotation)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableAnnotation: true });`|
-|FormFields|`PdfViewer.Inject(FormFields)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableFormFields: true });`|
-|FormDesigner|`PdfViewer.Inject(FormDesigner)`|`let pdfViewer: PdfViewer = new PdfViewer({ enableFormDesigner: true });`|
-
-## See also
-
-* [Toolbar items](./toolbar)
-* [Toolbar customization](./how-to/customization)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/form-designer/create-programmatically.md b/ej2-javascript/pdfviewer/js/form-designer/create-programmatically.md
deleted file mode 100644
index 0a117ca75..000000000
--- a/ej2-javascript/pdfviewer/js/form-designer/create-programmatically.md
+++ /dev/null
@@ -1,1381 +0,0 @@
----
-layout: post
-title: Create programmatically in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Create programmatically in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Create programmatically
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Create programmatically in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are:
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-## Add a form field to PDF document programmatically
-
-Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/addformfield-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/addformfield-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/addformfield-cs1" %}
-
-## Edit/Update form field programmatically
-
-Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter to updateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/updateformfield-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/updateformfield-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/updateformfield-cs1" %}
-
-## Delete form field programmatically
-
-Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/deleteformfield-cs1/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/deleteformfield-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> To set up the **server-backed PDF Viewer**,
-Add the below `serviceUrl` in the `index.html` file
-`serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'`
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/deleteformfield-cs1" %}
-
-## Saving the form fields
-
-When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference.
-
-
-
-You can invoke download action using following code snippet.
-
-
-```
-
-
-```
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableDownload: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('download').addEventListener('click', function () {
- pdfviewer.download()
-});
-
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableDownload: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('download').addEventListener('click', function () {
- pdfviewer.download()
-});
-
-{% endhighlight %}
-{% endtabs %}
-
-
-## Printing the form fields
-
-When the print icon is selected on the toolbar, the PDF document will be printed along with the Form Fields added to the pages and this action will not affect the original document. Refer the below GIF for further reference.
-
-
-
-You can invoke print action using the following code snippet.,
-
-```
-
-
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('print').addEventListener('click', function () {
- pdfviewer.print.print();
-});
-
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('print').addEventListener('click', function () {
- pdfviewer.print.print();
-});
-
-{% endhighlight %}
-{% endtabs %}
-
-## setFormFieldMode programmatically
-
-The **setFormFieldMode** method is a function in the Syncfusion PDF Viewer library that allows you to add a form field dynamically by passing the type of the form field. You can pass the form fields as a parameter like below.
-
-```
-
-
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('addPasswordField').addEventListener('click', function () {
- pdfviewer.formDesignerModule.setFormFieldMode("Password");
-});
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('addPasswordField').addEventListener('click', function () {
- pdfviewer.formDesignerModule.setFormFieldMode("Password");
-});
-{% endhighlight %}
-{% endtabs %}
-
-## Open the existing PDF document
-
-We can open the already saved PDF document contains Form Fields in it by clicking the open icon in the toolbar. Refer the below GIF for further reference.
-
-
-
-## Validate form fields
-
-The form fields in the PDF Document will be validated when the `enableFormFieldsValidation` is set to true and hook the validateFormFields. The validateFormFields will be triggered when the PDF document is downloaded or printed with the non-filled form fields. The non-filled fields will be obtained in the `nonFillableFields` property of the event arguments of validateFormFields.
-
-Add the following code snippet to validate the form fields,
-
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-viewer.enableFormFieldsValidation = true;
-viewer.validateFormFields = function (args) {
- var nonfilledFormFields = args.nonFillableFields;
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-viewer.enableFormFieldsValidation = true;
-viewer.validateFormFields = function (args) {
- var nonfilledFormFields = args.nonFillableFields;
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-
-## Export and import form fields
-
-The PDF Viewer control provides the support to export and import the form field data in the following formats using the `importFormFields`, `exportFormFields`, and `exportFormFieldsAsObject` methods.
-
-* FDF
-* XFDF
-* JSON
-
-### Export and import as FDF
-
-Using the `exportFormFields` method, the form field data can be exported in the specified data format. This method accepts two parameters:
-
-* The first one must be the destination path for the exported data. If the path is not specified, it will ask for the location while exporting.
-* The second parameter should be the format type of the form data.
-
-The following code explains how to export the form field data as FDF.
-
-```javascript
-
-
-
-
-
-
-// Event triggers on Export FDF button click.
-document.getElementById('exportFdf').addEventListener('click', ()=> {
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Fdf);
-});
-
-// Event triggers on Import FDF button click.
-document.getElementById('importFdf').addEventListener('click', ()=> {
- // The file for importing the form fields should be placed in the desired location, and the path should be provided correctly.
- viewer.importFormFields('File', FormFieldDataFormat.Fdf);
-});
-
-```
-
-### Export and import as XFDF
-
-The following code explains how to export the form field data as XFDF.
-
-```javascript
-
-
-
-
-
-// Event triggers on Export XFDF button click.
-document.getElementById('exportXfdf').addEventListener('click', ()=> {
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Xfdf);
-});
-
-// Event triggers on Import XFDF button click.
-document.getElementById('importXfdf').addEventListener('click', ()=> {
- // The file for importing the form fields should be placed in the desired location, and the path should be provided correctly.
- viewer.importFormFields('File', FormFieldDataFormat.Xfdf);
-});
-```
-
-### Export and import as JSON
-
-The following code explains how to export the form field data as JSON.
-
-```javascript
-
-
-
-
-
-
-// Event triggers on Export JSON button click.
-document.getElementById('exportJson').addEventListener('click', ()=> {
- // Data must be the desired path for the exported document.
- viewer.exportFormFields('Data', FormFieldDataFormat.Json);
-});
-
-// Event triggers on Import JSON button click.
-document.getElementById('importJson').addEventListener('click', ()=> {
- // The file for importing the form fields should be placed in the desired location, and the path should be provided correctly
- viewer.importFormFields('File', FormFieldDataFormat.Json);
-});
-```
-
-### Export and import as Object
-
-The PDF Viewer control supports exporting the form field data as an object, and the exported data will be imported into the current PDF document from the object.
-
-The following code shows how to export the form field data as an object and import the form field data from that object into the current PDF document via a button click.
-
-```javascript
-
-
-
-
-
-
-var exportedData;
-
-// Event triggers on Export Object button click.
-document.getElementById('exportDataAsObject').addEventListener('click', ()=> {
- // Export the form field data to an FDF object.
- viewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(value => {
- exportedData = value;
- });
-
- // // Export the form field data to an XFDF object.
- // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(value =>{
- // exportedData = value;
- // })
-
- // // Export the form field data to an JSON object.
- // viewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(value =>{
- // exportedData = value;
- // })
-});
-
-// Event triggers on Import Data button click.
-document.getElementById('importData').addEventListener('click', ()=> {
- // Import the form field data from the FDF object into the current PDF document.
- viewer.importFormFields(exportedData, FormFieldDataFormat.Fdf);
-
- //// Import the form field data from the XFDF object into the current PDF document.
- //viewer.importFormFields (exportedData, FormFieldDataFormat.Xfdf);
-
- //// Import the form field data from the FDF object into the current PDF document.
- //viewer.importFormFields (exportedData, FormFieldDataFormat.Json);
-});
-```
-## Form field properties
-
-Form field properties in Syncfusion PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion PDF Viewer and explains how to use them effectively.
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-### Signature and initial fields settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the signature field properties on a button click.
-
-```html
-
-
-```
-
-```javascript
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Initial',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Initial',
- thickness: 4
- });
-});
-
-```
-
-The following code example explains how to update the properties of the signature field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the signature field settings
-pdfviewer.signatureFieldSettings = {
- // Set the name of the form field element.
- name: 'Signature',
- // Specify whether the signature field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the signature field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Signature',
- // Set the thickness of the Signature field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specify the properties of the signature Dialog Settings in the signature field.
- signatureDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Draw | ej.pdfviewer.DisplayMode.Upload
- | ej.pdfviewer.DisplayMode.Text,
- hideSaveSignature: false,
- },
- // Specify the properties of the signature indicator in the signature field.
- signatureIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Signature Field',
- color: 'white'
- },
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the signature field settings
-pdfviewer.signatureFieldSettings = {
- // Set the name of the form field element.
- name: 'Signature',
- // Specify whether the signature field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the signature field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Signature',
- // Set the thickness of the Signature field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specify the properties of the signature Dialog Settings in the signature field.
- signatureDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Draw | ej.pdfviewer.DisplayMode.Upload
- | ej.pdfviewer.DisplayMode.Text,
- hideSaveSignature: false,
- },
- // Specify the properties of the signature indicator in the signature field.
- signatureIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Signature Field',
- color: 'white'
- },
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-The following code example explains how to update the properties of the initial field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the signature field settings
-pdfviewer.initialFieldSettings = {
- // Set the name of the form field element.
- name: 'Initial',
- // Specify whether the initial field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the initial field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Initial',
- // Set the thickness of the initial field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies the properties of the initial indicator in the initial field.
- initialIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Initial Field',
- color: 'white'
- },
- // Specify the properties of the initial Dialog Settings in the intial field.
- initialDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Draw | ej.pdfviewer.DisplayMode.Upload
- | ej.pdfviewer.DisplayMode.Text,
- hideSaveSignature: false
- }
-};
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the signature field settings
-pdfviewer.initialFieldSettings = {
- // Set the name of the form field element.
- name: 'Initial',
- // Specify whether the initial field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the initial field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Initial',
- // Set the thickness of the initial field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies the properties of the initial indicator in the initial field.
- initialIndicatorSettings: {
- opacity: 1,
- backgroundColor: '#237ba2',
- height: 50,
- fontSize: 15,
- text: 'Initial Field',
- color: 'white'
- },
- // Specify the properties of the initial Dialog Settings in the intial field.
- initialDialogSettings: {
- displayMode: ej.pdfviewer.DisplayMode.Draw | ej.pdfviewer.DisplayMode.Upload
- | ej.pdfviewer.DisplayMode.Text,
- hideSaveSignature: false
- }
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### Textbox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the Textbox field properties on a button click.
-
-```html
-
-
-```
-
-```javascript
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Textbox',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Textbox',
- thickness: 4,
- value:'Textbox',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 0,
- isMultiline: false,
- bounds: { X: 146, Y: 229, Width: 150, Height: 24 }
- });
-});
-
-
-```
-
-The following code example explains how to update the properties of the Textbox field added to the document from the form designer toolbar.
-
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the Textbox field settings
-pdfviewer.textFieldSettings = {
- // Set the name of the form field element.
- name: 'Textbox',
- // Specify whether the Textbox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Textbox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Textbox',
- // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Textbox',
- // Set the font family of the textbox field.
- fontFamily: 'Courier',
- // Set the font size of the textbox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the textbox field.
- color: 'black',
- // Set the border color of the textbox field.
- borderColor: 'black',
- // Set the background color of the textbox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
- // Allows multiline input in the text field. FALSE, by default.
- isMultiline: false
-};
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the Textbox field settings
-pdfviewer.textFieldSettings = {
- // Set the name of the form field element.
- name: 'Textbox',
- // Specify whether the Textbox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Textbox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Textbox',
- // Set the thickness of the Textbox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Textbox',
- // Set the font family of the textbox field.
- fontFamily: 'Courier',
- // Set the font size of the textbox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the textbox field.
- color: 'black',
- // Set the border color of the textbox field.
- borderColor: 'black',
- // Set the background color of the textbox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
- // Allows multiline input in the text field. FALSE, by default.
- isMultiline: false
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### Password field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the Password field properties on a button click.
-
-```html
-
-
-```
-
-```javascript
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'Password',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'Password',
- thickness: 4,
- value:'Password',
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- maxLength: 0,
- bounds: { X: 148, Y: 229, Width: 150, Height: 24 }
- });
-});
-
-
-```
-
-The following code example explains how to update the properties of the Password field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the Password field settings
-pdfviewer.passwordFieldSettings = {
- // Set the name of the form field element.
- name: 'Password',
- // Specify whether the Password field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Password field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Password',
- // Set the thickness of the Password field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Password',
- // Set the font family of the Password field.
- fontFamily: 'Courier',
- // Set the font size of the Password field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the Password field.
- color: 'black',
- // Set the border color of the Password field.
- borderColor: 'black',
- // Set the background color of the Password field.
- backgroundColor: 'white',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the Password field settings
-pdfviewer.passwordFieldSettings = {
- // Set the name of the form field element.
- name: 'Password',
- // Specify whether the Password field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the Password field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'Password',
- // Set the thickness of the Password field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'Password',
- // Set the font family of the Password field.
- fontFamily: 'Courier',
- // Set the font size of the Password field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the Password field.
- color: 'black',
- // Set the border color of the Password field.
- borderColor: 'black',
- // Set the background color of the Password field.
- backgroundColor: 'white',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the maximum character length.
- maxLength: 0,
-};
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### CheckBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the CheckBox field properties on a button click.
-
-```html
-
-
-```
-
-```javascript
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'CheckBox',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'CheckBox',
- thickness: 4,
- isChecked: true,
- backgroundColor: 'white',
- borderColor: 'black',
- value: 'CheckBox',
- });
-});
-
-
-```
-
-The following code example explains how to update the properties of the CheckBox field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the CheckBox field settings
-pdfviewer.checkBoxFieldSettings = {
- // Set the name of the form field element.
- name: 'CheckBox',
- // Specify whether the CheckBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the CheckBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'CheckBox',
- // Set the thickness of the CheckBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the check box is in checked state or not.
- isChecked: true,
- // Set the background color of the check box in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the check box field.
- borderColor: 'black',
- // Set the value of
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the CheckBox field settings
-pdfviewer.checkBoxFieldSettings = {
- // Set the name of the form field element.
- name: 'CheckBox',
- // Specify whether the CheckBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the CheckBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'CheckBox',
- // Set the thickness of the CheckBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the check box is in checked state or not.
- isChecked: true,
- // Set the background color of the check box in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the check box field.
- borderColor: 'black',
- // Set the value of
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### RadioButton field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the RadioButton field properties on a button click.
-
-```html
-
-
-```
-
-```javascript
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'RadioButton',
- isReadOnly: true,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'RadioButton',
- thickness: 4,
- isSelected: true,
- backgroundColor: 'white',
- borderColor: 'black',
- value: 'RadioButton'
- });
-});
-
-
-```
-
-The following code example explains how to update the properties of the RadioButton field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the RadioButton field settings
-pdfviewer.radioButtonFieldSettings = {
- // Set the name of the form field element.
- name: 'RadioButton',
- // Specify whether the RadioButton field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the RadioButton field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'RadioButton',
- // Set the thickness of the RadioButton field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the radio button is in checked state or not.
- isSelected: true,
- // Set the background color of the radio button in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the radio button field.
- borderColor: 'black',
- // Set the value of the form field element.
- value: 'RadioButton'
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-// Properties to customize the RadioButton field settings
-pdfviewer.radioButtonFieldSettings = {
- // Set the name of the form field element.
- name: 'RadioButton',
- // Specify whether the RadioButton field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the RadioButton field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'RadioButton',
- // Set the thickness of the RadioButton field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Specifies whether the radio button is in checked state or not.
- isSelected: true,
- // Set the background color of the radio button in hexadecimal string format.
- backgroundColor: 'white',
- // Set the border color of the radio button field.
- borderColor: 'black',
- // Set the value of the form field element.
- value: 'RadioButton'
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### ListBox field settings
-
-Using the `updateFormField` method, the form fields can be updated programmatically.
-
-The following code example explains how to update the ListBox field properties on a button click.
-
-```html
-
-
-```
-
-```javascript
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'ListBox',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'ListBox',
- thickness: 4,
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- options: customOptions,
- });
-});
-
-```
-
-The following code example explains how to update the properties of the Listbox field added to the document from the form designer toolbar.
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
-// Properties to customize the Listbox field settings
-pdfviewer.listBoxFieldSettings = {
- // Set the name of the form field element.
- name: 'ListBox',
- // Specify whether the ListBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the ListBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'ListBox',
- // Set the thickness of the ListBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'ListBox',
- // Set the font family of the ListBox field.
- fontFamily: 'Courier',
- // Set the font size of the ListBox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the ListBox field.
- color: 'black',
- // Set the border color of the ListBox field.
- borderColor: 'black',
- // Set the background color of the ListBox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the listbox items.
- options: customOptions
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
-// Properties to customize the Listbox field settings
-pdfviewer.listBoxFieldSettings = {
- // Set the name of the form field element.
- name: 'ListBox',
- // Specify whether the ListBox field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the ListBox field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'ListBox',
- // Set the thickness of the ListBox field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'ListBox',
- // Set the font family of the ListBox field.
- fontFamily: 'Courier',
- // Set the font size of the ListBox field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the ListBox field.
- color: 'black',
- // Set the border color of the ListBox field.
- borderColor: 'black',
- // Set the background color of the ListBox field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the listbox items.
- options: customOptions
-};
-
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-### DropDown field settings
-
-Using the [updateFormField](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#updateformfields) method, the form fields can be updated programmatically.
-
-The following code example explains how to update the DropDown field properties on a button click.
-
-```html
-
-
-```
-
-```javascript
-
-document.getElementById('updateProperties').addEventListener('click',function() {
- var formField = viewer.retrieveFormFields();
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
- viewer.formDesignerModule.updateFormField(formField[0], {
- name: 'DropDown',
- isReadOnly: false,
- visibility: 'visible',
- isRequired: false,
- isPrint: true,
- tooltip: 'DropDown',
- thickness: 4,
- fontFamily: 'Courier',
- fontSize: 10,
- fontStyle: 'None',
- color: 'black',
- borderColor: 'black',
- backgroundColor: 'white',
- alignment: 'Left',
- options: customOptions,
- });
-});
-
-
-```
-
-The following code example explains how to update the properties of the Dropdown field added to the document from the form designer toolbar.
-
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
- var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
-// Properties to customize the DropDown field settings
-pdfviewer.DropdownFieldSettings = {
- // Set the name of the form field element.
- name: 'DropDown',
- // Specify whether the DropDown field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the DropDown field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'DropDown',
- // Set the thickness of the DropDown field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'DropDown',
- // Set the font family of the DropDown field.
- fontFamily: 'Courier',
- // Set the font size of the DropDown field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the DropDown field.
- color: 'black',
- // Set the border color of the DropDown field.
- borderColor: 'black',
- // Set the background color of the DropDown field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the DropDown items.
- options: customOptions
-};
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
- ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-
-pdfviewer.appendTo('#PdfViewer');
-var customOptions = [{itemName:'item1',itemValue:'item1'}, {itemName:'item2',itemValue:'item2'}, {itemName:'item3',itemValue:'item3'}]
-// Properties to customize the DropDown field settings
-pdfviewer.DropdownFieldSettings = {
- // Set the name of the form field element.
- name: 'DropDown',
- // Specify whether the DropDown field is in read-only or read-write mode.
- isReadOnly: false,
- // Set the visibility of the form field.
- visibility: 'visible',
- // Specify whether the field is mandatory or not.
- isRequired: false,
- // Specify whether to print the DropDown field.
- isPrint: true,
- // Set the text to be displayed as a tooltip.
- tooltip: 'DropDown',
- // Set the thickness of the DropDown field. To hide the borders, set the value to 0 (zero).
- thickness: 4,
- // Set the value of the form field element.
- value:'DropDown',
- // Set the font family of the DropDown field.
- fontFamily: 'Courier',
- // Set the font size of the DropDown field.
- fontSize: 10,
- // Specify the font style
- fontStyle: 'None',
- // Set the font color of the DropDown field.
- color: 'black',
- // Set the border color of the DropDown field.
- borderColor: 'black',
- // Set the background color of the DropDown field.
- backgroundColor: 'White',
- // Set the alignment of the text.
- alignment: 'Left',
- // Set the DropDown items.
- options: customOptions
-};
-
-{% endhighlight %}
-{% endtabs %}
-
-
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/form-designer/create-with-user-interface-interaction.md b/ej2-javascript/pdfviewer/js/form-designer/create-with-user-interface-interaction.md
deleted file mode 100644
index 7a7e5f807..000000000
--- a/ej2-javascript/pdfviewer/js/form-designer/create-with-user-interface-interaction.md
+++ /dev/null
@@ -1,134 +0,0 @@
----
-layout: post
-title: User interaction in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Create with user interface interaction in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Create with user interface interaction
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Create with user interface interaction
-
-The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are:
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-## Enable or Disable form designer toolbar
-
-We should inject FormDesigner module and set enableFormDesignerToolbar as true to enable the Form designer icon on the toolbar. By default, enableFormDesignerToolbar is set as true. Use the following code to inject FormDesigner module and to enable the enableFormDesignerToolbar property.
-
-
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- enableFormDesignerToolbar: true
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- enableFormDesignerToolbar: true
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## Add the form field dynamically
-
-Click the Form Field icon on the toolbar and then click on to the PDF document to draw a Form Field. Refer the below GIF for further reference.
-
-
-
-## Drag the form field
-
-We provide options to drag the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
-
-
-
-## Resize the form field
-
-We provide options to resize the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
-
-
-
-## Edit or Update the form field dynamically
-
-The properties of the Form Fields can be edited using the Form Field Properties window. It can be opened by selecting the Properties option in the context menu that appears on the right by clicking the Form Field object. Refer the below image for the properties available to customize the appearance of the Form Field.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer control supports the clipboard operations such as cut, copy and paste for Form Fields. You can right click on the Form Field object to view the context menu and select to the clipboard options that you would like to perform. Refer the below image for the options in the context menu.
-
-
-
-## Undo and Redo
-
-We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions.
-
-```
-
-
-```
-
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-document.getElementById('undo').addEventListener('click', function () {
- pdfviewer.undo();
-});
-
-document.getElementById('redo').addEventListener('click', function () {
- pdfviewer.redo();
-});
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/form-designer.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields);
-pdfviewer.appendTo('#PdfViewer');
-document.getElementById('undo').addEventListener('click', function () {
- pdfviewer.undo();
-});
-
-document.getElementById('redo').addEventListener('click', function () {
- pdfviewer.redo();
-});
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/form-designer/form-field-events.md b/ej2-javascript/pdfviewer/js/form-designer/form-field-events.md
deleted file mode 100644
index 7a58e338b..000000000
--- a/ej2-javascript/pdfviewer/js/form-designer/form-field-events.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-layout: post
-title: Form Field Events in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about different form field in Syncfusion ##Platform_Name## Pdfviewer component of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Form Field Events
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# PDF Viewer Form Field events
-
-The PDF Viewer control provides the support to different Form Field events. The Form Field events supported by the PDF Viewer Control are:
-
-| Form Field events | Description |
-|---|---|
-| [formFieldAdd](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs/) | Event trigger when a form field is added.|
-| [formFieldClick](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs/) | Events trigger when the form field is selected.|
-| [formFieldDoubleClick](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs/) | Events trigger when the form field is double-clicked.|
-| [formFieldFocusOut](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) | Events trigger when focus out from the form fields.|
-| [formFieldMouseLeave](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) | Events trigger when the mouse cursor leaves the form field.|
-| [formFieldMouseOver](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs/) | Events trigger when the mouse cursor is over a form field.|
-| [formFieldMove](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs/) | Events trigger when a form field is moved.|
-| [formFieldPropertiesChange](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) | Events trigger when a property of form field is changed.|
-| [formFieldRemove](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs/) | Events trigger when a form field is removed.|
-| [formFieldResize](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs/) | Events trigger when a form field is resized.|
-| [formFieldSelect](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs/) | Events trigger when a form field is selected.|
-| [formFieldUnselect](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs/) | Events trigger when a form field is unselected.|
-| [validateFormFields](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) | Events trigger when validation is failed.|
-
-## formFieldAdd event
-
-The [formFieldAdd](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldAddArgs/) event is triggered when a new form field is added, either programmatically or through user interaction. The event arguments provide the necessary information about the form field addition.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldaddevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldaddevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldClick event
-
-The [formFieldClick](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldClickArgs/) event is triggered when a form field is clicked. The event arguments provide the necessary information about the form field click event.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldclickevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldclickevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldDoubleClick event
-
-The [formFieldDoubleClick](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldDoubleClickArgs/) event is triggered when a form field is double-clicked. The event arguments provide the necessary information about the form field double-click event.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfielddoubleclickevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfielddoubleclickevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldFocusOut event
-
-The [formFieldFocusOut](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldFocusOutEventArgs/) event is triggered when a form field loses focus. The event arguments provide the necessary information about the form field focus out event.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldfocusoutevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldfocusoutevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseLeave event
-
-The [formFieldMouseLeave](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseLeaveArgs/) event is triggered when the mouse leaves a form field. The event arguments provide the necessary information about the form field mouse leave event.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldmouseleaveevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldmouseleaveevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMouseOver event
-
-The [formFieldMouseOver](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMouseoverArgs/) event is triggered when the mouse hovers over a form field. The event arguments provide the necessary information about the form field mouse over event.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldmouseoverevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldmouseoverevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldMove event
-
-The [formFieldMove](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldMoveArgs/) event is triggered when the mouse moves inside a form field. The event arguments provide the necessary information about the form field mouse move event.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldmoveevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldmoveevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldPropertiesChange event
-
-The [formFieldPropertiesChange](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldPropertiesChangeArgs/) event is triggered when the properties of a form field are changed. The event arguments provide the necessary information about which property of the form field has been changed.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldpropertieschangeevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldRemove event
-
-The [formFieldRemove](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldRemoveArgs/) event is triggered when a form field is removed from the PDF. The event arguments provide the necessary information about which form field has been removed.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldremoveevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldremoveevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldResize event
-
-The [formFieldResize](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldResizeArgs/) events are triggered when a form field in a PDF is resized. These events provide the relevant details about the specific form field that has been resized.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldresizeevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldresizeevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldSelect event
-
-The [formFieldSelect](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldSelectArgs/) events are triggered when a form field in a PDF is selected. These events provide the necessary details about the specific form field that has been selected.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldselectevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldselectevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## formFieldUnselect event
-
-The [formFieldUnselect](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/formFieldUnselectArgs/) events are triggered when a form field in a PDF is unselected. These events provide the necessary details about the specific form field that has been unselected.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldunselectevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldunselectevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-## validateFormFields event
-
-The [validateFormFields](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/validateFormFieldsArgs/) events are triggered when a required form field is left unfilled before downloading the PDF. These events provide the necessary information for validating which form fields are incomplete.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/formfieldvalidationevent-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/formfieldvalidationevent-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/formdesigner/programmatically-work-with-form-field.md b/ej2-javascript/pdfviewer/js/formdesigner/programmatically-work-with-form-field.md
deleted file mode 100644
index 6c18c28e4..000000000
--- a/ej2-javascript/pdfviewer/js/formdesigner/programmatically-work-with-form-field.md
+++ /dev/null
@@ -1,115 +0,0 @@
----
-layout: post
-title: Programmatically work with form field in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Programmatically work with form field in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Programmatically work with form field
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Programmatically work with form field in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are:
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-## Add a form field to PDF document programmatically
-
-Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/addformfield-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/addformfield-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/addformfield-cs2" %}
-
-## Edit/Update form field programmatically
-
-Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter to updateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/updateformfield-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/updateformfield-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/updateformfield-cs2" %}
-
-## Delete form field programmatically
-
-Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code.
-
-{% tabs %}
-{% highlight js tabtitle="index.js" %}
-{% include code-snippet/pdfviewer/deleteformfield-cs2/index.js %}
-{% endhighlight %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/deleteformfield-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/deleteformfield-cs2" %}
-
-## Saving the form fields
-
-When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference.
-
-
-
-You can invoke download action using following code snippet.
-
-```javascript
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableDownload: true,
- documentPath: "PDF_Succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.Annotation, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.download();
-
-```
-
-## Printing the form fields
-
-When the print icon is selected on the toolbar, the PDF document will be printed along with the Form Fields added to the pages and this action will not affect the original document. Refer the below GIF for further reference.
-
-
-
-You can invoke print action using the following code snippet.,
-
-```javascript
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "PDF_Succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation,ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.print.print();
-
-```
-
-## Open the existing PDF document
-
-We can open the already saved PDF document contains Form Fields in it by clicking the open icon in the toolbar. Refer the below GIF for further reference.
-
-
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/formdesigner/user-interaction-with-form-fields.md b/ej2-javascript/pdfviewer/js/formdesigner/user-interaction-with-form-fields.md
deleted file mode 100644
index 0a62ef663..000000000
--- a/ej2-javascript/pdfviewer/js/formdesigner/user-interaction-with-form-fields.md
+++ /dev/null
@@ -1,86 +0,0 @@
----
-layout: post
-title: User interaction with form fields in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about User interaction with form fields in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: User interaction with form fields
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# User interaction with form fields in ##Platform_Name## Pdfviewer control
-
-The PDF viewer control provides the option for interaction with Form Fields such as Drag and resize. you can draw a Form Field dynamically by clicking the Form Field icon on the toolbar and draw it in the PDF document. The Form Fields type supported by the PDF Viewer Control are:
-
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
-
-## Enable or Disable form designer toolbar
-
-We should inject FormDesigner module and set enableFormDesignerToolbar as true to enable the Form designer icon on the toolbar. By default, enableFormDesignerToolbar is set as true. Use the following code to inject FormDesigner module and to enable the enableFormDesignerToolbar property.
-
-```javascript
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "FormDesigner.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- enableFormDesignerToolbar: true
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.FormDesigner);
-pdfviewer.appendTo('#PdfViewer');
-```
-
-## Add the form field dynamically
-
-Click the Form Field icon on the toolbar and then click on to the PDF document to draw a Form Field. Refer the below GIF for further reference.
-
-
-
-## Drag the form field
-
-We provide options to drag the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
-
-
-
-## Resize the form field
-
-We provide options to resize the Form Field which is currently selected in the PDF document. Refer the below GIF for further reference.
-
-
-
-## Edit or Update the form field dynamically
-
-The properties of the Form Fields can be edited using the Form Field Properties window. It can be opened by selecting the Properties option in the context menu that appears on the right by clicking the Form Field object. Refer the below image for the properties available to customize the appearance of the Form Field.
-
-
-
-
-
-
-
-## Clipboard operation with form field
-
-The PDF Viewer control supports the clipboard operations such as cut, copy and paste for Form Fields. You can right click on the Form Field object to view the context menu and select to the clipboard options that you would like to perform. Refer the below image for the options in the context menu.
-
-
-
-## Undo and Redo
-
-We provided support to undo/redo the Form Field actions that are performed at runtime. Use the following code example to perform undo/redo actions.
-
-```javascript
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "FormDesigner.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.FormDesigner);
-pdfviewer.appendTo('#PdfViewer');
-pdfviewer.undo();
-pdfviewer.redo();
-```
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/getting-started-with-server-backed.md b/ej2-javascript/pdfviewer/js/getting-started-with-server-backed.md
deleted file mode 100644
index f66e46f78..000000000
--- a/ej2-javascript/pdfviewer/js/getting-started-with-server-backed.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-layout: post
-title: Getting started with ##Platform_Name## PDF Viewer control | Syncfusion
-description: Checkout and learn about Getting started with ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Getting started in ##Platform_Name## PDF Viewer control
-
-The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.
-
-## Component Initialization with CDN link for script and style reference
-
-**Step 1:** Create an app folder `my_app` for the Essential JS 2 JavaScript components.
-
-**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats.
-
-**Syntax:**
-> Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js`
->
-> Styles: `https://cdn.syncfusion.com/ej2/{Version}/{PACKAGE_NAME}/styles/material.css`
-
-**Example:**
-> Script: [`https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2.min.js)
->
-> Styles: [`https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css)
-
-**Step 3:** Create a HTML page (index.html) in `my_app` location and add the CDN link references. Now, add the `Div` element and initiate the `Essential JS 2 PDF Viewer` component in the index.html by using following code.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-getting-started-cs1/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-N> We have provided the support to dynamically change the [serviceURL](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl). So, after changing the `serviceURL` dynamically, you need invoke the `pdfViewer.dataBind()` method to update the `serviceURL` quickly. This will effectively change the `serviceURL` dynamically. Ensure that this step is performed after version 23.1.36.
-document.getElementById('load').addEventListener('click', function () {
- pdfViewer.serviceUrl = "https://services.syncfusion.com/angular/production/api/pdfviewer";
- pdfViewer.documentPath = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
- pdfViewer.dataBind();
- pdfViewer.load(pdfViewer.documentPath, null);
-});
-
-N> The Web API hosted link https://services.syncfusion.com/js/production/api/pdfviewer utilized in the PDF viewer's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/pdfviewer-server) for hosting your own web service and use for the serviceUrl property. **We strongly recommend using the standalone mode.**
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-getting-started-cs1" %}
-
-**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 PDF Viewer` component.
-
-> For PDF Viewer serviceUrl creation, follow the steps provided in the [link](https://ej2.syncfusion.com/documentation/pdfviewer/how-to/create-pdfviewer-service)
-
-## How to run the PDF Viewer web service
-
-1. Download the sample from the [Web service sample in GitHub](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices) link.
-
-2. Navigate to the `ASP.NET Core` folder and open it in the command prompt.
-
-3. Navigate to the appropriate subfolder based on your .NET version:
-
- - .NET 6.0 → `PdfViewerWebService_6.0`
- - .NET 8.0 → `PdfViewerWebService_8.0`
-
-4. Use the below command to restore the required packages.
-
- ```
- dotnet restore
- ```
-
-5. Use the below command to run the web service.
-
- ```
- dotnet run
- ```
-
-6. You can see that the PDF Viewer server instance runs in the local host with the port number `localhost:5001` and navigate to the PDF Viewer Web control `localhost:5001/pdfviewer` which returns the default get response method. We can bind the link to the `serviceUrl` property of PDF Viewer as below.
-
-```javascript
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://localhost:5001/pdfviewer'
-});
-```
-
-N> When configuring the server-backed PDF viewer, it's essential to understand that there is no need to include the pdfium.js and pdfium.wasm files. Unlike the standalone PDF viewer, which relies on these files for local rendering, the server-backed PDF viewer fetches and renders PDFs directly from the server. Consequently, you can exclude the copy command for deployment process, as they are not required to load and display PDFs in this context.
-
-N> For hosting the web service on the Linux platform, ensure to include the [SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1). Additionally, for AWS environments, utilize the following packages:
-
-| **Amazon Web Services (AWS)** |**NuGet package name** |
-| --- | --- |
-| AWS Lambda|[SkiaSharp.NativeAssets.Linux](https://nuget.org/packages/SkiaSharp.NativeAssets.Linux/3.116.1)|
-| AWS Elastic Beanstalk |[SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1](https://www.nuget.org/packages/SkiaSharp.NativeAssets.Linux.NoDependencies/3.116.1)|
diff --git a/ej2-javascript/pdfviewer/js/getting-started.md b/ej2-javascript/pdfviewer/js/getting-started.md
deleted file mode 100644
index 789a4d892..000000000
--- a/ej2-javascript/pdfviewer/js/getting-started.md
+++ /dev/null
@@ -1,71 +0,0 @@
----
-layout: post
-title: Getting started with ##Platform_Name## PDF Viewer control | Syncfusion
-description: Checkout and learn about Getting started with ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Getting started in Standalone PDF Viewer control
-
-The Essential JS 2 for JavaScript (global script) is an ES5 formatted pure JavaScript framework which can be directly used in latest web browsers.
-
-## Component Initialization with CDN link for script and style reference
-
-**Step 1:** Create an app folder `my-app` for the Essential JS 2 JavaScript components.
-
-**Step 2:** The Essential JS 2 component's global scripts and styles are already hosted in the below CDN link formats.
-
-**Syntax:**
-> Script: `https://cdn.syncfusion.com/ej2/{Version}/dist/{PACKAGE_NAME}.min.js`
->
-> Styles: `https://cdn.syncfusion.com/ej2/{Version}/{PACKAGE_NAME}/styles/material.css`
-
-**Example:**
-> Script: [`https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2.min.js`](https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2.min.js)
->
-> Styles: [`https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css`](https://cdn.syncfusion.com/ej2/26.2.11/ej2-base/styles/material.css)
-
-
-**Step 3:** Create a HTML page (index.html) in `my-app` location and add the CDN link references. Now, add the `Div` element and initiate the `Essential JS 2 PDF Viewer` component in the index.html by using following code.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-{% include code-snippet/pdfviewer/es5-getting-started-cs2/index.html %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/pdfviewer/es5-getting-started-cs2" %}
-
-
-### Steps to Load PDF Viewer with Local Resources
-
-To use local resources with your PDF Viewer, follow these steps:
-
-**Step 1:** Ensure that your application includes the `ej2-pdfviewer-lib` folder. This folder must contain the `pdfium.js`, `pdfium.wasm` files, and the PDF file that you intend to display. These should reside in the same location as the `ej2.min.js` script and its related styles.
-
-**Step 2:** Assign local file paths to the `documentPath` and `resourceUrl` properties within the PDF Viewer setup. The `documentPath` should refer to your PDF file, while the `resourceUrl` should point to the directory containing the supporting resources.
-
-**Step 3:** Insert the necessary script and style references within the `` section of your HTML file. Make sure these point to your local copies of the files instead of CDN links.
-
-By following these steps, you will configure your PDF Viewer to load the required resources locally. See the code snippet below for reference.
-
-{% tabs %}
-{% highlight html tabtitle="index.html" %}
-
-{% endhighlight %}
-{% endtabs %}
-
-View the sample in GitHub to [load PDF Viewer with local resources](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Refer%20resource%20url%20locally)
-
-**Step 4:** Now, run the `index.html` in web browser, it will render the `Essential JS 2 PDF Viewer` component.
diff --git a/ej2-javascript/pdfviewer/js/globalization.md b/ej2-javascript/pdfviewer/js/globalization.md
deleted file mode 100644
index ee9411666..000000000
--- a/ej2-javascript/pdfviewer/js/globalization.md
+++ /dev/null
@@ -1,579 +0,0 @@
----
-layout: post
-title: Globalization in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Globalization in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Globalization
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Globalization in ##Platform_Name## Pdfviewer control
-
-The text contents provided in the PDF Viewer can be localized using the collection of localized strings for different cultures. By default, the PDF Viewer is localized in “__en-US__”.
-
-The following table shows the default text values used in PDF Viewer in 'en-US' culture:
-
-|Keywords|Values|
-|---|---|
-|PdfViewer|PDF Viewer|
-|Cancel|Cancel|
-|Download file|Download file|
-|Download|Download|
-|Enter Password|This document is password protected. Please enter a password.|
-|File Corrupted|File corrupted|
-|File Corrupted Content|The file is corrupted and cannot be opened.|
-|Fit Page|Fit page|
-|Fit Width|Fit width|
-|Automatic|Automatic|
-|Go To First Page|Show first page|
-|Invalid Password|Incorrect password. Please try again.|
-|Next Page|Show next page|
-|OK|OK|
-|Open|Open file|
-|Page Number|Current page number|
-|Previous Page|Show previous page|
-|Go To Last Page|Show last page|
-|Zoom|Zoom|
-|Zoom In|Zoom in|
-|Zoom Out|Zoom out|
-|Page Thumbnails|Page thumbnails|
-|Bookmarks|Bookmarks|
-|Print|Print file|
-|Password Protected|Password required|
-|Copy|Copy|
-|Text Selection|Text selection tool|
-|Panning|Pan mode|
-|Text Search|Find text|
-|Find in document|Find in document|
-|Match case|Match case|
-|Apply|Apply|
-|GoToPage|Go to page|
-|No Matches|Viewer has finished searching the document. No more matches were found|
-|No Text Found|No Text Found|
-|Undo|Undo|
-|Redo|Redo|
-|Annotation|Add or Edit annotations|
-|Highlight|Highlight Text|
-|Underline|Underline Text|
-|Strikethrough|Strikethrough Text|
-|Delete|Delete annotation|
-|Opacity|Opacity|
-|Color edit|Change Color|
-|Opacity edit|Change Opacity|
-|Highlight context|Highlight|
-|Underline context|Underline|
-|Strikethrough context|Strike through|
-|Server error|Web-service is not listening. PDF Viewer depends on web-service for all it's features. Please start the web service to continue.|
-|Open text|Open|
-|First text|First Page|
-|Previous text|Previous Page|
-|Next text|Next Page|
-|Last text|Last Page|
-|Zoom in text|Zoom In|
-|Zoom out text|Zoom Out|
-|Selection text|Selection|
-|Pan text|Pan|
-|Print text|Print|
-|Search text|Search|
-|Annotation Edit text|Edit Annotation|
-|Line Thickness|Line Thickness|
-|Line Properties|Line Properties|
-|Start Arrow|Start Arrow |
-|End Arrow|End Arrow|
-|Line Style|Line Style|
-|Fill Color|Fill Color|
-|Line Color|Line Color|
-|None|None|
-|Open Arrow|Open Arrow|
-|Closed Arrow|Closed Arrow|
-|Round Arrow|Round Arrow|
-|Square Arrow|Square Arrow|
-|Diamond Arrow|Diamond Arrow|
-|Cut|Cut|
-|Paste|Paste|
-|Delete Context|Delete Context|
-|Properties|Properties|
-|Add Stamp|Add Stamp|
-|Add Shapes|Add Shapes|
-|Stroke edit|Stroke Edit|
-|Change thickness|Change Thickness|
-|Add line|Add Line|
-|Add arrow|Add Arrow|
-|Add rectangle|Add Rectangle|
-|Add circle|Add Circle|
-|Add polygon|Add Polygon|
-|Add Comments|Add Comments|
-|Comments| Comments|
-|No Comments Yet|No Comments Yet|
-|Accepted| Accepted|
-|Completed| Completed|
-|Cancelled| Cancelled|
-|Rejected| Rejected|
-|Leader Length|Leader Length|
-|Scale Ratio|Scale Ratio|
-|Calibrate| Calibrate|
-|Calibrate Distance|Calibrate Distance|
-|Calibrate Perimeter|Calibrate Perimeter|
-|Calibrate Area|Calibrate Area|
-|Calibrate Radius|Calibrate Radius|
-|Calibrate Volume|Calibrate Volume|
-|Depth|Depth|
-|Closed|Closed|
-|Round|Round|
-|Square|Square|
-|Diamond|Diamond|
-|Edit|Edit|
-|Comment|Comment|
-|Comment Panel|Comment Panel|
-|Set Status|Set Status|
-|Post|Post|
-|Page|Page|
-|Add a comment|Add a comment|
-|Add a reply|Add a reply|
-|Import Annotations|Import Annotations|
-|Export Annotations|Export Annotations|
-|Add|Add|
-|Clear|Clear|
-|Bold|Bold|
-|Italic|Italic|
-|Strikethroughs|Strikethroughs|
-|Underlines|Underlines|
-|Superscript|Superscript|
-|Subscript|Subscript|
-|Align left|Align Left|
-|Align right|Align Right|
-|Center|Center|
-|Justify|Justify|
-|Font color|Font Color|
-|Text Align|Text Align|
-|Text Properties|Text Properties|
-|Draw Signature|Draw Signature|
-|Create| Create|
-|Font family|Font Family|
-|Font size|Font Size|
-|Free Text|Free Text|
-|Import Failed|Import Failed|
-|File not found|File Not Found|
-|Export Failed|Export Failed|
-|Dynamic|Dynamic|
-|Standard Business|Standard Business|
-|Sign Here|Sign Here|
-|Custom Stamp|Custom Stamp|
-|InitialFieldDialogHeaderText|Initial Field Dialog Header Text|
-|HandwrittenInitialDialogHeaderText|Handwritten Initial Dialog Header Text|
-|SignatureFieldDialogHeaderText|Signature Field Dialog Header Text|
-|HandwrittenSignatureDialogHeaderText|Handwritten Signature Dialog Header Text|
-|Draw-hand Signature|Draw-hand Signature|
-|Type Signature|Type Signature|
-|Upload Signature|Upload Signature|
-|Browse Signature Image|Browse Signature Image|
-|Save Signature|Save Signature|
-|Save Initial|Save Initial|
-|highlight|highlight|
-|underline|underline|
-|strikethrough|strikethrough|
-|FormDesigner|Form Designer|
-|SubmitForm|Submit Form|
-|Search text|Search Text|
-|Draw Ink|Draw Ink|
-|Revised|Revised|
-|Reviewed|Reviewed|
-|Received|Received|
-|Confidential|Confidential|
-|Approved|Approved|
-|Not Approved|Not Approved|
-|Witness|Witness|
-|Initial Here|Initial Here|
-|Draft|Draft|
-|Final|Final|
-|For Public Release|For Public Release|
-|Not For Public Release|Not For Public Release|
-|For Comment|For Comment|
-|Void|Void|
-|Preliminary Results|Preliminary Results|
-|Information Only|Information Only|
-|Enter Signature as Name|Enter Signature as Name|
-|Textbox|Textbox|
-|Password|Password|
-|Check Box|Check Box|
-|Radio Button|Radio Button|
-|Dropdown|Dropdown|
-|List Box|List Box|
-|Signature|Signature|
-|Delete FormField|Delete FormField|
-|FormDesigner Edit text|Form Designer Edit Text|
-|in|in|
-|m|m|
-|ft_in|ft_in|
-|ft|ft|
-|p|p|
-|cm|cm|
-|mm|mm|
-|pt|pt|
-|cu|cu|
-|sq|sq|
-|General|General|
-|Appearance|Appearance|
-|Options|Options|
-|Textbox Properties|Textbox Properties|
-|Name|Name|
-|Tooltip|Tooltip|
-|Value|Value|
-|Form Field Visibility|Form Field Visibility|
-|Read Only|Read Only|
-|Required|Required|
-|Checked|Checked|
-|Show Printing|Show Printing|
-|Formatting|Formatting|
-|Fill|Fill|
-|Border|Border|
-|Border Color|Border Color|
-|Thickness|Thickness|
-|Max Length|Max Length|
-|List Item|List Item|
-|Export Value|Export Value|
-|Dropdown Item List|Dropdown Item List|
-|List Box Item List|List Box Item List|
-|Delete Item|Delete Item|
-|Up|Up|
-|Down|Down|
-|Multiline|Multiline|
-|Initial|Initial|
-|Export XFDF|Export XFDF|
-|Import XFDF|Import XFDF|
-|Organize Pages|Organize Pages|
-|Insert Right|Insert Right|
-|Insert Left|Insert Left|
-|Total|Total|
-|Pages|Pages|
-|Rotate Right|Rotate Right|
-|Rotate Left|Rotate Left|
-|Delete Page|Delete Page|
-|Delete Pages|Delete Pages|
-|Copy Page|Copy Page|
-|Copy Pages|Copy Pages|
-|Save|Save|
-|Save As|Save As|
-|Select All|Select All|
-|Import Document|Import Document|
-|Match any word|Match any word|
-|Client error|Client-side error is found. Please check the custom headers provided in the AjaxRequestSettings property and web action methods in the ServerActionSettings property|
-|Cors policy error|Unable to retrieve the document due to an invalid URL or access restrictions. Please check the document URL and try again|
-|No More Matches|Viewer has finished searching the document. No more matches were found|
-|No Search Matches|No matches found|
-|No More Search Matches|No more matches found|
-|Exact Matches|EXACT MATCHES|
-|Total Matches|TOTAL MATCHES|
-
-The different locale value for the PDF Viewer can be specified using the locale property.
-
-```html
-{% raw %}
-
-
-
-Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endraw %}
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- locale: 'ar-AE',
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- locale: 'ar-AE',
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-You have to map the text content based on locale like following script in sample level.,
-
-```
-
-```
diff --git a/ej2-javascript/pdfviewer/js/interaction-mode.md b/ej2-javascript/pdfviewer/js/interaction-mode.md
deleted file mode 100644
index 194e947d0..000000000
--- a/ej2-javascript/pdfviewer/js/interaction-mode.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-layout: post
-title: Interaction mode in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Interaction mode in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Interaction mode
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Interaction mode in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer provides interaction mode for easy interaction with the loaded PDF document. Selection mode and panning mode are the two interactions modes.
-
-## Selection mode
-
-In this mode, the text selection can be performed in the PDF document loaded in PDF Viewer. The panning and scrolling of the pages by touch cannot be performed in this mode. It allows users to select and copy text from the PDF files. This is helpful for copying and sharing text content. You can enable/disable the text selection using the following code snippet.
-
-```html
-{% raw %}
-
-
-
-Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endraw %}
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
-
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-
-let pdfviewer: PdfViewer = new PdfViewer({
- enableTextSelection: true,
- documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'
- });
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-import { PdfViewer, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,ThumbnailView,BookmarkView, TextSelection} from '@syncfusion/ej2-pdfviewer';
-
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-
-let pdfviewer: PdfViewer = new PdfViewer({
- enableTextSelection: true,
- documentPath:'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- serviceUrl : 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Panning Mode
-
-In this mode, the panning and scrolling of the pages by touch can be performed in the PDF document loaded in the PDF Viewer, but the text selection cannot be performed.
-
-
-
-You can switch the interaction mode of PDF Viewer by using the following code snippet.,
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- interactionMode: 'Pan'
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- interactionMode: 'Pan'
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## See also
-
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/magnification.md b/ej2-javascript/pdfviewer/js/magnification.md
deleted file mode 100644
index 9937736df..000000000
--- a/ej2-javascript/pdfviewer/js/magnification.md
+++ /dev/null
@@ -1,79 +0,0 @@
----
-layout: post
-title: Magnification in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Magnification in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Magnification
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Magnification in ##Platform_Name## Pdfviewer control
-
-The magnification tools of the PDF Viewer contains ZoomIn, ZoomOut, Zoom, FitPage, and FitWidth tools in the default toolbar. The PDF Viewer also has an option to show or hide the magnification tools in the default toolbar.
-
-The following code snippet describes how to enable the magnification in PDF Viewer.
-
-```html
-{% raw %}
-
-
-
-Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endraw %}
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableMagnification: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableMagnification: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-The following magnification options are available in the default toolbar of PDF Viewer,
-
-* [**ZoomIn**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomin):- Zoom in from the current zoom value of PDF pages.
-* [**ZoomOut**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomout):- Zoom out from the current zoom value of PDF pages.
-* [**Zoom**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#zoomto):- Zoom to specific zoom value of PDF pages.
-* [**FitPage**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittopage):- Fits the page width with in the available view port size.
-* [**FitWidth**](https://ej2.syncfusion.com/documentation/api/pdfviewer/magnification/#fittowidth):- Fits the view port width based on the page content size.
-
-
-
->PDF Viewer can support the zoom value ranges from 10 to 400.
-
-## See also
-
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
diff --git a/ej2-javascript/pdfviewer/js/mobile-toolbar.md b/ej2-javascript/pdfviewer/js/mobile-toolbar.md
deleted file mode 100644
index 4ac911a83..000000000
--- a/ej2-javascript/pdfviewer/js/mobile-toolbar.md
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: post
-title: Mobile Toolbar Interface in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn All About the Mobile Toolbar Interface in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Mobile Toolbar Interface
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# Mobile Toolbar Interface in ##Platform_Name## Pdfviewer control
-
-The Mobile PDF Viewer offers a variety of features for viewing, searching, annotating, and managing PDF documents on mobile devices. It includes essential tools like search, download, bookmarking, annotation, and page organization. Users also have the option to enable desktop toolbar features in mobile mode, providing a more extensive set of actions.
-
-## Mobile Mode Toolbar Configuration
-In mobile mode, the toolbar is optimized for ease of use on small screens, presenting users with the most common actions for interacting with a PDF document. Below are the key features available in mobile mode:
-
-
-
-### Main Toolbar Options:
-
-**OpenOption:** Tap to load a PDF document.
-
-**SearchOption:** Access the search bar to find text within the document.
-
-
-
-**UndoRedoTool:** Quickly undo or redo any annotations made.
-
-**OrganizePagesTool:** Enable or disable page organization features to modify document pages.
-
-
-
-**AnnotationEditTool:** Activate or deactivate annotation editing to add or modify annotations.
-
-
-
-
-N> In mobile mode, the annotation toolbar is conveniently displayed at the bottom of the viewer.
-
-### More Options Menu:
-When you open the "more options" menu, you will see additional actions such as:
-
-**DownloadOption:** Tap to download the currently opened PDF document.
-
-**BookmarkOption:** Allows you to view bookmarks within the document.
-
-
-
-## Enabling Desktop Mode in Mobile
-
-The desktop version of the toolbar can be enabled on mobile devices by using the `enableDesktopMode` API. This API allows you to bring desktop-like features to the mobile PDF viewer, providing access to additional toolbar actions that are typically available on desktop platforms.
-
-### Steps to Enable Desktop Mode:
-
-**Step 1:** Set `enableDesktopMode` to true in the API configuration.
-
-**Step 2:** This will replace the mobile toolbar with the desktop toolbar layout, allowing access to more actions and controls.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- enableDesktopMode : true
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- enableDesktopMode : true
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## Enable Scrolling in Desktop Mode with Touch Gestures
-
-To ensure smooth scrolling of PDF documents on a mobile device in desktop mode, it is important to enable touch gesture scrolling. You can achieve this by setting the `enableTextSelection` option to **false**.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- enableDesktopMode : true,
- enableTextSelection : false
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- enableDesktopMode : true,
- enableTextSelection : false
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-## Print Option Not Available
-
-The Print option is not available in mobile mode by default. However, if you need to use the print functionality on mobile devices, we recommend enabling the desktop toolbar on mobile using the `enableDesktopMode` API.
-
-### How to Use Print on Mobile:
-
-**Enable Desktop Mode:** Set `enableDesktopMode` to true to load the desktop version of the toolbar on your mobile device.
-
-**Print Option:** Once desktop mode is enabled, the print option will be available, allowing you to print the document directly from your mobile device.
-
-N> In mobile mode, the print functionality will not be available unless desktop mode is enabled.
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/navigation.md b/ej2-javascript/pdfviewer/js/navigation.md
deleted file mode 100644
index 8f7d6ecaf..000000000
--- a/ej2-javascript/pdfviewer/js/navigation.md
+++ /dev/null
@@ -1,355 +0,0 @@
----
-layout: post
-title: Navigation in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Navigation in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Navigation
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Navigation in ##Platform_Name## Pdfviewer control
-
-The ASP.NET Core PDF Viewer supports different internal and external navigations.
-
-## Toolbar page navigation option
-
-The default toolbar of PDF Viewer contains the following navigation options
-
-* [**Go to page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopage):- Navigates to the specific page of a PDF document.
-* [**Show next page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotonextpage):- Navigates to the next page of PDF a document.
-* [**Show previous page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotopreviouspage):- Navigates to the previous page of a PDF document.
-* [**Show first page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotofirstpage):- Navigates to the first page of a PDF document.
-* [**Show last page**](https://ej2.syncfusion.com/documentation/api/pdfviewer/navigation/#gotolastpage):- Navigates to the last page of a PDF document.
-
-```html
-{% raw %}
-
-
-
-Essential JS 2
-
-
-
-
-
-
-
-
-
-
-{% endraw %}
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var viewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
-});
-ej.pdfviewer.PdfViewer.Inject(
- ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification,
- ej.pdfviewer.BookmarkView,
- ej.pdfviewer.ThumbnailView,
- ej.pdfviewer.TextSelection,
- ej.pdfviewer.TextSearch,
- ej.pdfviewer.Print,
- ej.pdfviewer.Navigation,
- ej.pdfviewer.LinkAnnotation,
- ej.pdfviewer.Annotation,
- ej.pdfviewer.FormFields
-);
-viewer.appendTo('#pdfViewer');
-// Go To First Page
-document.getElementById('goToFirstPage').addEventListener('click', () => {
- viewer.navigation.goToFirstPage();
-});
-// Go To Last Page
-document.getElementById('goToLastPage').addEventListener('click', () => {
- viewer.navigation.goToLastPage();
-});
-// Go To Next Page
-document.getElementById('goToNextPage').addEventListener('click', () => {
- viewer.navigation.goToNextPage();
-});
-// Go To Page
-document.getElementById('goToPage').addEventListener('click', () => {
- viewer.navigation.goToPage(4);
-});
-// Go To Previous Page
-document.getElementById('goToPreviousPage').addEventListener('click', () => {
- viewer.navigation.goToPreviousPage();
-});
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var viewer = new ej.pdfviewer.PdfViewer({
- documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
- serviceUrl:'https://services.syncfusion.com/js/production/api/pdfviewer'
-});
-ej.pdfviewer.PdfViewer.Inject(
- ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification,
- ej.pdfviewer.BookmarkView,
- ej.pdfviewer.ThumbnailView,
- ej.pdfviewer.TextSelection,
- ej.pdfviewer.TextSearch,
- ej.pdfviewer.Print,
- ej.pdfviewer.Navigation,
- ej.pdfviewer.LinkAnnotation,
- ej.pdfviewer.Annotation,
- ej.pdfviewer.FormFields
-);
-viewer.appendTo('#pdfViewer');
-// Go To First Page
-document.getElementById('goToFirstPage').addEventListener('click', () => {
- viewer.navigation.goToFirstPage();
-});
-// Go To Last Page
-document.getElementById('goToLastPage').addEventListener('click', () => {
- viewer.navigation.goToLastPage();
-});
-// Go To Next Page
-document.getElementById('goToNextPage').addEventListener('click', () => {
- viewer.navigation.goToNextPage();
-});
-// Go To Page
-document.getElementById('goToPage').addEventListener('click', () => {
- viewer.navigation.goToPage(4);
-});
-// Go To Previous Page
-document.getElementById('goToPreviousPage').addEventListener('click', () => {
- viewer.navigation.goToPreviousPage();
-});
-
-{% endhighlight %}
-{% endtabs %}
-
-Find the [here](https://stackblitz.com/edit/39kfnj?file=index.js) to perform the page navigation options programmatically.
-
-## Bookmark navigation
-
-The Bookmarks saved in PDF files are loaded and made ready for easy navigation. You can enable/disable bookmark navigation by using the following code snippet.,
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableBookmark: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableBookmark: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-To perform bookmark navigation, you can use the **goToBookmark** method. It's important to note that the **goToBookmark** method will throw an error if the specified bookmark does not exist in the PDF document.
-
-Here is an example of how to use the **goToBookmark** method:
-
-```
-
-```
-
-```javascript
-document.getElementById('gotobookmark').addEventListener('click', () => {
- viewer.bookmark.goToBookmark(x, y);
-});
-```
-
-x - Specifies the pageIndex for Navigate.
-
-y - Specifies the Y coordinates value of the Page.
-
-Also, you can use the **getBookmarks** method to retrieve a list of all the bookmarks in a PDF document. This method returns a List of Bookmark objects, which contain information about each bookmark.
-
-Here is an example of how to use the getBookmarks method:
-
-```
-
-```
-
-```javascript
-document.getElementById('getBookmarks').addEventListener('click', () => {
- var getBookmarks = viewer.bookmark.getBookmarks();
- console.log(getBookmarks)
-});
-```
-
-## Thumbnail navigation
-
-Thumbnails is the miniature representation of actual pages in PDF files. This feature displays thumbnails of the pages and allows navigation.
-You can enable/disable thumbnail navigation by using the following code snippet.,
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableThumbnail: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableThumbnail: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-## Hyperlink navigation
-
-Hyperlink navigation features enables navigation to the URLs (website links) in a PDF file.
-
-
-
-## Table of content navigation
-
-Table of contents navigation allows users to navigate to different parts of a PDF file that are listed in the table of contents section.
-
-You can enable/disable link navigation by using the following code snippet.,
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableHyperlink: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableHyperlink: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-You can change the open state of the hyperlink in the PDF Viewer by using the following code snippet,
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableHyperlink: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- hyperlinkOpenState:'NewTab',
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enableHyperlink: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- hyperlinkOpenState:'NewTab',
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-```
-
-
-
-## See also
-
-* [Toolbar items](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/toolbar/)
-* [Feature Modules](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/feature-module/)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-amazon-s3.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-amazon-s3.md
deleted file mode 100644
index 68b99aaad..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-amazon-s3.md
+++ /dev/null
@@ -1,206 +0,0 @@
----
-layout: post
-title: Open PDF files from AWS S3 in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Open PDF files from AWS S3 in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open PDF files from AWS S3
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF file from AWS S3
-
-PDF Viewer allows to load PDF file from AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from AWS S3.
-
-## Using Standalone PDF Viewer
-
-To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `index.html` File in the JavaScript Project
-
-1. AWS SDK for JavaScript, used for interacting with AWS services like S3:
-
-```javascript
-
-```
-
-2. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
-
-N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account.
-
-```javascript
-AWS.config.update({
- region: '**Your Region**', // Update this your region
- accessKeyId: '*Your Access Key*', // Update this with your access key id
- secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
-});
-```
-
-3. Sets the parameters for fetching the PDF document from S3, including the bucket name and file key. Then Uses the getObject method of the S3 instance to retrieve the document. Converts the document data to a Base64 string and loads it into the Syncfusion PDF Viewer then load Base64 string generated into the viewer.load method.
-
-N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account.
-
-```javascript
-private s3 = new AWS.S3();
-
-pdfviewer.created = function () {
- const getObjectParams = {
- Bucket: '**Your Bucket Name**',
- Key: '**Your Key**',
- };
- s3.getObject(getObjectParams, (err, data) => {
- if (err) {
- console.error('Error fetching document:', err);
- } else {
- if (data && data.Body) {
- const bytes = new Uint8Array(data.Body);
- let binary = '';
- bytes.forEach((byte) => (binary += String.fromCharCode(byte)));
- const base64String = window.btoa(binary);
- setTimeout(() => {
- pdfviewer.load("data:application/pdf;base64,"+base64String);
- }, 2000);
- }
- }
- });
-};
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
-
-## Using Server-Backed PDF Viewer
-
-To load a PDF file from AWS S3 in a PDF Viewer, you can follow the steps below
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Amazon;
-using Amazon.S3;
-using Amazon.S3.Model;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessKey;
-public readonly string _secretKey;
-public readonly string _bucketName;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessKey = _configuration.GetValue("AccessKey");
- _secretKey = _configuration.GetValue("SecretKey");
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF files from AWS S3.
-
-```csharp
-
-[HttpPost("Load")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Load")]
-//Post action for Loading the PDF documents
-
-public async Task Load([FromBody] Dictionary jsonObject)
-{
- // Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
-
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- RegionEndpoint bucketRegion = RegionEndpoint.USEast1;
-
- // Configure the AWS SDK with your access credentials and other settings
- var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion);
-
- string document = jsonObject["document"];
-
- // Specify the document name or retrieve it from a different source
- var response = await s3Client.GetObjectAsync(_bucketName, document);
-
- Stream responseStream = response.ResponseStream;
- responseStream.CopyTo(stream);
- stream.Seek(0, SeekOrigin.Begin);
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
-
- jsonResult = pdfviewer.Load(stream, jsonObject);
-
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessKey": "Your Access Key from AWS S3",
- "SecretKey": "Your Secret Key from AWS S3",
- "BucketName": "Your Bucket name from AWS S3"
-}
-```
-
-N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name
-
-**Step 3:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from AWS S3. Ensure that you correctly pass the document name from the files available in your AWS S3 bucket to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-active-directory.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-active-directory.md
deleted file mode 100644
index 3b1610c4b..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-active-directory.md
+++ /dev/null
@@ -1,260 +0,0 @@
----
-layout: post
-title: Open PDF From AAD in ##Platform_Name## Pdfviewer | Syncfusion
-description: Learn how to Open PDF From AAD in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF From Azure Active Directory in Viewer
-
-### **Overview**
-
-The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer.
-
-### **Steps to Open the PDF File from Azure Active Directory**
-
----
-
-### **Step 1: Register an Application in Azure Active Directory (AAD)**
-
-1. **Go to the Azure Portal**:
- - Navigate to [Azure Portal](https://portal.azure.com).
-
-2. **Register your Application**:
- - In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**.
- - Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**.
-
- 
-
-3. **Create a Client Secret**:
- - In the registered application, go to **Certificates & secrets**.
- - Click **New client secret**.
- - Provide a description and set an expiration period.
- - Click **Add**.
- - Copy the client secret value immediately, as it will be hidden later. Store it securely.
-
- 
-
----
-
-### **Step 2: Create the Azure Storage Account**
-
-1. **Create a Storage Account**:
- - In the Azure portal, use the search bar to search for **Storage accounts**.
- - Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.).
-
- 
-
----
-
-### **Step 3: Assign Role to the Application**
-
-1. **Go to your Storage Account**:
- - Navigate to **Access control (IAM)** > **Add role assignment** in your Azure Storage Account.
-
-2. **Assign Role**:
- - Assign the **Storage Blob Data Contributor** role to your registered application.
- - In the **Assign access to** dropdown, select **User, group, or service principal**.
- - Click on **Select members** and search for your registered application by name or client ID.
- - Select your application and click **Select**.
- - Click **Review + assign** to finalize the role assignment.
-
- 
----
-
-### **Step 4: Upload the PDF Document to the Azure Storage Account**
-
-1. **Navigate to Data Storage**:
- - In the Azure portal, go to **Data storage** > **Containers**.
-
-2. **Upload the PDF File**:
- - Create a new container and upload the PDF document you want to access in the PDF Viewer.
-
- 
----
-
-### **Step 5: Server-Side Configuration**
-
-1. **Configure Server-Side Code**:
- - Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file:
- - `tenantId` (your Azure AD tenant ID),
- - `clientId` (your registered application client ID),
- - `clientSecret` (your registered application client secret),
- - `blobServiceEndpoint` (your storage account blob service URL),
- - `containerName` (your container name in Azure Blob Storage).
-
-2. **Run the Web Service**:
- - After configuring the necessary details, run the web service to make it accessible.
-
----
-
-### **Step 6: Client-Side Configuration**
-
-1. **Run the JS Sample**:
- - Start the JS sample that includes the Syncfusion PDF Viewer.
-
-2. **Load PDF from AAD**:
- - When the user clicks the **Load from AAD** button, the JS client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage.
- - The server will retrieve the PDF from Azure, convert it to a base64 string, and return it to the client.
-
-3. **Display PDF in the PDF Viewer**:
- - Once the base64 string is received, the PDF Viewer will load the PDF using the `viewer.load()` method.
-
----
-
-### **Step 7: Save the PDF Document to Azure**
-
-1. **Save PDF to AAD**:
- - The user can click the **Save to AAD** button to upload any modifications to the PDF back to Azure Blob Storage.
- - This action sends the modified PDF to the server, where it is converted into a byte array and saved to the specified Azure Blob container.
-
----
-
-### **Server-Side Code Snippets**
-```cs
-string tenantId = "Provide the tenant id here";
-string clientId = "Provide the clientid here";
-string clientSecret = "Provide the client secret here";
-string blobServiceEndpoint = "https://your-storage-account.blob.core.windows.net";
-string containerName = "Provide the container name here";
-
-
-
-[HttpPost("LoadFromAAD")]
-[Route("[controller]/LoadFromAAD")]
-public async Task LoadFromAAD(string fileName)
-{
- var clientSecretCredential = new ClientSecretCredential(tenantId, clientId, clientSecret);
- var blobServiceClient = new BlobServiceClient(new Uri(blobServiceEndpoint), clientSecretCredential);
- var containerClient = blobServiceClient.GetBlobContainerClient(containerName);
- var blobClient = containerClient.GetBlobClient(fileName);
-
- // Download the PDF file to a local stream
- using MemoryStream pdfStream = new MemoryStream();
- await blobClient.DownloadToAsync(pdfStream);
- var base64 = Convert.ToBase64String(pdfStream.ToArray());
- return Content("data:application/pdf;base64," + base64);
-}
-
-[AcceptVerbs("SaveToAAD")]
-[HttpPost("SaveToAAD")]
-[Route("[controller]/SaveToAAD")]
-public async Task SaveToAAD([FromBody] Dictionary jsonObject)
-{
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- var fileName = jsonObject.ContainsKey("documentId") ? jsonObject["documentId"] : "Test.pdf";
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- string convertedBase = documentBase.Substring(documentBase.LastIndexOf(',') + 1);
- // Decode the Base64 string to a byte array
- byte[] byteArray = Convert.FromBase64String(convertedBase);
- // Create a MemoryStream from the byte array
- MemoryStream stream = new MemoryStream(byteArray);
- // Create a new BlobServiceClient using the DefaultAzureCredential
- var clientSecretCredential = new ClientSecretCredential(tenantId, clientId, clientSecret);
- var blobServiceClient = new BlobServiceClient(new Uri(blobServiceEndpoint), clientSecretCredential);
- // Get a reference to the container
- var containerClient = blobServiceClient.GetBlobContainerClient(containerName);
- // Get a reference to the blob
- var blobClient = containerClient.GetBlobClient(fileName);
- //FileStream uploadFileStream = new FileStream();
- await blobClient.UploadAsync(stream, true);
- stream.Close();
- return Content(string.Empty);
-}
-
-```
-
-
-
-### **Client-side Code Snippets**
-
-```js
-import { PdfViewer, Toolbar, TextSelection, TextSearch, Print, Navigation, Magnification, Annotation, FormDesigner, FormFields, CustomToolbarItemModel } from '@syncfusion/ej2-pdfviewer';
-import { ComboBox } from "@syncfusion/ej2-dropdowns";
-
-// Inject required modules for PDF Viewer functionality
-PdfViewer.Inject(
- TextSelection,
- TextSearch,
- Print,
- Navigation,
- Toolbar,
- Magnification,
- Annotation,
- FormDesigner,
- FormFields
-);
-
-// Define custom toolbar items
-let toolItem1: CustomToolbarItemModel = {
- id: 'loadFromAAD',
- text: 'Load From AAD',
- tooltipText: 'Custom toolbar item',
- align: 'left'
-};
-
-let toolItem2: CustomToolbarItemModel = {
- id: 'saveToAAD',
- text: 'Save To AAD',
- tooltipText: 'Custom toolbar item',
- align: 'left'
-};
-
-// Initialize the PDF Viewer with custom toolbar items
-let pdfviewer: PdfViewer = new PdfViewer({
- serviceUrl: 'https://localhost:44308/pdfviewer', //provide the service url here
- toolbarSettings: {
- toolbarItems: [
- toolItem1,
- toolItem2,
- 'OpenOption',
- 'PageNavigationTool',
- 'MagnificationTool',
- 'PanTool',
- 'SelectionTool',
- 'SearchOption',
- 'PrintOption',
- 'DownloadOption',
- 'UndoRedoTool',
- 'AnnotationEditTool',
- 'FormDesignerEditTool',
- 'CommentTool',
- 'SubmitForm',
- ]
- }
-});
-
-// Render the PDF Viewer in the DOM
-pdfviewer.appendTo('#PdfViewer');
-
-// Handle toolbar clicks
-pdfviewer.toolbarClick = (args: { item?: { id: string } }) => {
- if (args.item) {
- if (args.item.id === 'loadFromAAD') {
- // Handle 'Load From AAD' logic
- const xhr = new XMLHttpRequest();
- //modify the url based on the file name
- xhr.open('POST', `https://localhost:44308/pdfviewer/LoadFromAAD?fileName=pdf-succinctly.pdf`, true);
- xhr.onreadystatechange = () => {
- if (xhr.readyState === 4 && xhr.status === 200) {
- const data = xhr.responseText;
- console.log(data); // Handle the response
- pdfviewer.load(data,''); // Load the document
- }
- };
- xhr.send();
- } else if (args.item.id === 'saveToAAD') {
- // Handle 'Save To AAD' logic
- pdfviewer.serverActionSettings.download = "SaveToAAD";
- pdfviewer.download(); // Trigger download
- }
- }
-};
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad).
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-blob-storage.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-blob-storage.md
deleted file mode 100644
index 20f6a7fc7..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-azure-blob-storage.md
+++ /dev/null
@@ -1,208 +0,0 @@
----
-layout: post
-title: Open PDF from Azure Blob Storage in ##Platform_Name## Pdfviewer | Syncfusion
-description: Learn about how to Open PDF files from Azure Blob Storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open PDF files from Azure Blob Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF file from Azure Blob Storage
-
-PDF Viewer allows to load PDF file from Azure Blob Storage using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Azure Blob Storage.
-
-## Using Standalone PDF Viewer
-
-To load a PDF file from Azure Blob Storage in a PDF Viewer, you can follow the steps below
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `src/app/app.ts` File in the Angular Project
-
-1. Add the following private properties to the `app.ts`, and assign the values from the configuration to the corresponding properties
-
-N> Replace **Your account name in Azure** with the actual account name for your Azure Blob Storage account and **Your container name in Azure** with the actual container name and **Your Blob name in Azure** with the actual container name.
-
-```typescript
-private accountName: string = "*Your account name in Azure*";
-private containerName: string = "*Your container name in Azure*";
-private blobName: string = "*Your Blob name in Azure*";
-```
-
-2. Constructs the URL to the PDF in Azure Blob Storage. Calls fetchAndConvertToBase64 to fetch the PDF and convert it to a base64 string. Then Loads the base64 string into the PDF Viewer.
-
-```typescript
-pdfviewer.created = function () {
- const url = 'https://'+accountName+'.blob.core.windows.net/'+containerName+'/'+blobName;
- fetchAndConvertToBase64(url).then(base64String => {
- if (base64String) {
- setTimeout(() => {
- pdfviewer.load("data:application/pdf;base64,"+base64String, "");
- }, 2000);
- } else {
- console.error('Failed to fetch and convert file to base64.');
- }
- }).catch(error => console.error('Error:', error));
-}
-```
-
-3. Then it retrieves the PDF file from the given URL and converts the fetched Blob to a base64 string using blobToBase64.
-
-```typescript
-function fetchAndConvertToBase64(url : any) {
- return new Promise(function(resolve, reject) {
- fetch(url).then(function(response) {
- if (!response.ok) {
- throw new Error('HTTP error! Status: ' + response.status);
- }
- return response.blob();
- }).then(function(blob) {
- blobToBase64(blob).then(function(base64String) {
- resolve(base64String);
- });
- }).catch(function(error) {
- console.error('Error fetching file:', error);
- reject(null);
- });
- });
-}
-```
-
-4. Uses FileReader to convert a Blob to a base64 string. Resolves the promise with the base64 string or rejects it in case of an error.
-
-```typescript
-function blobToBase64(blob : any) {
- return new Promise(function(resolve, reject) {
- var reader = new FileReader();
- reader.onload = function() {
- var base64String = reader.result ? reader.result.toString().split(',')[1] : '';
- resolve(base64String);
- };
- reader.onerror = function(error) {
- reject(error);
- };
- reader.readAsDataURL(blob);
- });
-}
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Standalone).
-
-## Using Server-Backed PDF Viewer
-
-To load a PDF file from Azure Blob Storage in a PDF Viewer, you can follow the steps below
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Azure.Storage.Blobs;
-using Azure.Storage.Blobs.Specialized;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private readonly string _storageConnectionString;
-private readonly string _storageContainerName;
-private readonly ILogger _logger;
-
-public PdfViewerController(IConfiguration configuration, ILogger logger)
-{
- _storageConnectionString = configuration.GetValue("connectionString");
- _storageContainerName = configuration.GetValue("containerName");
- _logger = logger;
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF files from Azure Blob Storage
-
-```csharp
-
-[HttpPost("Load")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Load")]
-//Post action for Loading the PDF documents
-
-public IActionResult Load([FromBody] Dictionary jsonObject)
-{
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
-
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.TryParse(jsonObject["isFileName"], out bool isFileName) && isFileName)
- {
- BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);
- string fileName = jsonObject["document"];
- BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName);
- BlockBlobClient blockBlobClient = containerClient.GetBlockBlobClient(fileName);
- blockBlobClient.DownloadTo(stream);
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "connectionString": "*Your Connection string from Azure*",
- "containerName": "*Your container name in Azure*"
-}
-```
-
-N> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name
-
-**Step 3:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Azure Blob Storage. Ensure that you correctly pass the document name from the files available in your azure contanier to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Server-Backend).
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-box-cloud-file-storage.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-box-cloud-file-storage.md
deleted file mode 100644
index 81ce17e9b..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-box-cloud-file-storage.md
+++ /dev/null
@@ -1,156 +0,0 @@
----
-layout: post
-title: Open PDF files from Box cloud file storage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Open PDF files from Box cloud file storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open PDF files from Box cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF file from Box cloud file storage
-
-To load a PDF file from Box cloud file storage in a PDF Viewer, you can follow the steps below
-
-**Step 1** Set up a Box developer account and create a Box application
-
-To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose.
-
-**Step 2:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using Box.V2;
-using Box.V2.Auth;
-using Box.V2.Config;
-using Box.V2.Models;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _clientID;
-public readonly string _clientSecret;
-public readonly string _folderID;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _clientID = _configuration.GetValue("ClientID");
- _clientSecret = _configuration.GetValue("ClientSecret");
- _folderID = _configuration.GetValue("FolderID");
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF file from Box cloud file storage.
-
-```csharp
-[HttpPost("Load")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Load")]
-//Post action for Loading the PDF documents
-
-public async Task Load([FromBody] Dictionary jsonObject)
-{
- //Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
-
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string objectName = jsonObject["document"];
-
- // Initialize the Box API client with your authentication credentials
- var auth = new OAuthSession(_accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
- var config = new BoxConfigBuilder(_clientID, _clientSecret, new Uri("http://boxsdk")).Build();
- var client = new BoxClient(config, auth);
-
- // Download the file from Box storage
- var items = await client.FoldersManager.GetFolderItemsAsync(_folderID, 1000, autoPaginate: true);
- var files = items.Entries.Where(i => i.Type == "file");
-
- // Filter the files based on the objectName
- var matchingFile = files.FirstOrDefault(file => file.Name == objectName);
-
- // Fetch the file from Box storage by its name
- var fileStream = await client.FilesManager.DownloadAsync(matchingFile.Id);
- stream = new MemoryStream();
- await fileStream.CopyToAsync(stream);
-
- // Reset the position to the beginning of the stream
- stream.Position = 0;
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Box_Storage_Access_Token",
- "FolderID": "Your_Folder_ID",
- "ClientID": "Your_Box_Storage_ClientID",
- "ClientSecret": "Your_Box_Storage_ClientSecret"
-}
-```
-
-N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret.
-
-**Step 4:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Box cloud file storage. Ensure that you correctly pass the document name from the files available in your box folder to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example.
-
-N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Box cloud file storage. Make sure to pass the document name from the box folder to the `documentPath` property of the PDF viewer component
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-box-cloud-file-storage)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-dropbox-cloud-file-storage.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-dropbox-cloud-file-storage.md
deleted file mode 100644
index 3aa50d618..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-dropbox-cloud-file-storage.md
+++ /dev/null
@@ -1,194 +0,0 @@
----
-layout: post
-title: Open PDF from Dropbox cloud storage in ##Platform_Name## Pdfviewer | Syncfusion
-description: Learn about how to Open PDF files from Dropbox cloud file storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open PDF files from Dropbox cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF file from Dropbox cloud file storage
-
-PDF Viewer allows to load PDF file from Drop Box using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Drop Box.
-
-## Using Standalone PDF Viewer
-
-To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
-
-**Step 1** Create a Dropbox API
-
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
-
-**Step 2:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 3:** Modify the `src/app/app.ts` File in the Angular Project
-
-1. Import the required namespaces at the top of the file:
-
-```typescript
-import { Dropbox } from 'dropbox';
-```
-
-2. Create an instance of the Dropbox class using an access token for authentication. Next, call the filesDownload method of this Dropbox instance to download the file located at /PDF_Succinctly.pdf. Upon successfully downloading the file, extract the file blob from the response. Convert this file blob to a Base64 string using the blobToBase64 method. Finally, load the Base64 string into a PDF viewer control.
-
-N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
-
-```typescript
-pdfviewer.created = function () {
- let dbx = new Dropbox({ accessToken: 'Your Access Token' });
- dbx.filesDownload({ path: '/PDF_Succinctly.pdf' }).then(async (response) => {
- const blob = await (response.result as any).fileBlob;
- const base64String = await blobToBase64(blob);
- setTimeout(() => {
- pdfviewer.load(base64String, "");
- }, 2000);
- });
-}
-
-function blobToBase64(blob: Blob): Promise {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.readAsDataURL(blob);
- reader.onloadend = () => {
- resolve(reader.result as string);
- };
- });
-}
-```
-
-N> The **npm install dropbox** package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone)
-
-## Using Server-Backed PDF Viewer
-
-To load a PDF file from Dropbox cloud file storage in a PDF Viewer, you can follow the steps below
-
-**Step 1** Create a Dropbox API
-
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
-
-**Step 2:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Dropbox.Api;
-using Dropbox.Api.Files;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _folderName;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _folderName = _configuration.GetValue("FolderName");
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF files from Dropbox cloud file storage.
-
-```csharp
-
-[HttpPost("Load")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Load")]
-//Post action for Loading the PDF documents
-
-public async Task Load([FromBody] Dictionary jsonObject)
-{
- //Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- // Get the file name from the jsonObject, which should contain the Dropbox file name
- string fileName = jsonObject["document"];
-
- using (var dropBox = new DropboxClient(_accessToken))
- {
- using (var response = await dropBox.Files.DownloadAsync(_folderName + "/" + fileName))
- {
- var byteArray = await response.GetContentAsByteArrayAsync();
-
- // Load the PDF file into the PDF viewer
- stream = new MemoryStream(byteArray);
- }
- }
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Dropbox_Access_Token",
- "FolderName": "Your_Folder_Name"
-}
-```
-
-N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name.
-
-**Step 4:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Dropbox cloud file storage. Ensure that you correctly pass the document name from the files available in your dropbox folder to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Server-Backed)
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-google-cloud-storage.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-google-cloud-storage.md
deleted file mode 100644
index 3e2a51353..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-google-cloud-storage.md
+++ /dev/null
@@ -1,139 +0,0 @@
----
-layout: post
-title: Open PDF files from Google Cloud Storage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Open PDF files from Google Cloud Storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open PDF files from Google Cloud Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF file from Google Cloud Storage
-
-To load a PDF file from Google Cloud Storage in a PDF Viewer, you can follow the steps below
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Cloud.Storage.V1;
-using Google.Apis.Auth.OAuth2;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-// Private readonly object _storageClient
-private readonly StorageClient _storageClient;
-
-private IConfiguration _configuration;
-
-public readonly string _bucketName;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
-
- // The key file is used to authenticate with Google Cloud Storage.
- string keyFilePath = "path/to/service-account-key.json";
-
- // Load the service account credentials from the key file.
- var credentials = GoogleCredential.FromFile(keyFilePath);
-
- // Create a storage client with Application Default Credentials
- _storageClient = StorageClient.Create(credentials);
-
- _configuration = configuration;
-
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF files from Google Cloud Storage.
-
-```csharp
-[HttpPost("Load")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Load")]
-//Post action for Loading the PDF documents
-
-public IActionResult Load([FromBody] Dictionary jsonObject)
-{
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
-
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string bucketName = _bucketName;
- string objectName = jsonObject["document"];
- _storageClient.DownloadObject(bucketName, objectName, stream);
- stream.Position = 0;
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "BucketName": "Your Bucket name from Google Cloud Storage"
-}
-```
-
-N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket
-
-N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.
-
-**Step 3:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Google Cloud Storage. Ensure that you correctly pass the document name from the files available in your bucket to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-cloud-storage)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-google-drive.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-google-drive.md
deleted file mode 100644
index 5550a9a11..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-google-drive.md
+++ /dev/null
@@ -1,172 +0,0 @@
----
-layout: post
-title: Open PDF files from Google Drive in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Open PDF files from Google Drive in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open PDF files from Google Drive
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF file from Google Drive
-
-To load a PDF file from Google Drive in a PDF Viewer, you can follow the steps below
-
-**Step 1** Set up Google Drive API
-
-You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk).
-
-**Step 2:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Apis.Drive.v3;
-using Google.Apis.Util.Store;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string folderId;
-public readonly string applicationName;
-public readonly string credentialPath;
-private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly};
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- folderId = _configuration.GetValue("FolderId");
- credentialPath = _configuration.GetValue("CredentialPath");
- applicationName = _configuration.GetValue("ApplicationName");
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF file from Google Drive.
-
-```csharp
-[HttpPost("Load")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Load")]
-//Post action for Loading the PDF documents
-public async Task Load([FromBody] Dictionary jsonObject)
-{
- //Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
-
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string objectName = jsonObject["document"];
-
- UserCredential credential;
- using (var stream1 = new FileStream(credentialPath, FileMode.Open, FileAccess.Read))
- {
- string credPath = "token.json";
- credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
- GoogleClientSecrets.Load(stream1).Secrets,
- Scopes,
- "user",
- CancellationToken.None,
- new FileDataStore(credPath, true));
- }
-
- // Create Google Drive API service.
- var service = new DriveService(new BaseClientService.Initializer()
- {
- HttpClientInitializer = credential,
- ApplicationName = applicationName,
- });
-
- // List PDF files in Google Drive
- listRequest.Q = "mimeType='application/pdf' and '" + folderId + "' in parents and trashed=false";
- listRequest.Fields = "files(id, name)";
- var files = await listRequest.ExecuteAsync();
- string fileIdToDownload = string.Empty;
- foreach (var file in files.Files)
- {
- string fileId = file.Id;
- string fileName = file.Name;
- if (fileName == objectName)
- {
- // Save the matching fileId
- fileIdToDownload = fileId;
- break;
- }
- }
- string fileIds = fileIdToDownload;
- var request = service.Files.Get(fileIds);
- await request.DownloadAsync(stream);
- stream.Position = 0;
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "FolderId": "Your Google Drive Folder ID",
- "CredentialPath": "Your Path to the OAuth 2.0 Client IDs json file",
- "ApplicationName": "Your Application name"
-}
-```
-
-N> Replace **Your Google Drive Folder ID**, **Your Application name**, and **Your Path to the OAuth 2.0 Client IDs json file** with your actual Google drive folder ID , Your name for your application and the path for the JSON file.
-
-N> The **FolderId** part is the unique identifier for the folder. For example, if your folder URL is: `https://drive.google.com/drive/folders/abc123xyz456`, then the folder ID is `abc123xyz456`.
-
-**Step 4:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Google Drive. Ensure that you correctly pass the document name from the files available in your drive folder to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44309" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Google.Apis.Drive.v3** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-drive)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-file/from-one-drive.md b/ej2-javascript/pdfviewer/js/open-pdf-file/from-one-drive.md
deleted file mode 100644
index c7932c011..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-file/from-one-drive.md
+++ /dev/null
@@ -1,174 +0,0 @@
----
-layout: post
-title: Open PDF files from One Drive in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Open PDF files from One Drive in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Open PDF files from One Drive
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF file from One Drive
-
-To load a PDF file from One Drive in a PDF Viewer, you can follow the steps below
-
-**Step 1** Create the Microsoft graph API.
-
-Need to create a Microsoft Graph API application and obtain the necessary credentials, namely the application ID and tenant ID. Follow the steps provided in the [link](https://learn.microsoft.com/en-us/training/modules/msgraph-access-file-data/3-exercise-access-files-onedrive) to create the application and obtain the required IDs.
-
-**Step 2:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Microsoft.Graph;
-using Microsoft.Identity.Client;
-using Helpers;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string folderName;
-public readonly string applicationId;
-public readonly string tenantId;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- folderName = _configuration.GetValue("FolderName");
- tenantId = _configuration.GetValue("TenantId");
- applicationId = _configuration.GetValue("ApplicationId");
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to load the PDF file from One Drive.
-
-```csharp
-[HttpPost("Load")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Load")]
-//Post action for Loading the PDF documents
-
-public async Task Load([FromBody] Dictionary jsonObject)
-{
- // Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string objectName = jsonObject["document"];
- var config = LoadAppSettings();
- var client = GetAuthenticatedGraphClient(config);
-
- var request = client.Me.Drive.Root.Children.Request();
- string folderIdToSearch = string.Empty;
- var results = await request.GetAsync();
-
- var folder = results.FirstOrDefault(f => f.Name == folderName && f.Folder != null);
- if (folder != null)
- {
- // Save the matching folderId
- folderIdToSearch = folder.Id;
- }
-
- var folderRequest = client.Me.Drive.Items[folderIdToSearch].Children.Request();
- var folderContents = await folderRequest.GetAsync();
-
- string fileIdToDownload = string.Empty;
- var file = folderContents.FirstOrDefault(f => f.File != null && f.Name == objectName);
- if (file != null)
- {
- // Save the matching fileId
- fileIdToDownload = file.Id;
- }
-
- string fileIds = fileIdToDownload;
- var fileRequest = client.Me.Drive.Items[fileIdToDownload].Content.Request();
-
- using (var streamResponse = await fileRequest.GetAsync())
- {
- if (streamResponse != null)
- {
- streamResponse.Seek(0, SeekOrigin.Begin);
- await streamResponse.CopyToAsync(stream);
- }
- }
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "TenantId": "Your_Tenant_ID",
- "applApplicationIdicationId": "Your_Application_ID",
- "FolderName": "Your_Folder_Name_To_Access_The_Files_In_Onedrive"
-}
-
-```
-
-N> Replace **Your_Tenent_ID**, **Your_Application_ID**, and **Your_Folder_Name_To_Access_The_Files_In_Onedrive** with your actual tenant ID, application ID, and folder name.
-
-**Step 4:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from One Drive. Ensure that you correctly pass the document name from the files available in your drive folder to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44309" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The following NuGet packages are required to use the previous code example
-* **Microsoft.Identity.Client**
-* **Microsoft.Graph**
-* **Microsoft.Extensions.Configuration**
-* **Microsoft.Extensions.Configuration.FileExtensions**
-* **Microsoft.Extensions.Configuration.Json**
-
-You can install these packages using the NuGet Package Manager in Visual Studio or Visual Studio Code.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-one-drive)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/open-pdf-files.md b/ej2-javascript/pdfviewer/js/open-pdf-files.md
deleted file mode 100644
index 7b72dd119..000000000
--- a/ej2-javascript/pdfviewer/js/open-pdf-files.md
+++ /dev/null
@@ -1,231 +0,0 @@
----
-layout: post
-title: Open PDF files ##Platform_Name## Pdfviewer control | Syncfusion
-description: This page helps you to learn about how to load PDF files from various locations in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Open PDF files
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Open PDF files
-
-You might need to open and view the PDF files from various location. In this section, you can find the information about how to open PDF files from URL, database and as base64 string.
-
-## Opening a PDF from URL
-
-If you have your PDF files in the web, you can open it in the viewer using URL.
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to open it in the viewer using URL
-
-```csharp
-
-public IActionResult Load([FromBody] Dictionary jsonData)
-{
- // Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
-
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string documentPath = GetDocumentPath(jsonData["document"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- stream = new MemoryStream(bytes);
- }
- else
- {
- string fileName = jsonData["document"].Split(new string[] { "://" }, StringSplitOptions.None)[0];
- if (fileName == "http" || fileName == "https")
- {
- WebClient WebClient = new WebClient();
- byte[] pdfDoc = WebClient.DownloadData(jsonData["document"]);
- stream = new MemoryStream(pdfDoc);
- }
- else
- {
- return this.Content(jsonData["document"] + " is not found");
- }
- }
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-
-```
-
-**Step 3:** Set the PDF Viewer Properties in React PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server.Modify the documentPath with the correct PDF Document URL want to load.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace correct PDF Document URL want to load
-viewer.documentPath="https://cdn.syncfusion.com/content/PDFViewer/flutter-succinctly.pdf"
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20URL)
-
-## Opening a PDF from base64 data
-
-The following steps explains how the PDF file can be loaded in PDF Viewer as base64 string.
-
-**Step 1:** Create a Simple PDF Viewer Sample in Angular
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in Angular. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Use the following code snippet to load PDF document using base64 string.
-
-```
-
-```
-
-```javascript
-// Load PDF document from Base64 string
-document.getElementById('load').addEventListener('click', () => {
- viewer.load(
- 'data:application/pdf;base64,'+ AddBase64String, null);
-}
-```
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/Save%20and%20Load/Load%20PDF%20file%20from%20base64%20string/Web%20Service)
-
-## Opening a PDF from database
-
-To load a PDF file from SQL Server database in a PDF Viewer, you can follow the steps below
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using System.Data.SqlClient;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _connectionString;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _connectionString = _configuration.GetValue("ConnectionString");
-}
-```
-
-5. Modify the [Load()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#load) method to open it in the viewer using URL
-
-```csharp
-
-public IActionResult Load([FromBody] Dictionary jsonData)
-{
- // Initialize the PDF viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- MemoryStream stream = new MemoryStream();
- object jsonResult = new object();
-
- if (jsonObject != null && jsonObject.ContainsKey("document"))
- {
- if (bool.Parse(jsonObject["isFileName"]))
- {
- string documentPath = GetDocumentPath(jsonData["document"]);
- if (!string.IsNullOrEmpty(documentPath))
- {
- byte[] bytes = System.IO.File.ReadAllBytes(documentPath);
- stream = new MemoryStream(bytes);
- }
- string documentName = jsonObject["document"];
-
- string connectionString = _connectionString;
- System.Data.SqlClient.SqlConnection connection = new System.Data.SqlClient.SqlConnection(connectionString);
-
- //Searches for the PDF document from the database
- string query = "SELECT FileData FROM Table WHERE FileName = '" + documentName + "'";
- System.Data.SqlClient.SqlCommand command = new System.Data.SqlClient.SqlCommand(query, connection);
- connection.Open();
-
- using (SqlDataReader reader = command.ExecuteReader())
- {
- if (reader.Read())
- {
- byte[] byteArray = (byte[])reader["FileData"];
- stream = new MemoryStream(byteArray);
- }
- }
- }
- else
- {
- byte[] bytes = Convert.FromBase64String(jsonObject["document"]);
- stream = new MemoryStream(bytes);
- }
- }
- jsonResult = pdfviewer.Load(stream, jsonObject);
- return Content(JsonConvert.SerializeObject(jsonResult));
-}
-
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "ConnectionString": "Your connection string for SQL server"
-}
-```
-
-N> Replace **Your Connection string from SQL server** with the actual connection string for your SQL Server database
-
-N> The **System.Data.SqlClient** package must be installed in your application to use the previous code example. You need to modify the connectionString variable in the previous code example as per the connection string of your database.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-database)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/organize-pdf.md b/ej2-javascript/pdfviewer/js/organize-pdf.md
deleted file mode 100644
index 5dbbff5c9..000000000
--- a/ej2-javascript/pdfviewer/js/organize-pdf.md
+++ /dev/null
@@ -1,225 +0,0 @@
----
-layout: post
-title: Organize Pages in ##Platform_Name## PDF Viewer control | Syncfusion
-description: Learn here all about Organize Pages in Syncfusion ##Platform_Name## PDF Viewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Organize Pages in ##Platform_Name## PDF Viewer control
-
-The PDF Viewer allows you to manage your PDF documents efficiently by organizing pages seamlessly. Whether you need to add new pages, remove unnecessary ones, rotate pages, move pages within the document, and copy or duplicate pages, the PDF Viewer facilitates these tasks effortlessly.
-
-## Getting started
-
-To access the organize pages feature, simply open the PDF document in the PDF Viewer and navigate to the left vertical toolbar. Look for the [Organize Pages](https://helpej2.syncfusion.com/documentation/api/pdfviewer/pageOrganizerSettingsModel/) option to begin utilizing these capabilities.
-
-
-
-The page organization support enables you to perform various actions such as rotating, rearranging, inserting, copying, and deleting pages within a PDF document using organize pages dialog.
-
-### Rotating PDF pages
-
-You can adjust the orientation of PDF pages to ensure proper alignment. The rotate icon offers the following options:
-
-* `Rotate clockwise`: Rotate the selected pages 90 degrees clockwise.
-* `Rotate counter-clockwise`: Rotate the selected pages 90 degrees counter-clockwise.
-
-### Rearranging PDF pages
-
-You can easily change the sequence of pages within your document using the drag and drop method:
-
-* `Drag and drop`: Click and drag a page thumbnail to the desired position within the document, then release it to rearrange the page order.
-
-
-
-### Inserting new pages
-
-Effortlessly add new pages to your document with the following options:
-
-* `Insert blank page left`: Insert a blank page to the left of the selected page using the respective icon.
-* `Insert blank page right`: Insert a blank page to the right of the selected page using the corresponding icon.
-
-### Deleting PDF pages
-
-Removing unwanted pages from your document is straight forward:
-
-* `Select pages to delete`: Click on the page thumbnails you wish to remove. You can select multiple pages at once.
-* `Delete selected pages`: Use the delete option in the organize pages pane to remove the selected pages from the document.
-
-### Copying PDF pages
-
-Duplicate the pages within your PDF document effortlessly:
-
-* `Select pages to copy`: Click on the page thumbnails you wish to duplicate. Use the copy option to create duplicates. When a page is copied, the duplicate is automatically added to the right of the selected page. Multiple copies can be made using the toolbar action.
-
-
-
-### Importing a PDF Document
-
-Seamlessly import a PDF document into your existing document:
-
-* `Import PDF document`: Click the **Import Document** button to import a PDF. If a page is selected, the imported document’s thumbnail will be inserted to the right of the selected page. If multiple or no pages are selected, the thumbnail will be added as the first page. When **Save** or **Save As** is clicked, the imported PDF will be merged with the current document. You can insert a blank page to the left or right of the imported thumbnail, delete it, or drag and drop it to reposition as needed.
-
-
-
-### Selecting all pages
-
-Make comprehensive adjustments by selecting all pages simultaneously. This facilitates efficient editing and formatting across the entire document.
-
-
-
-### Zooming Page Thumbnails
-
-Adjust the size of page thumbnails within the organizer panel for better visibility and precision when editing. The zoom functionality allows you to:
-
-* Increase or decrease the size of page thumbnails using the zoom slider
-* See more details on pages when zoomed in
-* View more pages simultaneously when zoomed out
-
-This feature is especially useful when working with documents containing complex layouts or small details that need careful examination during organization.
-
-
-
-### Real-time updates
-
-Witness instant changes in page organization reflected within the PDF Viewer. Simply click the **Save** button to preserve your modifications.
-
-### SaveAs functionality
-
-Safeguard your edits by utilizing the **Save As** feature. This enables you to download the modified version of the PDF document for future reference, ensuring that your changes are securely stored.
-
-## API's supported
-
-**enablePageOrganizer:** This API enables or disables the page organizer feature in the PDF Viewer. By default, it is set to `true`, indicating that the page organizer is enabled.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- enablePageOrganizer : true
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- enablePageOrganizer : true
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-**isPageOrganizerOpen:** This API determines whether the page organizer dialog will be displayed automatically when a document is loaded into the PDF Viewer. By default, it is set to `false`, meaning the dialog is not displayed initially.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- isPageOrganizerOpen : true
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- isPageOrganizerOpen : true
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-**pageOrganizerSettings:** This API allows control over various page management functionalities within the PDF Viewer. It includes options to enable or disable actions such as deleting, inserting, rotating, copying, importing and rearranging pages, as well as configuring thumbnail zoom settings. By default, all these actions are enabled and standard zoom settings are applied.
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- resourceUrl : "https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib",
- pageOrganizerSettings : {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight ts tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- pageOrganizerSettings : {canDelete: true, canInsert: true, canRotate: true, canCopy: true, canRearrange: true, canImport: true, imageZoom: 1, showImageZoomingSlider: true, imageZoomMin: 1, imageZoomMax: 5}
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,
- ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-**openPageOrganizer:** This API opens the page organizer dialog within the PDF Viewer, providing access to manage PDF pages.
-
-```html
-
-```
-
-```ts
-document.getElementById('openPageOrganizer').addEventListener('click', function () {
- // Open Page Organizer panel.
- viewer.pageOrganizer.openPageOrganizer();;
-});
-
-```
-
-**closePageOrganizer:** This API closes the currently open page organizer dialog within the PDF Viewer, if it is present. It allows users to dismiss the dialog when done with page organization tasks.
-
-```html
-
-```
-
-```ts
-document.getElementById('closePageOrganizer').addEventListener('click', function () {
- // Close Page Organizer panel.
- viewer.pageOrganizer.closePageOrganizer();
-});
-```
-
-## Keyboard shortcuts
-
-The following keyboard shortcuts are available at the organize pages dialog.
-
-* **Ctrl+Z** : Undo the last action performed.
-* **Ctrl+Y** : Redo the action that was undone
-* **Ctrl+Scroll** : Zoom in and zoom out page thumbnails for better visibility.
-
-
-
-#### Conclusion
-
-With the Organize Pages feature in the PDF Viewer, managing your PDF documents has never been easier. Whether you are adding new content, adjusting page orientation, moving the pages, duplicating the pages, or removing unnecessary pages, this feature provides the tools you need to streamline your document management workflow. Explore these capabilities today and take control of your PDF documents with ease!
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Organize%20pdf)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/print.md b/ej2-javascript/pdfviewer/js/print.md
deleted file mode 100644
index 873b97b4e..000000000
--- a/ej2-javascript/pdfviewer/js/print.md
+++ /dev/null
@@ -1,146 +0,0 @@
----
-layout: post
-title: Print in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn here all about Print in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: Print
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-# Print in ##Platform_Name## Pdfviewer control
-
-The PDF Viewer supports printing the loaded PDF file. You can enable/disable the print using the following code snippet.
-
-```html
-{% raw %}
-
-
-
-Essential JS 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-{% endraw %}
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-
-
-You can invoke print action using the following code snippet.,
-
-```
-
-
-```
-
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('print').addEventListener('click', function () {
- pdfviewer.print.print();
-});
-
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer'
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-pdfviewer.appendTo('#PdfViewer');
-
-document.getElementById('print').addEventListener('click', function () {
- pdfviewer.print.print();
-});
-
-{% endhighlight %}
-{% endtabs %}
-
-## Customization Print Quality using PrintScaleFactor API
-
-The PDF Viewer allows you to adjust the print quality using the [PrintScaleFactor](https://helpej2.syncfusion.com/javascript/documentation/api/pdfviewer/#printScaleFactor) API. The quality of the print improves as the print quality value increases from 0.5 to 5.
-
-When the value is less than 0.5, the PDF is printed at a standard quality. When the value exceeds 5, the PDF is still printed at the standard quality. In standard quality, printScaleFactor value is set to 1 as default value.
-The effective range for print quality is between 0.5 and 5. Higher values within this range will result in better print quality, but also increase the print time.
-
-By default, the printScaleFactor is set to 1.
-
-* **The following code snippet demonstrates how to customize print quality using the PrintScaleFactor API in the PDF Viewer.**
-{% tabs %}
-{% highlight js tabtitle="Standalone" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- printScaleFactor: 0.5,
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-//pdf with low quality. By changing values you can change the quality of the pdf.
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% highlight js tabtitle="Server-Backed" %}
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- enablePrint: true,
- documentPath: "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf",
- serviceUrl: 'https://services.syncfusion.com/js/production/api/pdfviewer',
- printScaleFactor: 0.5,
- });
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.Toolbar, ej.pdfviewer.Magnification, ej.pdfviewer.LinkAnnotation,ej.pdfviewer.ThumbnailView, ej.pdfviewer.BookmarkView, ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Navigation, ej.pdfviewer.Print);
-//pdf with low quality. By changing values you can change the quality of the pdf.
-pdfviewer.appendTo('#PdfViewer');
-
-{% endhighlight %}
-{% endtabs %}
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/javascript-pdf-viewer-examples/tree/master/How%20to/Customize%20Print%20Quality)
-
-## See also
-
-* [Toolbar items](./toolbar)
-* [Feature Modules](./feature-module)
diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-amazon-s3.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-amazon-s3.md
deleted file mode 100644
index 62f9b7e01..000000000
--- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-amazon-s3.md
+++ /dev/null
@@ -1,220 +0,0 @@
----
-layout: post
-title: Save PDF files to AWS S3 in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Save PDF files to AWS S3 in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save PDF files to AWS S3
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save PDF file to AWS S3
-
-PDF Viewer allows to save PDF file to AWS S3 using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to AWS S3.
-
-## Using Standalone PDF Viewer
-
-To save a PDF file to AWS S3, you can follow the steps below
-
-**Step 1:** Create a Simple PDF Viewer Sample in JavaScript
-
-Start by following the steps provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF viewer sample in JavaScript. This will give you a basic setup of the PDF viewer component.
-
-**Step 2:** Modify the `index.html` File in the JavaScript Project
-
-1. AWS SDK for JavaScript, used for interacting with AWS services like S3:
-
-```javascript
-
-```
-
-2. Configures AWS SDK with the region, access key, and secret access key. This configuration allows the application to interact with AWS services like S3.
-
-N> Replace **Your Region** with the actual Region of your AWS S3 account and **Your Access Key** with the actual Access Key of your AWS S3 account and **Your Security Access Key** with the actual Security Access Key of your AWS S3 account.
-
-```javascript
-AWS.config.update({
- region: '**Your Region**', // Update this your region
- accessKeyId: '*Your Access Key*', // Update this with your access key id
- secretAccessKey: '*Your Security Access Key*', // Update this with your secret access key
-});
-```
-
-3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
-
-```javascript
-var toolItem1 = {
- prefixIcon: 'e-icons e-pv-download-document-icon',
- id: 'download_pdf',
- tooltipText: 'Download file',
- align: 'right'
-};
-
-var pdfviewer = new ej.pdfviewer.PdfViewer({
- resourceUrl:'https://cdn.syncfusion.com/ej2/26.1.35/dist/ej2-pdfviewer-lib',
- toolbarSettings : { toolbarItems: [ 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm'] }
-});
-ej.pdfviewer.PdfViewer.Inject(ej.pdfviewer.TextSelection, ej.pdfviewer.TextSearch, ej.pdfviewer.Print, ej.pdfviewer.Navigation, ej.pdfviewer.Toolbar,ej.pdfviewer.Magnification, ej.pdfviewer.Annotation, ej.pdfviewer.FormDesigner, ej.pdfviewer.FormFields, ej.pdfviewer.PageOrganizer);
-
-pdfviewer.toolbarClick = function (args) {
- if (args.item && args.item.id === 'download_pdf') {
- saveDocument();
- }
-};
-```
-
-4. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to AWS S3 using the putObject method of the S3 instance.
-
-N> Replace **Your Bucket Name** with the actual Bucket name of your AWS S3 account and **Your Key** with the actual File Key of your AWS S3 account.
-
-```typescript
-private s3 = new AWS.S3();
-
-function saveDocument() {
- pdfviewer.saveAsBlob().then(function (value) {
- var reader = new FileReader();
- reader.onload = () => {
- const uint8Array = new Uint8Array(reader.result);
- const putObjectParams = {
- Bucket: '**Your Bucket Name**',
- Key: '**Your Key**',
- Body: uint8Array,
- ContentType: 'application/pdf',
- };
- s3.putObject(putObjectParams, (err, data) => {
- if (err) {
- console.error('Error uploading document:', err);
- } else {
- console.log('Document uploaded successfully:', data);
- }
- });
- };
- reader.readAsArrayBuffer(value);
- });
-};
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Standalone).
-
-## Using Server-Backed PDF Viewer
-
-To save a PDF file to AWS S3, you can follow the steps below
-
-**Step 1:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Amazon;
-using Amazon.S3;
-using Amazon.S3.Model;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessKey;
-public readonly string _secretKey;
-public readonly string _bucketName;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessKey = _configuration.GetValue("AccessKey");
- _secretKey = _configuration.GetValue("SecretKey");
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-5. Modify the [Download()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to AWS S3 bucket
-
-```csharp
-
-[HttpPost("Download")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
-public IActionResult Download([FromBody] Dictionary jsonObject)
-{
- // Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- RegionEndpoint bucketRegion = RegionEndpoint.USEast1;
-
- // Configure the AWS SDK with your access credentials and other settings
- var s3Client = new AmazonS3Client(_accessKey, _secretKey, bucketRegion);
- string bucketName = _bucketName;
- string documentName = jsonObject["documentId"];
- string result = Path.GetFileNameWithoutExtension(documentName);
- byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]);
- using (MemoryStream stream = new MemoryStream(bytes))
- {
- var request = new PutObjectRequest
- {
- BucketName = bucketName,
- Key = result + "_downloaded.pdf",
- InputStream = stream,
- };
- // Upload the PDF document to AWS S3
- var response = s3Client.PutObjectAsync(request).Result;
- }
- return Content(documentBase);
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessKey": "Your Access Key from AWS S3",
- "SecretKey": "Your Secret Key from AWS S3",
- "BucketName": "Your Bucket name from AWS S3"
-}
-```
-
-N> Replace **Your Access Key from AWS S3**, **Your Secret Key from AWS S3**, and **Your Bucket name from AWS S3** with your actual AWS access key, secret key and bucket name
-
-**Step 3:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the `serviceUrl` property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the [documentPath](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#documentpath) property of the PDF viewer component to the desired name of the PDF file you wish to load from AWS S3. Ensure that you correctly pass the document name from the files available in your AWS S3 bucket to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **AWSSDK.S3** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aws-s3/tree/master/Open%20and%20Save%20PDF%20in%20AWS%20S3%20using%20Server-Backend)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-active-directory.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-active-directory.md
deleted file mode 100644
index 7320f2b8c..000000000
--- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-active-directory.md
+++ /dev/null
@@ -1,260 +0,0 @@
----
-layout: post
-title: Save PDF To AAD in ##Platform_Name## Pdfviewer | Syncfusion
-description: Learn how to Save PDF To AAD in Syncfusion ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more.
-platform: ej2-javascript
-control: PDF Viewer
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save PDF To Azure Active Directory in Viewer
-
-### **Overview**
-
-The Syncfusion PDF Viewer allows you to load and save PDF files directly from Azure Active Directory (AAD). Below are the steps to securely load and store PDF documents from and to AAD using the PDF Viewer.
-
-### **Steps to Open the PDF File from Azure Active Directory**
-
----
-
-### **Step 1: Register an Application in Azure Active Directory (AAD)**
-
-1. **Go to the Azure Portal**:
- - Navigate to [Azure Portal](https://portal.azure.com).
-
-2. **Register your Application**:
- - In the Azure portal, go to **Azure Active Directory** > **App registrations** > **New registration**.
- - Register your application and note down the **Application (client) ID** and **Directory (tenant) ID**.
-
- 
-
-3. **Create a Client Secret**:
- - In the registered application, go to **Certificates & secrets**.
- - Click **New client secret**.
- - Provide a description and set an expiration period.
- - Click **Add**.
- - Copy the client secret value immediately, as it will be hidden later. Store it securely.
-
- 
-
----
-
-### **Step 2: Create the Azure Storage Account**
-
-1. **Create a Storage Account**:
- - In the Azure portal, use the search bar to search for **Storage accounts**.
- - Create a new storage account by filling in the required details (e.g., name, location, resource group, etc.).
-
- 
-
----
-
-### **Step 3: Assign Role to the Application**
-
-1. **Go to your Storage Account**:
- - Navigate to **Access control (IAM)** > **Add role assignment** in your Azure Storage Account.
-
-2. **Assign Role**:
- - Assign the **Storage Blob Data Contributor** role to your registered application.
- - In the **Assign access to** dropdown, select **User, group, or service principal**.
- - Click on **Select members** and search for your registered application by name or client ID.
- - Select your application and click **Select**.
- - Click **Review + assign** to finalize the role assignment.
-
- 
----
-
-### **Step 4: Upload the PDF Document to the Azure Storage Account**
-
-1. **Navigate to Data Storage**:
- - In the Azure portal, go to **Data storage** > **Containers**.
-
-2. **Upload the PDF File**:
- - Create a new container and upload the PDF document you want to access in the PDF Viewer.
-
- 
----
-
-### **Step 5: Server-Side Configuration**
-
-1. **Configure Server-Side Code**:
- - Open the server-side application (e.g., ASP.NET Core) and configure the following details in the `PdfViewerController` file:
- - `tenantId` (your Azure AD tenant ID),
- - `clientId` (your registered application client ID),
- - `clientSecret` (your registered application client secret),
- - `blobServiceEndpoint` (your storage account blob service URL),
- - `containerName` (your container name in Azure Blob Storage).
-
-2. **Run the Web Service**:
- - After configuring the necessary details, run the web service to make it accessible.
-
----
-
-### **Step 6: Client-Side Configuration**
-
-1. **Run the JS Sample**:
- - Start the JS sample that includes the Syncfusion PDF Viewer.
-
-2. **Load PDF from AAD**:
- - When the user clicks the **Load from AAD** button, the JS client will make an HTTP request to the server-side API to fetch the PDF from Azure Blob Storage.
- - The server will retrieve the PDF from Azure, convert it to a base64 string, and return it to the client.
-
-3. **Display PDF in the PDF Viewer**:
- - Once the base64 string is received, the PDF Viewer will load the PDF using the `viewer.load()` method.
-
----
-
-### **Step 7: Save the PDF Document to Azure**
-
-1. **Save PDF to AAD**:
- - The user can click the **Save to AAD** button to upload any modifications to the PDF back to Azure Blob Storage.
- - This action sends the modified PDF to the server, where it is converted into a byte array and saved to the specified Azure Blob container.
-
----
-
-### **Server-Side Code Snippets**
-```cs
-string tenantId = "Provide the tenant id here";
-string clientId = "Provide the clientid here";
-string clientSecret = "Provide the client secret here";
-string blobServiceEndpoint = "https://your-storage-account.blob.core.windows.net";
-string containerName = "Provide the container name here";
-
-
-
-[HttpPost("LoadFromAAD")]
-[Route("[controller]/LoadFromAAD")]
-public async Task LoadFromAAD(string fileName)
-{
- var clientSecretCredential = new ClientSecretCredential(tenantId, clientId, clientSecret);
- var blobServiceClient = new BlobServiceClient(new Uri(blobServiceEndpoint), clientSecretCredential);
- var containerClient = blobServiceClient.GetBlobContainerClient(containerName);
- var blobClient = containerClient.GetBlobClient(fileName);
-
- // Download the PDF file to a local stream
- using MemoryStream pdfStream = new MemoryStream();
- await blobClient.DownloadToAsync(pdfStream);
- var base64 = Convert.ToBase64String(pdfStream.ToArray());
- return Content("data:application/pdf;base64," + base64);
-}
-
-[AcceptVerbs("SaveToAAD")]
-[HttpPost("SaveToAAD")]
-[Route("[controller]/SaveToAAD")]
-public async Task SaveToAAD([FromBody] Dictionary jsonObject)
-{
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- var fileName = jsonObject.ContainsKey("documentId") ? jsonObject["documentId"] : "Test.pdf";
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- string convertedBase = documentBase.Substring(documentBase.LastIndexOf(',') + 1);
- // Decode the Base64 string to a byte array
- byte[] byteArray = Convert.FromBase64String(convertedBase);
- // Create a MemoryStream from the byte array
- MemoryStream stream = new MemoryStream(byteArray);
- // Create a new BlobServiceClient using the DefaultAzureCredential
- var clientSecretCredential = new ClientSecretCredential(tenantId, clientId, clientSecret);
- var blobServiceClient = new BlobServiceClient(new Uri(blobServiceEndpoint), clientSecretCredential);
- // Get a reference to the container
- var containerClient = blobServiceClient.GetBlobContainerClient(containerName);
- // Get a reference to the blob
- var blobClient = containerClient.GetBlobClient(fileName);
- //FileStream uploadFileStream = new FileStream();
- await blobClient.UploadAsync(stream, true);
- stream.Close();
- return Content(string.Empty);
-}
-
-```
-
-
-
-### **Client-side Code Snippets**
-
-```js
-import { PdfViewer, Toolbar, TextSelection, TextSearch, Print, Navigation, Magnification, Annotation, FormDesigner, FormFields, CustomToolbarItemModel } from '@syncfusion/ej2-pdfviewer';
-import { ComboBox } from "@syncfusion/ej2-dropdowns";
-
-// Inject required modules for PDF Viewer functionality
-PdfViewer.Inject(
- TextSelection,
- TextSearch,
- Print,
- Navigation,
- Toolbar,
- Magnification,
- Annotation,
- FormDesigner,
- FormFields
-);
-
-// Define custom toolbar items
-let toolItem1: CustomToolbarItemModel = {
- id: 'loadFromAAD',
- text: 'Load From AAD',
- tooltipText: 'Custom toolbar item',
- align: 'left'
-};
-
-let toolItem2: CustomToolbarItemModel = {
- id: 'saveToAAD',
- text: 'Save To AAD',
- tooltipText: 'Custom toolbar item',
- align: 'left'
-};
-
-// Initialize the PDF Viewer with custom toolbar items
-let pdfviewer: PdfViewer = new PdfViewer({
- serviceUrl: 'https://localhost:44308/pdfviewer', //provide the service url here
- toolbarSettings: {
- toolbarItems: [
- toolItem1,
- toolItem2,
- 'OpenOption',
- 'PageNavigationTool',
- 'MagnificationTool',
- 'PanTool',
- 'SelectionTool',
- 'SearchOption',
- 'PrintOption',
- 'DownloadOption',
- 'UndoRedoTool',
- 'AnnotationEditTool',
- 'FormDesignerEditTool',
- 'CommentTool',
- 'SubmitForm',
- ]
- }
-});
-
-// Render the PDF Viewer in the DOM
-pdfviewer.appendTo('#PdfViewer');
-
-// Handle toolbar clicks
-pdfviewer.toolbarClick = (args: { item?: { id: string } }) => {
- if (args.item) {
- if (args.item.id === 'loadFromAAD') {
- // Handle 'Load From AAD' logic
- const xhr = new XMLHttpRequest();
- //modify the url based on the file name
- xhr.open('POST', `https://localhost:44308/pdfviewer/LoadFromAAD?fileName=pdf-succinctly.pdf`, true);
- xhr.onreadystatechange = () => {
- if (xhr.readyState === 4 && xhr.status === 200) {
- const data = xhr.responseText;
- console.log(data); // Handle the response
- pdfviewer.load(data,''); // Load the document
- }
- };
- xhr.send();
- } else if (args.item.id === 'saveToAAD') {
- // Handle 'Save To AAD' logic
- pdfviewer.serverActionSettings.download = "SaveToAAD";
- pdfviewer.download(); // Trigger download
- }
- }
-};
-
-```
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-aad).
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-blob-storage.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-blob-storage.md
deleted file mode 100644
index f466c21f9..000000000
--- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-azure-blob-storage.md
+++ /dev/null
@@ -1,234 +0,0 @@
----
-layout: post
-title: Save PDF to Azure Blob Storage in ##Platform_Name## Pdfviewer | Syncfusion
-description: Learn about how to Save PDF files to Azure Blob Storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save PDF files to Azure Blob Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save PDF file to Azure Blob Storage
-
-PDF Viewer allows to save PDF file to Azure Blob Storage using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to save PDF to Azure Blob Storage.
-
-## Using Standalone PDF Viewer
-
-To save a PDF file to Azure Blob Storage, you can follow the steps below
-
-**Step 1:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 2:** Modify the `src/app/app.ts` File in the Angular Project
-
-1. Import the required namespaces at the top of the file:
-
-```typescript
-import { BlockBlobClient } from "@azure/storage-blob";
-```
-
-2. Add the following private properties to the `app.ts`, and assign the values from the configuration to the corresponding properties
-
-N> Replace **Your SAS Url in Azure** with the actual SAS url for your Azure Blob Storage account.
-
-```typescript
-private SASUrl: string = "*Your SAS Url in Azure*";
-```
-
-3. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
-
-```typescript
-let toolItem1: CustomToolbarItemModel = {
- prefixIcon: 'e-icons e-pv-download-document-icon',
- id: 'download_pdf',
- tooltipText: 'Download file',
- align: 'right'
-};
-
-pdfviewer.toolbarSettings = { toolbarItems: [ 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
-
-pdfviewer.toolbarClick = function (args) {
- if (args.item && args.item.id === 'download_pdf') {
- saveDocument();
- }
-};
-```
-
-4. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob as an ArrayBuffer and upload the ArrayBuffer to Azure Blob Storage using 'BlockBlobClient'.
-
-```typescript
-function saveDocument() {
- pdfviewer.saveAsBlob().then(function (value) {
- var reader = new FileReader();
- reader.onload = async () => {
- if (reader.result) {
- const arrayBuffer: any = reader.result;
- const blobClient = new BlockBlobClient(SASUrl);
- // Upload data to the blob
- const uploadBlobResponse = await blobClient.upload(arrayBuffer, arrayBuffer.byteLength);
- console.log(`Upload blob successfully`, uploadBlobResponse.requestId);
- }
- };
- reader.readAsArrayBuffer(value);
- });
-};
-```
-
-N> The **npm install @azure/storage-blob** package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Standalone).
-
-## Using Server-Backed PDF Viewer
-
-To save a PDF file to Azure Blob Storage, you can follow the steps below
-
-**Step 1:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Azure.Storage.Blobs;
-using Azure.Storage.Blobs.Specialized;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private readonly string _storageConnectionString;
-private readonly string _storageContainerName;
-private readonly ILogger _logger;
-
-public PdfViewerController(IConfiguration configuration, ILogger logger)
-{
- _storageConnectionString = configuration.GetValue("connectionString");
- _storageContainerName = configuration.GetValue("containerName");
- _logger = logger;
-}
-```
-
-5. Modify the [Download()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Azure Blob Storage container
-
-```csharp
-
-[HttpPost("Download")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
-public IActionResult Download([FromBody] Dictionary jsonObject)
-{
- // Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
-
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- string document = jsonObject["documentId"];
-
- BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);
- BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName);
-
- string result = Path.GetFileNameWithoutExtension(document);
- // Get a reference to the blob
- BlobClient blobClient = containerClient.GetBlobClient(result + "_downloaded.pdf");
-
- // Convert the document base64 string to bytes
- byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]);
-
- // Upload the document to Azure Blob Storage
- using (MemoryStream stream = new MemoryStream(bytes))
- {
- blobClient.Upload(stream, true);
- }
- return Content(documentBase);
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "connectionString": "*Your Connection string from Azure*",
- "containerName": "*Your container name in Azure*"
-}
-```
-
-N> Replace **Your Connection string from Azure** with the actual connection string for your Azure Blob Storage account and **Your container name in Azure** with the actual container name
-
-**Step 2:** Modify the web service project to save the downloaded document to Azure Blob Storage
-
-Create a web service project in .NET Core (version 3.0 and above) by following the steps in this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above). In the controller.cs file of your web service project, add the following code to modify the `Download` method. This code saves the downloaded PDF document to Azure Blob Storage container.
-
-```c#
-
-[HttpPost("Download")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
-public IActionResult Download([FromBody] Dictionary jsonObject)
-{
- // Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- string document = jsonObject["documentId"];
-
- BlobServiceClient blobServiceClient = new BlobServiceClient(_storageConnectionString);
-
- BlobContainerClient containerClient = blobServiceClient.GetBlobContainerClient(_storageContainerName);
-
- string result = Path.GetFileNameWithoutExtension(document);
- // Get a reference to the blob
- BlobClient blobClient = containerClient.GetBlobClient(result + "_download.pdf");
-
- // Convert the document base64 string to bytes
- byte[] bytes = Convert.FromBase64String(documentBase.Split(",")[1]);
-
- // Upload the document to Azure Blob Storage
- using (MemoryStream stream = new MemoryStream(bytes))
- {
- blobClient.Upload(stream, true);
- }
- return Content(documentBase);
-}
-```
-
-**Step 3:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Azure Blob Storage. Ensure that you correctly pass the document name from the files available in your azure contanier to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Azure.Storage.Blobs** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-azure-blob-storage/tree/master/Open%20and%20Save%20PDF%20in%20Azure%20Blob%20Storage%20using%20Server-Backend).
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-box-cloud-file-storage.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-box-cloud-file-storage.md
deleted file mode 100644
index ae4dfe809..000000000
--- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-box-cloud-file-storage.md
+++ /dev/null
@@ -1,143 +0,0 @@
----
-layout: post
-title: Save PDF files to Box cloud file storage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Save PDF files to Box cloud file storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save PDF files to Box cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save PDF file to Box cloud file storage
-
-To save a PDF file to Box cloud file storage, you can follow the steps below
-
-**Step 1** Set up a Box developer account and create a Box application
-
-To access Box storage programmatically, you'll need a developer account with Box. Go to the [Box Developer Console](https://developer.box.com/), sign in or create a new account, and then create a new Box application. This application will provide you with the necessary credentials Client ID and Client Secret to authenticate and access Box APIs. Before accessing files, you need to authenticate your application to access your Box account. Box API supports `OAuth 2.0 authentication` for this purpose.
-
-**Step 2:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using Box.V2;
-using Box.V2.Auth;
-using Box.V2.Config;
-using Box.V2.Models;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _clientID;
-public readonly string _clientSecret;
-public readonly string _folderID;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _clientID = _configuration.GetValue("ClientID");
- _clientSecret = _configuration.GetValue("ClientSecret");
- _folderID = _configuration.GetValue("FolderID");
-}
-```
-
-5. Modify the [Download()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Box cloud file storage bucket
-
-```csharp
-[HttpPost("Download")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
-public async Task Download([FromBody] Dictionary jsonObject)
-{
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
-
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- byte[] documentBytes = Convert.FromBase64String(documentBase.Split(",")[1]);
-
- string documentId = jsonObject["documentId"];
- string result = Path.GetFileNameWithoutExtension(documentId);
- string fileName = result + "_downloaded.pdf";
-
- // Initialize the Box API client with your authentication credentials
- var auth = new OAuthSession(_accessToken, "YOUR_REFRESH_TOKEN", 3600, "bearer");
- var config = new BoxConfigBuilder(_clientID, _clientSecret, new Uri("http://boxsdk")).Build();
- var client = new BoxClient(config, auth);
-
- var fileRequest = new BoxFileRequest
- {
- Name = fileName,
- Parent = new BoxFolderRequest { Id = _folderID },
- };
-
- using (var stream = new MemoryStream(documentBytes))
- {
- var boxFile = await client.FilesManager.UploadAsync(fileRequest, stream);
- }
- return Content(documentBase);
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Box_Storage_Access_Token",
- "FolderID": "Your_Folder_ID",
- "ClientID": "Your_Box_Storage_ClientID",
- "ClientSecret": "Your_Box_Storage_ClientSecret"
-}
-```
-
-N> replace **Your_Box_Storage_Access_Token** with your actual box access token, and **Your_Folder_ID** with the ID of the folder in your box storage where you want to perform specific operations. Remember to use your valid box API credentials, as **Your_Box_Storage_ClientID** and **Your_Box_Storage_ClientSecret"** are placeholders for your application's API key and secret.
-
-**Step 4:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Box cloud file storage. Ensure that you correctly pass the document name from the files available in your box folder to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Box.V2.Core** NuGet package must be installed in your application to use the previous code example.
-
-N> Replace `PDF_Succinctly.pdf` with the actual document name that you want to load from Box cloud file storage. Make sure to pass the document name from the box folder to the [documentPath](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#documentpath) property of the PDF viewer component
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-box-cloud-file-storage)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-dropbox-cloud-file-storage.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-dropbox-cloud-file-storage.md
deleted file mode 100644
index 204d08dc1..000000000
--- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-dropbox-cloud-file-storage.md
+++ /dev/null
@@ -1,207 +0,0 @@
----
-layout: post
-title: Save PDF to Dropbox cloud storage in ##Platform_Name## Pdfviewer | Syncfusion
-description: Learn about how to Save PDF files to Dropbox cloud file storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save PDF files to Dropbox cloud file storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save PDF file to Dropbox cloud file storage
-
-PDF Viewer allows to load PDF file from Drop Box using either the Standalone or Server-backed PDF Viewer. Below are the steps and a sample to demonstrate how to open a PDF from Drop Box.
-
-## Using Standalone PDF Viewer
-
-To save a PDF file to Dropbox cloud file storage, you can follow the steps below
-
-**Step 1** Create a Dropbox API
-
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
-
-**Step 2:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 3:** Modify the `src/app/app.ts` File in the Angular Project
-
-1. Import the required namespaces at the top of the file:
-
-```typescript
-import { Dropbox } from 'dropbox';
-```
-
-2. Configure a custom toolbar item for the download function to save a PDF file in Azure Blob Storage.
-
-```typescript
-let toolItem1: CustomToolbarItemModel = {
- prefixIcon: 'e-icons e-pv-download-document-icon',
- id: 'download_pdf',
- tooltipText: 'Download file',
- align: 'right'
-};
-
-pdfviewer.toolbarSettings = { toolbarItems: [ 'OpenOption', 'PageNavigationTool', 'MagnificationTool', 'PanTool', 'SelectionTool', 'SearchOption', 'PrintOption', toolItem1, 'UndoRedoTool', 'AnnotationEditTool', 'FormDesignerEditTool', 'CommentTool', 'SubmitForm']}
-
-pdfviewer.toolbarClick = function (args) {
- if (args.item && args.item.id === 'download_pdf') {
- saveDocument();
- }
-};
-```
-
-3. Retrieve the PDF viewer instance and save the current PDF as a Blob. Then, read the Blob using a FileReader to convert it into an ArrayBuffer, and upload the ArrayBuffer to Drop Box using the filesUpload method of the Drop Box instance.
-
-N> Replace **Your Access Token** with the actual Access Token of your Drop Box account.
-
-```typescript
-function saveDocument() {
- pdfviewer.saveAsBlob().then(function (value) {
- var reader = new FileReader();
- reader.onload = async () => {
- if (reader.result) {
- const dbx = new Dropbox({ accessToken: 'Your Access Token' });
- if(reader && reader.result){
- const uint8Array = new Uint8Array(reader.result as ArrayBuffer);
- dbx.filesUpload({ path: '/' + pdfviewer.fileName, contents: uint8Array })
- .then(response => {
- console.log(response);
- })
- .catch(error => {
- console.error(error);
- });
- }
- }
- };
- reader.readAsArrayBuffer(value);
- });
-}
-```
-
-N> The **npm install dropbox** package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Standalone)
-
-## Using Server-Backed PDF Viewer
-
-To save a PDF file to Dropbox cloud file storage, you can follow the steps below
-
-**Step 1** Create a Dropbox API
-
-To create a Dropbox API App, you should follow the official documentation provided by Dropbox [link](https://www.dropbox.com/developers/documentation/dotnet#tutorial). The process involves visiting the Dropbox Developer website and using their App Console to set up your API app. This app will allow you to interact with Dropbox programmatically, enabling secure access to files and data.
-
-**Step 2:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Dropbox.Api;
-using Dropbox.Api.Files;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string _accessToken;
-public readonly string _folderName;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- _accessToken = _configuration.GetValue("AccessToken");
- _folderName = _configuration.GetValue("FolderName");
-}
-```
-
-5. Modify the [Download()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Dropbox cloud file storage bucket
-
-```csharp
-
-[HttpPost("Download")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
-public async Task Download([FromBody] Dictionary jsonObject)
-{
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
-
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- byte[] documentBytes = Convert.FromBase64String(documentBase.Split(",")[1]);
-
- string documentId = jsonObject["documentId"];
- string result = Path.GetFileNameWithoutExtension(documentId);
- string fileName = result + "_downloaded.pdf";
-
- using (var dropBox = new DropboxClient(_accessToken))
- {
- using (var stream = new MemoryStream(documentBytes))
- {
- // Upload the document to Dropbox
- var uploadedFile = await dropBox.Files.UploadAsync(
- _folderName + "/" + fileName,
- WriteMode.Overwrite.Instance,
- body: stream
- );
- }
- }
- return Content(documentBase);
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "AccessToken": "Your_Dropbox_Access_Token",
- "FolderName": "Your_Folder_Name"
-}
-```
-
-N> Replace **Your_Dropbox_Access_Token** with your actual Dropbox access token and **Your_Folder_Name** with your folder name.
-
-**Step 4:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Dropbox cloud file storage. Ensure that you correctly pass the document name from the files available in your dropbox folder to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Dropbox.Api** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-dropbox-cloud-file-storage/tree/master/Open%20and%20Save%20PDF%20in%20Drop%20Box%20using%20Server-Backed)
diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-google-cloud-storage.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-google-cloud-storage.md
deleted file mode 100644
index 6007ba1a0..000000000
--- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-google-cloud-storage.md
+++ /dev/null
@@ -1,133 +0,0 @@
----
-layout: post
-title: Save PDF files to Google Cloud Storage in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Save PDF files to Google Cloud Storage in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save PDF files to Google Cloud Storage
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save PDF file to Google Cloud Storage
-
-To save a PDF file to Google Cloud Storage, you can follow the steps below
-
-**Step 1:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 2:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Cloud.Storage.V1;
-using Google.Apis.Auth.OAuth2;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-// Private readonly object _storageClient
-private readonly StorageClient _storageClient;
-
-private IConfiguration _configuration;
-
-public readonly string _bucketName;
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
-
- // The key file is used to authenticate with Google Cloud Storage.
- string keyFilePath = "path/to/service-account-key.json";
-
- // Load the service account credentials from the key file.
- var credentials = GoogleCredential.FromFile(keyFilePath);
-
- // Create a storage client with Application Default Credentials
- _storageClient = StorageClient.Create(credentials);
-
- _configuration = configuration;
-
- _bucketName = _configuration.GetValue("BucketName");
-}
-```
-
-5. Modify the [Download()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Google Cloud Storage bucket
-
-```csharp
-[HttpPost("Download")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-public IActionResult Download([FromBody] Dictionary jsonObject)
-{
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- string bucketName = _bucketName;
- string fileName = jsonObject["documentId"];
-
- // Convert the base64 string back to bytes
- string result = Path.GetFileNameWithoutExtension(fileName);
- byte[] documentBytes = Convert.FromBase64String(documentBase.Split(",")[1]);
-
- // Upload the document to Google Cloud Storage
- using (var memoryStream = new MemoryStream(documentBytes))
- {
- _storageClient.UploadObject(bucketName, result + "_downloaded.pdf", null, memoryStream);
- }
- return Content(documentBase);
-}
-```
-
-6. Open the `appsettings.json` file in your web service project, Add the following lines below the existing `"AllowedHosts"` configuration
-
-```json
-{
- "Logging": {
- "LogLevel": {
- "Default": "Information",
- "Microsoft.AspNetCore": "Warning"
- }
- },
- "AllowedHosts": "*",
- "BucketName": "Your Bucket name from Google Cloud Storage"
-}
-```
-
-N> Replace **Your Bucket name from Google Cloud Storage** with the actual name of your Google Cloud Storage bucket
-
-N> Replace **path/to/service-account-key.json** with the actual file path to your service account key JSON file. Make sure to provide the correct path and filename.
-
-**Step 3:** Set the PDF Viewer Properties in JavaScript PDF viewer component
-
-Modify the [serviceUrl](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#serviceurl) property of the PDF viewer component with the accurate URL of your web service project, replacing `https://localhost:44396/pdfviewer` with the actual URL of your server. Set the `documentPath` property of the PDF viewer component to the desired name of the PDF file you wish to load from Google Cloud Storage. Ensure that you correctly pass the document name from the files available in your bucket to the documentPath property.
-
-```javascript
-
-import { PdfViewer, Toolbar, Magnification, Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner} from '@syncfusion/ej2-pdfviewer';
-
-PdfViewer.Inject( Toolbar,Magnification,Navigation, LinkAnnotation,ThumbnailView,
- BookmarkView, TextSelection, Annotation, FormFields, FormDesigner);
-
-let viewer: PdfViewer = new PdfViewer();
-// Replace the "localhost:44396" with the actual URL of your server
-viewer.serviceUrl = 'https://localhost:44396/pdfviewer';
-viewer.appendTo('#pdfViewer');
-viewer.load('PDF_Succinctly.pdf', null);
-
-```
-
-N> The **Google.Cloud.Storage.V1** NuGet package must be installed in your application to use the previous code example.
-
-[View sample in GitHub]()[View sample in GitHub](https://github.com/SyncfusionExamples/open-save-pdf-documents-in-google-cloud-storage)
\ No newline at end of file
diff --git a/ej2-javascript/pdfviewer/js/save-pdf-file/to-google-drive.md b/ej2-javascript/pdfviewer/js/save-pdf-file/to-google-drive.md
deleted file mode 100644
index f49978112..000000000
--- a/ej2-javascript/pdfviewer/js/save-pdf-file/to-google-drive.md
+++ /dev/null
@@ -1,162 +0,0 @@
----
-layout: post
-title: Save PDF files to Google Drive in ##Platform_Name## Pdfviewer control | Syncfusion
-description: Learn about how to Save PDF files to Google Drive in ##Platform_Name## Pdfviewer control of Syncfusion Essential JS 2 and more details.
-platform: ej2-javascript
-control: Save PDF files to Google Drive
-publishingplatform: ##Platform_Name##
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Save PDF file to Google Drive
-
-To save a PDF file to Google Drive, you can follow the steps below
-
-**Step 1** Set up Google Drive API
-
-You must set up a project in the Google Developers Console and enable the Google Drive API. Obtain the necessary credentials to access the API. For more information, view the official [link](https://developers.google.com/drive/api/guides/enable-sdk).
-
-**Step 2:** Create a PDF Viewer sample in JavaScript
-
-Follow the instructions provided in this [link](https://ej2.syncfusion.com/javascript/documentation/pdfviewer/getting-started) to create a simple PDF Viewer sample in JavaScript. This will set up the basic structure of your PDF Viewer application.
-
-**Step 3:** Modify the `PdfViewerController.cs` File in the Web Service Project
-
-1. Create a web service project in .NET Core 3.0 or above. You can refer to this [link](https://www.syncfusion.com/kb/11063/how-to-create-pdf-viewer-web-service-in-net-core-3-0-and-above) for instructions on how to create a web service project.
-
-2. Open the `PdfViewerController.cs` file in your web service project.
-
-3. Import the required namespaces at the top of the file:
-
-```csharp
-using System.IO;
-using Google.Apis.Drive.v3;
-using Google.Apis.Util.Store;
-```
-
-4. Add the following private fields and constructor parameters to the `PdfViewerController` class, In the constructor, assign the values from the configuration to the corresponding fields
-
-```csharp
-private IConfiguration _configuration;
-public readonly string folderId;
-public readonly string applicationName;
-public readonly string credentialPath;
-private static readonly string[] Scopes = { DriveService.Scope.DriveFile, DriveService.Scope.DriveReadonly};
-
-public PdfViewerController(IWebHostEnvironment hostingEnvironment, IMemoryCache cache, IConfiguration configuration)
-{
- _hostingEnvironment = hostingEnvironment;
- _cache = cache;
- _configuration = configuration;
- folderId = _configuration.GetValue("FolderId");
- credentialPath = _configuration.GetValue("CredentialPath");
- applicationName = _configuration.GetValue("ApplicationName");
-}
-```
-
-5. Modify the [Download()](https://helpej2.syncfusion.com/documentation/api/pdfviewer/#download) method to save the downloaded PDF files to Google Drive bucket
-
-```csharp
-[HttpPost("Download")]
-[Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
-[Route("[controller]/Download")]
-//Post action for downloading the PDF documents
-
-public async Task Download([FromBody] Dictionary jsonObject)
-{
- //Initialize the PDF Viewer object with memory cache object
- PdfRenderer pdfviewer = new PdfRenderer(_cache);
-
- string documentBase = pdfviewer.GetDocumentAsBase64(jsonObject);
- byte[] documentBytes = Convert.FromBase64String(documentBase.Split(",")[1]);
-
- string documentId = jsonObject["documentId"];
- string result = Path.GetFileNameWithoutExtension(documentId);
- string fileName = result + "_downloaded.pdf";
-
- UserCredential credential;
-
- using (var memStream = new FileStream(credentialPath, FileMode.Open, FileAccess.Read))
- {
- string credPath = "token.json";
- credential = await GoogleWebAuthorizationBroker.AuthorizeAsync(
- GoogleClientSecrets.Load(memStream).Secrets,
- Scopes,
- "user",
- CancellationToken.None,
- new FileDataStore(credPath, true));
- }
-
- // Create the Drive API service.
- var service = new DriveService(new BaseClientService.Initializer()
- {
- HttpClientInitializer = credential,
- ApplicationName = applicationName,
- });
-
- var fileMetadata = new Google.Apis.Drive.v3.Data.File()
- {
- Name = fileName,
- Parents = new List