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
Related
We would like to alter the appearance of the "Insert/Edit Table" dialog in TinyMCE. Presently the dialog displays fields which manage attributes that are deprecated in HTML5. For instance, the border attribute is considered obsolete.
Now, I can successfully remove the border attribute from the rendered markup, by extending a technique presented here:
http://krompaco.nu/2010/05/alter-default-initoptions-for-tinymce-in-episerver-6/
But the "Insert/Edit Table" dialog still presents a "Border" field when we launch the table dialog from the TinyMCE menu button. The toolbar option for TinyMCE enables programmers to control the actual buttons that get displayed by the editor.
https://www.tinymce.com/docs/configure/editor-appearance/#toolbarn
We still want to display the Table button, but want to remove some of the deprecated fields from that dialog. How can we do this?
We are using the EpiServer CMS (versions 8-10) which employs TinyMCE version 3.3.9.3. Thanks for your help.
You could probably use virtualPathMappings. I think they're still supported in CMS8-10.
This means you have to create a copy of the aspx or ascx file with the dialog in it. Have the file Inherit="" from EPiServer code and change the markup how you want and then add the below configuration in section of web.config:
<virtualPathMappings>
<add url="~/yourprefix/CMS/Edit/LinkDialogName.ascx" mappedUrl="~/YourProjectFolder/LinkDialogName.ascx" />
</virtualPathMappings>
This is a bit of a hack however.
I am creating a form, and in that I need to input some text and I want to use Rich Text editor in it.
When that page is published, then the user must be able to enter the text using that rich text format, i.e. Bold, italics, bullet number list etc .
How can i use the AEM rich text editor in it. I know I can include any other free editor available in the market.
I like to know that how can I use the rich text editor which is used in dialog by AEM?
You need to use a existing richtext editor in front end side like a field in the form. For example: wysihtml5
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
Under the Google charts visualization, there is an "allowHTML" option that allows for placing HTML tags inside annotation descriptions. Is there something similar in Dygraphs where the annotation allows an HREF tag that allows the user to link to another web page?
For example, a stock chart shows a split on a specific date. The annotation, on click, would bring up the press release announcing the split. The description field would be in HTML and include the appropriate HREF anchor to the press release.
It is my understanding that dygraphs doesn't support HTML annotations. However, I think it should be pretty easy to provide this type of functionality by using an additional tooltip library.
Dygraphs relies on the title attribute for the annotations. That is, when you hover over the annotation, the tooltip content is populated from the title attribute on the div. As an aside, you could presumably change which attribute it uses quite easily by editing the dygraph annotation source code. If you use a more comprehensive tooltip library (there are loads of jQuery tooltip libraries out there supporting HTML content), it will supercede the basic browser tooltip that dygraphs uses.
For a basic tooltip library that does the job, you could consider:
http://api.jqueryui.com/tooltip/#option-content
or
http://qtip2.com/plugins#ajax
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