How to Make Content Controls Stand Out in SyncFusion Document Editor

[Jason Roozee]

We are trying to figure out a way to make Content Control's more obvious to the end-user. Currently, a content control like a Plain Text Content Control, after being inserted into a sentence does not stand out in any way to the end user  making it easily overlooked. 

Unlike MS Word, a content control text box at least shows up with a lighter gray text so it stands out. However in SyncFusion Document Editor (JS), it blends right in with the rest of the sentence.

We would like the content control to have a outline or different color text so they standout to the user. However, when saving to PDF that styling should not appear.

Is there a way to do this programmatically? 

Attachment: chrome_xwHmz3U9ff_44854e1e.png

[Akshaya Arivoli]

Hi Jason,

We are currently analyzing your requirement “a content control text box at least shows up with a lighter gray text so it stands out ” to achieve in Document Editor. We will update you with further details on September 18, 2025.

Regards,

Akshaya

[Akshaya Arivoli]

Hi Jason,

We have analysed your requirement and logged this as a feature request. We don’t have any immediate plans to implement this feature now.

We usually have an interval of at least three months between the releases. At the planning stage for every release cycle, we review all open features once again and finalize features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.       

You can track the status of feature from the below link: 

Provide support to display the font color of content control on grey in JavaScript | Feedback Portal     

Regards,

Akshaya   

[Jason Roozee]

Got it. Is there a workaround for now?

[Jason Roozee]

Got it. Is there a workaround for now?

[Akshaya Arivoli]

Hi Jason,

We are currently checking on the possibilities to provide workaround, we will update you with further details on September 23, 2025.

Regards,

Akshaya

[Akshaya Arivoli]

Hi Jason,

We are currently checking on the possibilities to provide workaround, we will update you with further details on September 24, 2025.

Regards,

Akshaya

[Akshaya Arivoli]

Hi Jason,

We can achieve your requirement using Word Processor Server library in Import API of the DocumentEditor Web service project. Refer to the below sample and code snippets for the same.

Sample : https://stackblitz.com/edit/hadojbwh?file=index.js

Note:

1. Kindly run the ASP.NET Core sample first then the client sample

2. Open the attached document predefined content controls place holder text will be grey

3. New content control added using Document Editor will remains same

Code Snippet:

    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;

           

            WDocument document = new WDocument(stream, WFormatType.Docx);          

            List<Syncfusion.DocIO.DLS.Entity> inlineContentControls = document.FindAllItemsByProperty(Syncfusion.DocIO.DLS.EntityType.InlineContentControl, null, null);

            List<Syncfusion.DocIO.DLS.Entity> blockContentControls = document.FindAllItemsByProperty(Syncfusion.DocIO.DLS.EntityType.BlockContentControl, null, null);

 

            //Iterate through the collection of inline content controls.

            foreach (Syncfusion.DocIO.DLS.IEntity entity in inlineContentControls)

            {

                Syncfusion.DocIO.DLS.InlineContentControl icc = (Syncfusion.DocIO.DLS.InlineContentControl)entity;

                bool isEdited = IsInlineContentControlEdited(icc);

                if (!isEdited)

                    ChangeTextColor(icc.ParagraphItems);

            }

 

            //Iterate through the collection of block content controls.

            foreach (Syncfusion.DocIO.DLS.IEntity entity in blockContentControls)

            {

                Syncfusion.DocIO.DLS.BlockContentControl bcc = (Syncfusion.DocIO.DLS.BlockContentControl)entity;

                bool isEdited = IsBlockContentControlEdited(bcc);

                if (!isEdited)

                    ChangeTextColor((bcc.TextBody.ChildEntities[0] as Syncfusion.DocIO.DLS.WParagraph).Items);

            }          

            var stream1 = new MemoryStream();

            document.Save(stream1, WFormatType.Docx);

           

            WordDocument document1 = WordDocument.Load(stream1, GetFormatType(type.ToLower()));

 

            document1.OptimizeSfdt = true;

            //Unhooks MetafileImageParsed event.

            WordDocument.MetafileImageParsed -= OnMetafileImageParsed;

 

            string json = Newtonsoft.Json.JsonConvert.SerializeObject(document1);

            document.Dispose();

            return json;

        }

 

        /// <summary>

        /// Checks if a BlockContentControl has been edited based on the specified rules.

        /// </summary>

        public static bool IsBlockContentControlEdited(Syncfusion.DocIO.DLS.IBlockContentControl bcc)

        {

            if (bcc.TextBody.ChildEntities.Count == 1 && bcc.TextBody.ChildEntities[0] is Syncfusion.DocIO.DLS.WParagraph paragraph)

            {

                // If the text is anything other than the default placeholder, it is edited.

                return paragraph.Text != "Click or tap here to enter text." && paragraph.Text != string.Empty;

            }

 

            return true;

        }

 

        /// <summary>

        /// Checks if an InlineContentControl has been edited based on the specified rules.

        /// </summary>

        public static bool IsInlineContentControlEdited(Syncfusion.DocIO.DLS.InlineContentControl icc)

        {

            string text = "";

 

            foreach (Syncfusion.DocIO.DLS.ParagraphItem item in icc.ParagraphItems)

            {

                if (item is Syncfusion.DocIO.DLS.WTextRange textRange)

                {

                    text += textRange.Text;

                }

                else

                    return true;

            }

 

            return text != "Click or tap here to enter text." && text != string.Empty;

        }

        /// <summary>

        /// If Content control not modified change the text color

        /// </summary>

        public static void ChangeTextColor(Syncfusion.DocIO.DLS.ParagraphItemCollection items)

        {

            foreach (Syncfusion.DocIO.DLS.ParagraphItem item in items)

            {

                if (item is Syncfusion.DocIO.DLS.WTextRange)

                {

                    (item as Syncfusion.DocIO.DLS.WTextRange).CharacterFormat.TextColor = Syncfusion.Drawing.Color.Gray;

                }

 

            }

        }

 

 

Document Editor Web service project: EJ2-Document-Editor-Web-Services/ASP.NET Core/src/Controllers/DocumentEditorController.cs at master · SyncfusionExamples/EJ2-Document-Editor-Web-Services · GitHub

https://help.syncfusion.com/document-processing/word/word-processor/javascript-es6/web-services-overview

User Guide: Working with Content Controls | DocIO | Syncfusion
Find item in Word document in .NET Word library | Syncfusion

Please let us know if you need any further assistance.

Regards,

Akshaya

Attachment: Input_eadf380b.docx

[Jason Roozee]

I appreciate the suggested workaround, however unfortunately it must be achievable purely on client side in JS.

I did

[Akshaya Arivoli]

Hi Jason,

Thank you for your update. Once the below feature is implemented, your requirement “a content control text box at least shows up with a lighter gray text so it stands out ” on client side .

     

You can track the status of feature from the below link: 

Provide support to display the font color of content control on grey in JavaScript | Feedback Portal  

We usually have an interval of at least three months between the releases. At the planning stage for every release cycle, we review all open features once again and finalize features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.      

Regards,

Akshaya