# Rich Text Editor Interface in Perspective

**URL:** <https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015>\
**Category:** Ignition Early Access\
**Tags:** perspective\
**Created:** [May 25, 2022, 4:24pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015 "2022-05-25T16:24:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [May 25, 2022, 4:24pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015/1 "2022-05-25T16:24:54Z")

</div>

Hi

My client wants the Manager to have a Rich Text Editor to create his instructions for the operators.  
So I wonder how we can have some Rich Text Editor interface in perspective like the following link.  
I can use a simple text input component but it doesn’t support styling. The markdown component support styling but cant be editing.  
So I’m stuck here. Appreciate for any idea.

[Essential JS 2](https://ej2.syncfusion.com/demos/?_gl=1)_dq9su3_\_ga_MjAxODcxNjIwNi4xNjQ5MTM4NjA2_\_ga\_WC4JKKPHH0\*MTY1MzQ5NTI5OS4yLjEuMTY1MzQ5NTM1Mi4w&\_ga=2.104494342.727151857.1653495302-2018716206.1649138606#/material/rich-text-editor/tools.html

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [May 25, 2022, 4:51pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015/2 "2022-05-25T16:51:15Z")

</div>

> [@nader.chinichian](#):
>
> [Essential JS 2](https://ej2.syncfusion.com/demos/?_gl=1) _dq9su3_ \_ga _MjAxODcxNjIwNi4xNjQ5MTM4NjA2_ \_ga\_WC4JKKPHH0\*MTY1MzQ5NTI5OS4yLjEuMTY1MzQ5NTM1Mi4w&\_ga=2.104494342.727151857.1653495302-2018716206.1649138606#/material/rich-text-editor/tools.html

I believe this is the link you were trying to put:  
[Essential JS 2](https://ej2.syncfusion.com/demos/?_gl=12dq9su3_gaMjAxODcxNjIwNi4xNjQ5MTM4NjA2_ga_WC4JKKPHH0*MTY1MzQ5NTI5OS4yLjEuMTY1MzQ5NTM1Mi4w&_ga=2.104494342.727151857.1653495302-2018716206.1649138606#/material/rich-text-editor/tools.html)

I would think at this point it would need to be either a perspective module, or some trickery with webdev endpoints. I really want to implement the [Monaco Editor](https://github.com/microsoft/monaco-editor) as a component in a perspective module as well, feels pretty similar. However I have struggled narrowing down what's actually required perspective modules in general, vs what just happens to be in the SDK examples and isn't needed.

EDIT: You could technically do some of this with a text area, if you can have your client type in markdown format. Then allow the ability to upload images to specific directories, and add a tool for the client to select and add them into the text area. Definitely possible, albeit less than ideal.

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [May 25, 2022, 4:53pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015/3 "2022-05-25T16:53:00Z")

</div>

Check this out

[Ignition Exchange - Markdown Editor](https://www.inductiveautomation.com/exchange/88/overview)

I think this is exactly what you are looking for.

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [May 25, 2022, 4:53pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015/4 "2022-05-25T16:53:50Z")

</div>

> [@andrews](#):
>
> Check this out
> 
> [Ignition Exchange - Markdown Editor](https://www.inductiveautomation.com/exchange/88/overview)

Dang I didnt know this was here! I was literally about to go build this for an example. Lol

---

<div class="post-metadata">

**Author:** ![andrews](https://avatars.discourse-cdn.com/v4/letter/a/898d66/32.png) [@andrews](https://forum.inductiveautomation.com/u/andrews)\
**Post date:** [May 25, 2022, 4:59pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015/5 "2022-05-25T16:59:39Z")

</div>

Well… don’t let me stop you. lol But this might save ya some time.

Honestly I have not used it either. I just said in my head “Someone has to have done this already.” And a quick search on the Exchange turned up with great success. lol.

I’ll try to find time to play around with it later. Looks pretty neat.

---

<div class="post-metadata">

**Author:** ![nader.chinichian](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nader.chinichian/32/9261_2.png) [@nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian)\
**Post date:** [May 25, 2022, 5:01pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015/6 "2022-05-25T17:01:38Z")

</div>

I saw that but you know managers and operators, it is hard to do that way. of course, one big problem of this exchange resource is you cant select a text area and click the Bold icon to bold it!!! You need to click the bold icon and it inserts the format for you then you edit it which is not what we want.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [May 25, 2022, 5:04pm UTC](https://forum.inductiveautomation.com/t/rich-text-editor-interface-in-perspective/60015/7 "2022-05-25T17:04:05Z")

</div>

Someone could probably make a Perspective component out of e.g. [GitHub - sstur/react-rte: Pure React rich text WYSIWYG editor based on draft-js.](https://github.com/sstur/react-rte) relatively easily. Would probably require some external motivation (read: $$$) from interested parties.
