I am trying to build a widget that has an area that will display sample of ~20 line HTML code. This sample code must be selectable so the user will be able to copy + paste it into their own text editor.
Currently I am using an xtype displayfield and using the fieldDescription to put my HTML code inside. I realized though that this fieldDescription does not allow me to format my code. I also tried using an xtype textarea and setting the emptyText as my HTML code, but clicking in the textarea would remove the HTML code.
The reason for this is that I have a textarea where the user will be populating a textarea with HTML code. This HTML code must be structured in a certain way so the CSS will format their code correctly. I want to include an example of how this HTML code should be structured.
EDIT - It will be great if I can apply the font-face Courier to this for ease of readability.
From above what i would understood that you want to have a field in your dialog which will prepopulate a predefined html structure and same can be used while authoring the content in same attribute fields. If that is correct then i dont think you need to create a new widget because same can be achieved by setting up the property "defaultValue" with your defined HTML format as value on field attribute (let say textarea).
So it will be like as below
defaultValue String <html>what ever html format you want to place that can be used while authoring</html>
If you are using any richtext widget instead of textarea the same will apply but as RTE default includes <p> tag you can control it using property "removeSingleParagraphContainer" or "singleParagraphContainerReplacement" for more details plz refer http://dev.day.com/docs/en/cq/current/widgets-api/index.html?class=CQ.form.RichText
Richtext will have more feature compare to textarea like applying css etc... for information on setting up richtext editor plz refer http://dev.day.com/docs/en/cq/current/administering/configuring_rich_text_editor.html
I hope above will help you to proceed. let me know for more information if you needed.