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.
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/>
);
}
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.
I want to be able to remove classes from an element within the WYSIWYG editor provided by TinyMCE. I've spent some time looking around for something and haven't had any success. I've already written 4 or 5 plugins to handle different needs, but this seems to be such a basic utility, it must exist and would prefer not to have to write another plugin.
A sample use would be a paragraph that has been assigned a class using the dropdown class selector. I can continue to add classes to the paragraph element, but I can't replace them or remove them. I would like to be able to select an element in the editor and click a button to remove all assigned classes - and I want to be able to confine the function to that element node, not the entire contents (as the Remove Formatting plugin does).
<h4>Here is my headline</h4>
I use the Styles dropdown to add the class .all-caps
<h4 class="all-caps">Here is my headline</h4>
I decide I want that to use the .inverse class instead, so I select from the dropdown and end up with this:
<h4 class="all-caps inverse">Here is my headline</h4>
What I want is this:
<h4 class="inverse">Here is my headline</h4>
A plugin that will either allow me to reassign or remove classes from elements is what I need. Does anyone know of one out there?
What's the correct XPath syntax to check if an option element is currently selected, or just to get the selected option element from a select element, on an open page with which the user, and JavaScript, may have interacted? Is this even possible with XPath, or does it lack the ability to look at DOM properties?
I can't find any documentation on this, and have (speculatively) tried:
//option[#selected=true]
//option[#selected="selected"]
//option[#selected]
but none of these work; they simply don't match any elements.
(In case it matters, I've tried this both using the $x function in the Chrome developer console, and using the find_elements_by_xpath method in Selenium for Python.)
Short answer: it's not possible.
Longer answer: XPath can look at HTML attributes, but it can't look at DOM properties. Selecting an <option> element in a <select> changes the selected property of the <option> to true, and also changes the value property of its parent <select> element, but it doesn't affect the attributes of either, so it is invisible to XPath.
To find <option> elements that have the selected attribute set, which is often how a page author might determine which option is initially selected, you can use //option[#selected]. But this does not find the currently selected <option>; changes that the user makes to the selection are invisible to XPath. There's no guarantee it will even find the initially selected option, since it's possible that the page author didn't put the selected attribute on any elements and either let the browser select the first option by default or had some JavaScript select the initial option via the selected property.
The multiple other answers here claiming that a selector like //option[#selected] can detect selection changes made by the user after the page loads are simply completely wrong.
Of course, if you're able to use CSS selectors instead of XPath selectors, then option:checked will do the job.
The problem could be the " (double quotes).
//select/option[#selected='selected'] - Will match the selected option, i am using this successfully.
//select/option[#selected='selected' and #value='specific value'] - Will only match the selected option if it has a 'specific value', i'm also using this.
If you are still having trouble, it could be an entirely different problem, perhaps there is no option node. I hope this helps.
I think we can use a knowledge from #Mark's answer and account that. Let's just find a node which HAS desired attribute:
tree.xpath('//select/option[#selected]/text()')[0].strip()
I tried "//option[#selected=''] and it has worked for me.
it is able to highlight the selected option within Page objects model.
I would try //option[#selected='true']
i.e. driver.findElements(By.xpath("//option[#selected='true']")).getText();