I am using an instance of CKEditor 4.5.7 that should not allow any <p /> tags.
The config looks like this:
config.enterMode = CKEDITOR.ENTER_BR;
config.forceEnterMode = true;
config.shiftEnterMode = CKEDITOR.ENTER_BR;
Now, when I insert an ordered <ol /> or unordered <ul /> list, I cannot add a second list item because pressing Enter only adds a <br /> inside the <li /> instead of adding a new <li />.
I would like the Enter to insert a new <li />, and Shift+Enter to add a <br /> inside the <li />.
Only when I change the enterMode to CKEDITOR.ENTER_P, I can add new <li /> items, but then the user can add <p /> tags everywhere.
Any help greatly appreciated!
In general, using CKEDITOR.ENTER_BR is not recommended and may cause some editor features not to work as expected. If you do it to control paragraph spacing, you should use stylesheets instead.
In your particular case, however, check whether you really need to set config.forceEnterMode to true as this seems to be causing your issue.
Take a look at the Enter Key Configuration sample - with both config.enterMode and config.shiftEnterMode set to CKEDITOR.ENTER_BR it works just as you want it, with Enter creating new list items and Shift+Enter creating a <br /> inside the list item.
Related
I can't figure out how to make card text editable and reflect that changes in the card state.
So, I have an input field where I type in text and click on add button which makes a call for add function,
addFunction = () => {
this.cardId ++;
this.setState({
t_c: [
...this.state.t_c,
{
cardId: this.cardId,
terms: this.state.terms
}
]
});
}
So terms are the text and its provided with cardId as id.
So to display the data inside state t_c I am mapping each object inside the state and displaying them,
{this.state.t_c.map(terms =>
<section>
<section>
<input defaultValue={terms.terms} />
</section>
<img ..../>
</section>
)}
The problem here if I try to change the added terms the changes are not displayed in the t_c state.
At first, you should approach your problem like it's a Form.
Form components are whether controlled or uncontrolled. For your scenario, if you want to save every change you have done to state, you should implement your input as controlled.
<section>
<input
value={terms.terms}
onChange={(e) => setTerms(/* your state controller code */)}
/>
</section>
Also to see the changes, you are missing key prop to populated sections. Change mapping function to this and you'll see the changes.
{this.state.t_c.map((terms, t_index)=>
<section key={"terms" + t_index}>
<section>
<input defaultValue={terms.terms} />
</section>
<img ..../>
</section>
)}
See more detail here.
I have an array of addresses which i have mapped to a list and then rendered on the screen. The issue I am finding is that when the app is deployed it only seems to work on some peoples machines and not others. A few of us have tested on chrome and i cant see the list while others can. While i can not visibly see the list I can still click a selected address so the array is there but it is just no visible.
Below is my code to render the list
$('#addressDropddown').show();
const listItems = this.addresses.map((list) =>{
return(
<li>
<p className="addressListButtons" onClick={()=>this.myFunction(myObj, list)}>{list}</p>
</li>
)
})
//Render the button listdocument.
ReactDOM.render(<ul>{listItems}</ul>, document.getElementById('addressDropddown'));
it is then rendered to the below div
<MDBRow>
<MDBCol size="3" />
<MDBCol lg="5" md="12" className="title-left">
<MDBAnimation className="ex3" id="addressDropddown" type="fadeIn">
<div className="ex3" />
</MDBAnimation>
</MDBCol>
<MDBCol size="3" />
</MDBRow>
i have attached two images of the results on 2 separate pcs. i see the list in one and not the other.
Results Not Visible
Results Visible
The issue was that when rendering styling within a component and not through the css it will only be allowed on some browsers and not others.
e.g.
document.getElementById("authorisationCheckboxText").style.color = "#ff0000";
I am trying to make it so that when the user clicks my label, it opens up a new tab with the specified URL. It currently is not working. Any ideas what I am doing wrong or need to do in my method?
rerouteToGoogle= () => {
return <Link to="google.com" />
}
<MediaQuery query="(min-width: 550px)">
<div style={styles.alignText}>
<Label color='green' basic onClick={this.rerouteToGoogle} >CSV</Label>
</div>
</MediaQuery>
in your case rerouteToGoogle renders a Link component. I believe what you're trying to achieve is opening the new tab link on click, not rendering it.
In this case just change your function to
rerouteToGoogle= () => window.open('www.google.com', "_blank")
The purpose of <Link> is to navigate from one route to another inside your React application, e.g. from /home to /about. If you want to open another site in a new tab, then you are not navigating inside the application and so you can't use <Link>.
In your case, a classic <a href="https://google.com" target="_blank"> will work.
So, to solve what you are trying to achieve, the easiest way is to add a <a> inside your <Label>:
<MediaQuery query="(min-width: 550px)">
<div style={styles.alignText}>
<Label color='green' basic>
CSV
</Label>
</div>
</MediaQuery>
I have my template something like this,
<ul id="items">
{{#each items as |item index|}}
<li>
<!-- <input type="checkbox" id={{concat "pf" index}} /> -->
{{input type="checkbox" id=(concat "pf" index)}}
</li>
{{/each}}
</ul>
And I have my js something like this,
import Ember from "ember";
export default Ember.Controller.extend({
appName: "Ember Twiddle",
items: [{}],
init: function() {
$(document).on("click.somename", function (e) {
alert($(e.target).parent().length); //should get parent as "li" and length as 1
});
}
});
What happening for my project is that, if I click on ember input helper I am not able to get the parentElement using jQuery. But when I changed that input helper to normal <input type="checkbox" />, I am able to get the parentElement. I don't know whether Safari/Ember is using any virtual DOM or something to render its own helpers. This issue is happening only in Safari. In Chrome, it is working fine.
Unfortunately, I am not able to make a fiddle/plunker as the issue is not able to replicate in them. Sorry about that. In my project, I am using ember#2.7.3.
Any suggestions/help on this issue?
While I'd recommend trying to find a way to avoid using the jQuery click event in the first place, it sounds like an issue with how the different browsers treat parent. I would prefer to use .closest('li').eq(0) to access the first parent that matches the element you are looking for.
I have just started ng and I must say it is too much fun! I am using example from this site
http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/ specifically the 'filter data with angular js'
I followed the example and works fine. The example shows the list and as you type the name it will filter it and show the exact match.
I didn't want to stop there and play with it more, what I want to do is not to show any list initially and as the user types the list is shown. Here is my index.html:
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
<input type='text' ng-init='searchText=" "' ng-model='searchText' />
<ul>
<li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
</ul>
</div>
as you can see I am doing ng-init on the searchText variable and this works fine when I initially open the page i.e. there is no list. But as I type a name the list stays there after filtering is done even when I clear the input box. How can I make the list disappear when I clear the input box?
Do I need some sort of custom filter?
please excuse my ignorance with ng if I am using incorrect terms and please tell me the correct ones :)
you can use ng-show/ng-hide to show/hide the list based on certain condition, as currently you want it on searchText
<ul ng-show="searchText !==''">
<li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
</ul>
Just an another idea to achive what you want:
<input type="text" ng-model="searchText" />
<ul>
<li ng-repeat="person in people | filter:(searchText || ' ')">#{{person.id}} {{person.name}}</li>
</ul>
or if you would like to filter by some default value when the input box is empty:
<li ng-repeat="person in people | filter:(searchText || 'John')">#{{person.id}} {{person.name}}</li>