An HTML template that I'm working on has a variety of HTML select and checkbox elements contained within it.
Eg.
<select>
<option></option>
<option>No</option>
<option>Yes</option>
</select>
<input type="checkbox" />
I've found that these elements do not appear to be editable from within the WYSIWYG editor.
I would like a user to be able to toggle the checkboxes and select options from within these elements from within the WYSIWYG editor.
So the HTML could be turned into something like this:
<select>
<option></option>
<option selected>No</option>
<option>Yes</option>
</select>
<input type="checkbox" checked />
Has anyone been able to acheive this in TinyMCE 4?
Is there a plugin that may help that I haven't found? Are there techincal challenges to achieving this as a plugin?
Thanks for any help/advice!
Update:
I've discovered the inability to change these element within the editor is actually a reported bug with Firefox since 2008! In other browsers you are able to change the values of these elements - however as no changes are made to the HTML - their state is not saved.
Perhaps a plugin to record the state of these elements into the HTML source just prior to saving, would fulfil my requirement?
Related
I Have used below line of code for multi selection. I am trying to multiselect on one entity but as soon as the scope is passed on to the next entity, the elements that I have selected in first entity gets unselected-
enter image description here
This is working fine on previous versions of chrome but not in 95.0
This is breaking because you're setting ng-model to the same property that ng-options is using. So the moment you select something, abcDTO.SelectionTypes gets reset to whatever you selected. ng-options and ng-model should never be set to the same property. Has nothing to do with the Chrome version.
Here's an example of it working once you change ng-model to something else.
<select
multiple="multiple" ng-multiple="true" rows="10" size="4"
ng-model="abcDTO.Selection"
ng-options="x.SelectionID as x.SelectionDesc for x in abcDTO.SelectionTypes">
</select>
When using select and option the ngblur isn't triggered once I click off the list without selecting anything.
I need to know when the options of the select and shown or hidden. Is there a directive that supports this ?
I can use ngblur and ngfocus on the Select element but nothing is ever fired on the options being shown or hidden. Any ideas?
I've run some tests on fiddle.
https://jsfiddle.net/EternalLight/x7dxkok2/
<div ng-app="testTt">
<div ng-controller="Controller" style="padding:2em;">
<select ng-focus="onFocus()" ng-blur="onBlur()">
<option>Test 1</option>
<option>Test 2</option>
</select>
<p>{{status}}</p>
</div>
</div>
It seems that the blur event is fired when you click outside of the element when the option list is hidden. When you open the option list, and then click outside, the <select> is still in focus - you can see it by the blue (or any other, depending on your browser) outline around it. Honestly, I would use ng-blur, since it takes another outside click to trigger it, and there's no way for a user to get around it.
My issue is that the options in my dropdown menus are not changing to the correct language.
For example if I go from English to Chinese everything else will update just fine, but the items in the drop down won't until after I select one of the options in the list, then it will change to the appropriate language. However, all of the other dropdown menus will remain untranslated until they are interacted with like the first one. Is there some way for me to force them to update after I change what language it's being displayed in?
Here's an example of one of the dropdown menus
<label class="col-md-3 col-xs-6">
<span translate="chart"></span>
<select class="form-control" ng-model="report.chart" ng-options="c | translate for c in charts" ng-change="setChartType(report)">
</select>
</label>
What I'm trying to do is make a number of dynamic radio/checkbox fields based on data that is passed to me. Unfortunately I don't have control over the format of this data but it should be ok to get the job done.
This is as far as I have got: http://plnkr.co/edit/LKwueHUzSrC5JpeBY9So
The format of the data I need to end up with in the end is a simple array like this:
"school_type": [
"Government/State",
"International",
"Co-educational"
]
This data could come from a radio box, or a checkbox if it's selected. Checkboxes are displayed if there is only one option, radios if more than one.
So I can get the fields displaying, but the issues I have are:
The name properties on the radio buttons don't seem to work for
each set.
I can't work out how to get the value of the checkbox/radio selected... back to the controller and into the array I need. I thought the easiest way would be to use the ng-change property available and pass a function to this but I keep getting errors every way I try.
Any help would be appreciated.
There's a couple of problems with your code:
You're not using interpolation where it is needed;
You're not binding the controls to the scope;
Here's your updated code:
<label ng-switch-when="r" class="radio">
<div ng-repeat="option in options">
<input type="radio" name="{{fieldname}}" ng-model="$parent.$parent.selectedid" value="{{option}}">
<span>{{ option }}</span>
</div>
</label>
<label ng-switch-when="c" class="checkbox">
<input type="checkbox" name="{{fieldname}}" ng-false-value="" ng-true-value="{{options[0]}}" ng-model="$parent.selectedid">
<span>{{ options[0] }}</span>
</label>
Note that in order to bind the controls correctly I had to use $parent.$parent for the radio buttons and $parent for the checkbox. That was needed because both ng-switch and ng-repeatcreate new child scopes. So I had to go up one level for the checkbox and two ones for the radio buttons. That could be avoided if you used an object instead of primitives for the bindings. I suggest that you try to refactor your code so it does that. This article has more information on that matter.
And finally, here's a working version of your Plunker.
I noticed that on certain websites, if you want to tick a checkbox on or off, you just need to click the corresponding text. When I put a checkbox with some descriptive text on my page, I have to actually hit the checkbox for it to get ticked. How is the former effect achieved?
Consider using a <label> as in this example:
<input type="checkbox" name="call" id="willcall">
<label for="willcall">click on this text to select the checkbox</label>
This example from: http://www.askdavetaylor.com/make_text_adjacent_to_checkbox_clickable.html
I'm sure that they use a JS script to achieve this. It's most likely a label that is being clicked, and they might add an onclick() event to the label which uses the javascript to find the checkbox and add the CHECKED attribute to it. Sorry for not supplying code, but I hope that gives you some understanding on what those websites do.