By default TinyMCE (4) has a "Paragraph ▼" dropdown, and if you click on it you get a list of formatting options ("Paragraph", "Heading 1", etc.).
I'd like to be able to do two things. First, I want to change the options and their names (eg. to "Normal" and "Heading"), and I found the block_formats option which does exactly that:
block_formats: 'Normal=p;Heading=h1'
However, I'm stuck on thing #2: adding classes to the generated elements. Instead of plain <h1> elements, when someone picks "Heading" I want to generate a <h1 class="heading">.
I thought maybe this would work:
block_formats: 'Normal=p;Heading=h1.heading'
... but it doesn't, and I haven't been able to find any other option that would let me do this. Then again, the TinyMCE documentation isn't always the easiest place to find answers, which is why I came here.
Does anyone know how I configure TinyMCE to have a "Paragraph ▼" dropdown with customized names AND custom classes on the generated elements?
I never did find a way to do this, so what I wound up doing instead was remove the block format drop-down entirely and replace it with the (custom) format dropdown. In other words I:
removed the formatselect from the toolbar1 config (removing the un-configurable normal formatting dropdown)
added the custom format dropdown (styleselect) to the toolbar1 config
defined a style_formats config entry with my custom styles
The style_formats config looked like this:
style_formats: [
{
title: 'Header',
inline: 'span',
classes: 'someClass',
styles: {someStyle: '5px'}
},
], // next style would go here
There were only two downsides of this approach. First, the dropdown now says "Formats", and I don't seem to be able to configure that anywhere. However I do have a single formatting dropdown, with only the options I want, and those options add the desired classes to the formatted text, so the dropdown's name isn't a big deal.
The second issue was that TinyMCE uses an <iframe>, which prevents it from using our stylesheet. I could have written a stylesheet for TinyMCE and then appended it to the <iframe> (or used some TinyMCE mechanism, if there is one) ... but I'm lazy so I just used style: entries for each custom format to define the style.
Related
I am using TextMeshPro Dropdowns in Unity as the basis for my menu system. The problem is Unity TMP Dropdowns require one option to be selected at all times, and clicking the already selected option won't trigger the "On Value Changed" function for processing the option.
Thus the only solution I am aware of is to have the first option be a dummy option like "CHOOSE:" or "SELECT ONE:" which is then the initially selected option. This is not too bad but it would be better if it was possible to at least make it a different font (for example, bold) so it looks intentional.
From what I can see however, there is no way to script or code anything to change the font size/color/face of only one option in a dropdown.
Is this possible or would there be another suggested solution to the problem?
Thanks.
You can use the RichText tags for setting string literals, something like
List < string > m_DropOptions = new List < string > { "<size=19><i>Select something</i></size>", "Option 1", "Option 2" };
Now Select something will be italic and with a different font size. You can always explore RichText link to find information that suite the needs of the application.
Output:
I have an ant design table. One of its columns is something like this:
which contains three icons and one "AutoComplete" component showing some names. In editing mode, I have put all these four components ( 3 icons and one autocomplete) in a "Form.Item" tag. But the autocomplete component does not work properly in editing mode.( I mean when it is clicked for edit, the name inside it is cleared and the new selected name will not put in autocomplete input). But when I remove the three icons from the code, the autocomplete works fine.
Why this happens? can any body help on this?
As far as I know Form.Item need to have one child element because he implicitly pass to child value and onChange props. You probalby can create wrapper for your Autocomplete component, something like following (it's just idea):
function Autocomplete (props) {
return (
<div>
<Icon1/>
<Icon2/>
<Icon3/>
<AntdAutocomplete value={props.value} onChange={props.onChange}/>
<div/>
);
}
I use TinyMCE 4.1.10 and have a problem with tags inside <a>-tags:
I need to insert code in the following markup inside the code viewer:
<a><h3>something</h3></a>
Generally I want every tag to be possible inside the <a>-tag (besides another <a>-tag).
But TinyMCE does a ridiculous cleanup:
<p><a></a></p>
<h3><a>something</a></h3>
<p></p>
I've already made following modifications in the setup:
extended_valid_elements : "a[*]",//allow empty <a>-tag
valid_children : "+a[div|h1|h2|h3|h4|h5|h6|p|#text]",//allow some children in the <a>-tag
verify_html: false,
It doesn't make any sense at all what TinyMCE is doing here.
The TinyMCE-website is telling me it uses html5-specification by default:
The schema option enables you to switch between the HTML4 and HTML5
schema. This controls the valid elements and attributes that can be
placed in the HTML. This value can either be the default html5, html4
or html5-strict.
And in the HTML5-Specifiations you can read:
The a element may be wrapped around entire paragraphs, lists, tables,
and so forth, even entire sections, so long as there is no interactive
content within (e.g. buttons or other links).
And now I don't get anything despite HTML5 valid markup AND extra valid-children setting in TinyMCE.
I was trying to understand how can we make drop-down values in dialog box easily authorable?
Select lists in dialogs can load their options dynamically from anywhere, so long as they are provided as an array of values in JSON format (from the docs):
[
{
value: "pink",
text: "Pink",
qtip: "Real Pink"
}
]
So one solution would be to:
Create a new template that would allow an editor to add/remove values from a list — make this editable for content authors as per any other content (e.g. using the page properties, or components that you can drag onto that template).
Create a Servlet that will parse those values & output them in the expected JSON.
Register that servlet, e.g. via a path (/bin/selectvalues).
Using the cqinclude xtype to load in your values:
i.e.
<select
type="select"
xtype="selection"
options="/bin/selectvalues"/>
If you are looking for a drop-in solution for this, take a look at http://adobe-consulting-services.github.io/acs-aem-commons/features/generic-lists.html. This supports easily authorable lists of name/value pairs which can be used (without writing additional code) in:
Classic UI Dialogs
Touch UI Dialogs
Touch UI Asset Metadata Editor
As i use styleselect combobox, i am able to apply many classes to one object simply by chosing each style from styleselect combobox, and I can turn off class only by chosing same class again. so all styles work like "checkboxes", and i wish to make from them "radiobuttons", i want mine tinymce to apply max 1 class to object, if parent has class, then split parent and aply class, for example
Some text here (i select "text" and set my_class2) and i wish to get result:
Some text here
and 2nd case, if i select all "Some text here" and aply my_class2 i wish to get result:
Some text here
(now result will be: Some text here
I hope it's clear now ;)
Best regards!
You might, if you don't mind meddling in their code. using the formatselect option, check out theme_advanced_blockformats in editor_template_src.js and add your tags with 'class=moshe' in them.. there could be only one tag (it replaces them), so you got your radio buttons :)
There is no standard way to insert checkboxes inside the tinymce UI. You should be able to make it work using checkboxes outside the editor and link to the function the style plugin uses.