CQ5 - Widget for displaying sample HTML - aem

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 user story 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.

Try using value property of textarea.
Set ignoreData to true to avoid the value being populated from content.
To make sure it doesn't get saved back as a property - leave name empty, or just set a value that doesn't start with ./
To achieve different font face - play with CSS on a page. If you want to add specific CSS class to your widget, use overCls property.
Find more on the documentation

Related

How do correctly use the "value" parameter for modal popups?

On www.purelocal.com.au
There are icons and text with the value="X" parameter to open it's respective JS popup.
However , according to HTML validation I cannot apply the value="X" parameter to images or plain text (only using certain tags like INPUT,OPTION etc.
Does anyone know about this? Wrapping the text and images around these tags in order to pass HTML validation seems like a weird thing to do.

How do I replicate the tinymce link plugin's HTML markup behavior by adding succeeding text outside of the current node instead of inside?

When the user adds a link on selected text, it adds the URL markup only on the selected section and doesn't add the markup to any added text (after the markup is added) if the linked text is at the end of the string. This behavior differs from bold/italics/underline which adds added text to the bold/underline markup if the user adds more text at the end of a string.
I am implementing a custom button that should emulate the behavior of the link plugin. I have gone through the link/plugin.js file to no avail for which code block I need to re-use to get this behavior for my custom button.
How do I implement the link plugin's markup behavior? Are there any tinyMCE commands I should be using (setAttribs, etc)?
Video example of bold vs link plugin

How can I add static text to my MSCRM form?

I need to add static text on my form (can't use the xrm notification option) under specific terms I need to show and hide that text but I can't hold it in a field.
First I thought to use an Image with my text on the form, is there a better way to do that?
Like said in comments, HTML web resource is the way to go. You can embed the HTML in a form section/tab and hide them using conditional scripting in form load.
Reference

Some links displayed as text in TYPO3

I have added links to a list of sentences in my TYPO3 backend.
In the frontend, some of these sentences are rendered properly, with a link to them. However, some others are rendered as plain text, with the tag visible.
View of the text in the backend
View of the rendered text in the frontend
What caused the problem, and how can I correct it?
your description of the error is not good enough to give a good answer. please explain more in detail what you are doing: templates, configuration, ...
for the moment I guess: you use fluid-templates and have fluid-variables which contain the rendered content.
instead of outputting the content of a field directly (like {fieldname}), where the rendering is done by fluid you need to output the already rendered output without interfering of fluid (rtefieldname->f:format.raw()}) as for RTE-fields the content is already rendered in html. otherwise all specialchars are converted to show as given.
It might be that the <a> tags aren't closed properly.
Try checking the HTML code from the backend (by clicking the <> button in the backend). See if the </a> tag is where it should be, at the end of each sentences.
You need to find the difference between the lines that work and the lines that don't.

Non Editable element in TinyMCE (related to Mathjax)

I'm building an extended editor around TinyMCE and I have to implement a Math formula module. I've choosen Mathjax for formula rendering, using plain html/css. So far, I've managed to create a plugin that popup a panel with a textarea, you can enter your latex in, there's a preview in the panel.
Once you validate the formula, it's injected into tinymce content. This new content is A LOT of spans with inlined styles, and OF COURSE, I don't want tinymce to be able to edit that directly. (sidenote: we only store latex, not the rendered html output from mathjax)
Basically, I want that a piece of html inside Tinymce to be ignored totally, but displayed in place. I want my carret to be able to move before that piece of html, and after, but not inside.
The "non editable content" plugin seems to be close of what I'm looking for, but it has some limitation (you can't ADD no editable content on the fly, having nested html content inside an element flagged as "non editable" broke some things, etc.)
Is someone could help with that ? I started to tweak the non editable plugin, but it's really really hard to understand existing code. Has someone already did something like that, or is there another third party plugin ?
thanks