diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html index 28591874d..7e99468b9 100644 --- a/Document-Processing-toc.html +++ b/Document-Processing-toc.html @@ -5609,6 +5609,7 @@
  • Text Cell Formatting
  • +
  • Rich Text Formatting
  • Illustrations
  • Rows and Columns
  • Sorting
  • diff --git a/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_richtext.gif b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_richtext.gif new file mode 100644 index 000000000..f76c1bdf5 Binary files /dev/null and b/Document-Processing/Excel/Spreadsheet/React/images/spreadsheet_richtext.gif differ diff --git a/Document-Processing/Excel/Spreadsheet/React/rich-text-formatting.md b/Document-Processing/Excel/Spreadsheet/React/rich-text-formatting.md new file mode 100644 index 000000000..110ff8b8c --- /dev/null +++ b/Document-Processing/Excel/Spreadsheet/React/rich-text-formatting.md @@ -0,0 +1,78 @@ +--- +layout: post +title: Rich Text Formatting in React Spreadsheet component | Syncfusion +description: Learn how to apply rich text formatting in Syncfusion React Spreadsheet component of Syncfusion Essential JS 2 and more. +control: Formatting +platform: document-processing +documentation: ug +--- + +# Rich Text Formatting + +Rich text formatting allows you to apply different styles to specific portions of text within a single cell to improve readability and presentation. Currently, only subscript and superscript formatting are supported, and other style formats through richText are not available. + +In the **Syncfusion React Spreadsheet**, rich text formatting is supported through the [`richText`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/index-default#richtext) property of the cell model. This property lets you define multiple text segments inside a cell, where each segment can have its own style. + +## Rich Text Structure + +Each `richText` segment contains: + +- `text` – Specifies the content of the segment +- `style` – Defines formatting using the [`CellStyleModel`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/cellstylemodel) + +## Subscript and Superscript + +Subscript and superscript formatting are supported as part of rich text formatting and can be applied to specific portions of text within a cell. + +To apply these formats, use the verticalAlign property within the style of a rich text segment: + +Set `verticalAlign: 'super'` for superscript and `verticalAlign: 'sub'` for subscript. + +#### How to Apply Subscript and Superscript + +You can apply subscript and superscript formatting in following ways: + +1. Select the desired portion of text within a cell, then click the Subscript or Superscript option in the ribbon to apply the formatting. + +![Subscript and superscript in Spreadsheet](./images/spreadsheet_richtext.gif) + +2. You can define the richText property directly while initializing the Spreadsheet. This is useful when you want the formatting to be applied when the data is loaded. + +```javascript + cells: [ + { + value: 'H2O', + richText: [ + { text: 'H' }, + { text: '2', style: { verticalAlign: 'sub' } }, + { text: 'O' } + ] + } + ] +``` + +3. You can also apply subscript and superscript dynamically using the updateCell method. + +```javascript + spreadsheet.updateCell({ value: 'X2', richText: [ + { text: 'X' }, + { text: '2', style: { verticalAlign: 'super' } } + ] }, 'A5'); +``` + +The following code example shows the subscript and superscript formatting in cells of the spreadsheet. + +{% tabs %} +{% highlight js tabtitle="app.jsx" %} +{% include code-snippet/spreadsheet/react/richtext-format-cs1/app/app.jsx %} +{% endhighlight %} +{% highlight ts tabtitle="app.tsx" %} +{% include code-snippet/spreadsheet/react/richtext-format-cs1/app/app.tsx %} +{% endhighlight %} +{% endtabs %} + +{% previewsample "/document-processing/code-snippet/spreadsheet/react/richtext-format-cs1" %} + +## Limitations +* **Limited formatting support:** Only subscript and superscript formatting are supported within rich text. Other formatting options such as font size, font color, and font weight are not supported. +* **Edit mode requirement:** Formatting can be applied only while the cell is in edit mode. Selecting text outside of edit mode does not support subscript or superscript formatting. \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.jsx b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.jsx new file mode 100644 index 000000000..dabc734fb --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.jsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet'; + +function App() { + const spreadsheetRef = React.useRef(null); + const sheets = [ + { + columns: [{ width: 200 }], + rows: [ + { cells: [{ value: 'Plain Text' }] }, + { + cells: [ + { + value: 'Mineral Water H2O', + richText: [ + { text: 'Mineral Water H' }, + { text: '2', style: { verticalAlign: 'sub' } }, + { text: 'O' } + ] + } + ] + }, + { + cells: [ + { + value: 'Energy Supplement C6H12O6', + richText: [ + { text: 'Energy Supplement C' }, + { text: '6', style: { verticalAlign: 'sub' } }, + { text: 'H' }, + { text: '12', style: { verticalAlign: 'sub' } }, + { text: 'O' }, + { text: '6', style: { verticalAlign: 'sub' } } + ] + } + ] + }, + { cells: [{ value: 'H2O' }] }, + ] + } + ]; + + const onCreated = () => { + const spreadsheet = spreadsheetRef.current; + if (!spreadsheet) return; + spreadsheet.updateCell({ richText: [{text: 'H'},{ text: '2', style: { verticalAlign: 'sub' } }, { text: 'O' } + ] }, 'A4'); + spreadsheet.updateCell({ value: 'X2', richText: [ + { text: 'X' }, + { text: '2', style: { verticalAlign: 'super' } } + ] }, 'A5'); + }; + + return ( +
    + + +
    + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.tsx b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.tsx new file mode 100644 index 000000000..5dc086b34 --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/app/app.tsx @@ -0,0 +1,66 @@ +import * as React from 'react'; +import { createRoot } from 'react-dom/client'; +import { SpreadsheetComponent, SheetModel } from '@syncfusion/ej2-react-spreadsheet'; + +function App(): React.ReactElement { + const spreadsheetRef = React.useRef(null); + const sheets: SheetModel[] = [ + { + columns: [{ width: 200 }], + rows: [ + { cells: [{ value: 'Plain Text' }] }, + { + cells: [ + { + value: 'Mineral Water H2O', + richText: [ + { text: 'Mineral Water H' }, + { text: '2', style: { verticalAlign: 'sub' } }, + { text: 'O' } + ] + } + ] + }, + { + cells: [ + { + value: 'Energy Supplement C6H12O6', + richText: [ + { text: 'Energy Supplement C' }, + { text: '6', style: { verticalAlign: 'sub' } }, + { text: 'H' }, + { text: '12', style: { verticalAlign: 'sub' } }, + { text: 'O' }, + { text: '6', style: { verticalAlign: 'sub' } } + ] + } + ] + }, + { cells: [{ value: 'H2O' }] }, + ] + } + ]; + + const onCreated = (): void => { + const spreadsheet = spreadsheetRef.current; + if (!spreadsheet) return; + spreadsheet.updateCell({ richText: [{text: 'H'},{ text: '2', style: { verticalAlign: 'sub' } }, { text: 'O' } + ] }, 'A4'); + spreadsheet.updateCell({ value: 'X2', richText: [ + { text: 'X' }, + { text: '2', style: { verticalAlign: 'super' } } + ] }, 'A5'); + }; + + return ( +
    + + +
    + ); +} + +export default App; + +const root = createRoot(document.getElementById('root')!); +root.render(); \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/index.html b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/index.html new file mode 100644 index 000000000..2fb5b324f --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/index.html @@ -0,0 +1,36 @@ + + + + + Syncfusion React Spreadsheet + + + + + + + + + + + + +
    +
    Loading....
    +
    + + + \ No newline at end of file diff --git a/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/systemjs.config.js b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/systemjs.config.js new file mode 100644 index 000000000..ed680b54d --- /dev/null +++ b/Document-Processing/code-snippet/spreadsheet/react/richtext-format-cs1/systemjs.config.js @@ -0,0 +1,58 @@ +System.config({ + transpiler: "ts", + typescriptOptions: { + target: "es5", + module: "commonjs", + moduleResolution: "node", + emitDecoratorMetadata: true, + experimentalDecorators: true, + "jsx": "react" + }, + meta: { + 'typescript': { + "exports": "ts" + } + }, + paths: { + "syncfusion:": "https://cdn.syncfusion.com/ej2/33.1.44/" + }, + map: { + app: 'app', + ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js", + typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js", + "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js", + "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js", + "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js", + "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js", + "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js", + "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js", + "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js", + "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js", + "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js", + "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js", + "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js", + "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js", + "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js", + "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js", + "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js", + "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js", + "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js", + "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js", + "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js", + "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js", + "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js", + "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js", + "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js", + + }, + packages: { + 'app': { main: 'app', defaultExtension: 'tsx' }, + } + +}); + +System.import('app'); + + +