Toolbar for GoJS textarea

Is it possible to create text editor toolbar to GoJS text area. something like this as shown in the attachment.
When I click on text area it should appear(toolbar).

You can create a custom text editor. Read about TextEditingTool and HTMLInfo.

Here are acouple simple examples:

Several text editors are provided in the extensions directory:

None of these editors are like what you want, but they show you how to show arbitrarily complex HTML when editing text.

Thank you… is it possible to create structure like that?

Yes, anything is possible.

Can you give any suggestions in order to do that. We are able to attach that but how to connect that to text area I mean when we click on text it’s coming but binding is not two way. It’s not reflecting in the text area.

It is impossible to provide any meaningful suggestions unless you present a very specific scenario and implementation and a specific question regarding its behavior.

me not getting it.

Yes, I understand that you do not understand what to do.

Let us start over. You want to implement a text editor that has the appearance and implicit functionality shown in your screenshot. Do you have a list of the TextBlock properties that you want the user to be able to set?

I suggest that the first thing you do is implement that HTML editor without involving GoJS or the rest of your app. Make sure that editor that you create is entirely in a single HTML panel and can be used in a trivial HTML page consisting of a single <span> to be edited, just by adding the editor’s HTML, CSS, and JavaScript.

ok i got it.

If you have any samples of creating text editor for GoJS please provide us.

I have created the toolbar (button toolbar) for text area but facing problem while applying bold functionality. Bold, italic, font size and font style functionality will come to apply to text (ex: “bold 13px sans-serif”) only but not independently so can you suggest me in this regard.

As the documentation for TextBlock shows, at TextBlock | GoJS API, there is a standard order for CSS font strings that will work on most platforms.

So for example you could see if "bold " is in the string. If it is, remove it; if it is not, prepend it. You’ll probably want to avoid checking for the string towards the end of the font string, in case "bold " is part of the font family.

No, when I click Bold button on toolbar the inner text should become bold like that I am asking

I thought you were asking about how to toggle “bold”/normal weight, since that is not a direct property of TextBlock, but only part of the TextBlock.font property.

Are you asking about how to apply styles to pieces of a string? Sorry, but TextBlock only controls the style of the whole string. That’s why it’s called a Text Block.

Then how to apply styles to piece of a string from toolbar?

As I said, TextBlock only styles the whole text string. Note that that missing feature is completely independent of this forum topic, which is only about a custom text editor for a TextBlock.