Select and style part of the content in a cell

Posted by: adisa.craig on 3 December 2024, 11:49 pm EST

    • Post Options:
    • Link

    Posted 3 December 2024, 11:49 pm EST - Updated 3 December 2024, 11:54 pm EST

    Is there a way to add formatting to part of the content in a cell directly. similar to how it is done in Excel? By simply selecting part of the content add adding bold or italic (as seen in image)

  • Posted 4 December 2024, 6:51 am EST - Updated 4 December 2024, 6:57 am EST

    Hi

    SpreadJS supports the ability to format specific portions of cell content using its Rich Text feature. However, unlike Excel, applying rich text formatting requires opening the Rich Text Dialog box. Directly selecting a portion of the text in the cell and applying styling options will modify the style of the entire cell content, not just the selected part.

    To add rich text formatting to specific parts of a cell’s content, please follow the steps demonstrated in the accompanying GIF.

    Please refer this documentation for adding the RichText via code https://developer.mescius.com/spreadjs/docs/features/cells/SettingRichTextCell#site_main_content-doc-content_title.

    Rich Text Demo: https://developer.mescius.com/spreadjs/demos/features/cells/basic-rich-text#demo_source_name

    Hope this works for you!

    Best Regards,

    Ankit

  • Posted 13 December 2024, 2:29 pm EST

    Hi Ankit, can you show within a jscodemine how richtexteditor can be imported via npm, I have been trying to add the necessary packages to my package.json file and it keeps throwing errors and making me add other packages such as @grapecity/spread-sheets-barcode, @grapecity/spread-sheets-languagepackages and @grapecity/spread-sheets-io

  • Posted 16 December 2024, 5:57 am EST - Updated 16 December 2024, 6:02 am EST

    Hi,

    The Rich Text Editor is part of the SpreadJS Designer Ribbon Component (not included when only using SpreadJS) and you must add the required dependencies of the Designer Ribbon Component as mentioned in the following doc page: https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/getting-started-designer

    You could also refer to the following sample: https://jscodemine.mescius.io/share/DzH45m79hUSNzr1HEvwFbA/?defaultOpen={"OpenedFileName"%3A["%2Fapp.js"]%2C"ActiveFile"%3A"%2Fapp.js"}

    If you still face the issue, I request you to kindly share us a sample replicating the issue.

    Regards,

    Ankit

  • Posted 17 December 2024, 2:14 pm EST

    Hi Ankit,

    I tried modifying the following jscodemine as we are importing packages as node modules directly https://jscodemine.mescius.io/sample/WaoLs3D1gkKu3jzbeQi1XQ/

    This however throws console errors and keeps erroring on missing packages

  • Posted 19 December 2024, 5:41 am EST - Updated 19 December 2024, 5:46 am EST

    Hi,

    Thank you for sharing the details. Based on the information provided, the issue arises due to missing dependencies when attempting to modify the sample in the provided JSCodemine project. Specifically, the Rich Text dialog box is a feature of the SpreadJS Designer and requires certain dependencies to be explicitly imported when using SpreadJS as node modules.

    Missing Dependencies:

    To resolve the errors, ensure the following dependencies are included in your project:

    1. Localization Resources

    The @grapecity/spread-sheets-designer-resources-en module is required for localization support in the Designer, including the Rich Text dialog box. Without this module, the Designer fails to load essential resources.

    Add the import:

    import '@grapecity/spread-sheets-designer-resources-en';
    1. Designer CSS Styles The Rich Text dialog box also requires the Designer’s CSS for proper layout and styling.

    Add the import:

    <link rel="stylesheet" href="node_modules/@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css">

    Please refer the updated Solution based on your provided code Sample. You could also refer to the following JSCodeMine Sample:

    Run the Sample:

    >>> npm i
    >>> npm start

    Reference:

    Designer Quick Start doc:- https://developer.mescius.com/spreadjs/docs/spreadjs-designer-component/quick-start-designer#use-designer-component-with-an-existing-spreadsheet

    We hope this works for you. Please feel free to reach out if you need further assistance.

    Here is the modified JSCodeMine Example: https://jscodemine.mescius.io/share/rSWU7WdLkE2RzZJ7EKUBEw/?defaultOpen={"OpenedFileName"%3A["%2Fsrc%2Fapp.js"]%2C"ActiveFile"%3A"%2Fsrc%2Fapp.js"}

    Please note that this requires valid SpreadJS Designer Ribbon Addon Component License Key (sold separately than SpreadJS). Without Valid SpreadJS Designer Ribbon Addon License, running sample will give error. Refer to the following page on Licensing https://developer.mescius.com/spreadjs/licensing. You may contact the Sales Team for the purchase of the License.

    Best regards,

    Ankit

    spread-js_c70291_updated (3).zip

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels