i'm use codemirror on summernote.
i want default view is codeview.
So I searched on stackoverflow and google and found some ways.
first,
$(".summernote").summernote({
callbacks:{
onInit: function(){
$("div.note-editor button[data-event='codeview']").click();
}
},height: 300,
width: '100%',
minHeight: null,
maxHeight: null,
focus: true,
placeholder: 'please, write text here!',
lang: 'ko-KR',
codemirror: { // codemirror options
theme: 'blackboard',
lineNumbers: true
}
)};
However, this way does not work..
my summernote - codeview button has no [data-event='codeview'] tag.
button has class="note-btn btn btn-default btn-sm btn-codeview".
second,
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
}).summernote({
height: 300,
width: '100%',
minHeight: null,
maxHeight: null,
focus: true,
placeholder: 'please, write text here!',
lang: 'ko-KR',
codemirror: { // codemirror options
theme: 'blackboard',
lineNumbers: true
}
});
also does not work.
no no no,, the action is not the desired action.
When you do this, two spaces are created. Up and down.
As a result, I am using '$(".Summernote").Summernote("code",html code);' And I want the default view to be codeview.
$('.summernote').summernote({
callbacks: {
onInit: function() {
$('.summernote').summernote('codeview.activate');
}
}
});
worked for me
Related
I'm trying to add <style>// custom css here</style> into the tiny mce editor but currently it deletes the style tags and anything in between them on save.
I am trying to set valid_elements: "style" and/or custom_elements: "sabioStyle", and/or extended_valid_elements: "style". I've also tried: "[]" according to tiny's docs but it seems to have no effect on anything. I see that the init function:
piranha.editor.addInline = function (id, toolbarId) {
tinymce.init({
selector: "#" + id,
browser_spellcheck: true,
fixed_toolbar_container: "#" + toolbarId,
menubar: false,
branding: false,
statusbar: false,
inline: true,
convert_urls: false,
plugins: [
piranha.editorconfig.plugins
],
width: "100%",
autoresize_min_height: 0,
toolbar: piranha.editorconfig.toolbar,
extended_valid_elements: piranha.editorconfig.extended_valid_elements,
block_formats: piranha.editorconfig.block_formats,
style_formats: piranha.editorconfig.style_formats,
file_picker_callback: function(callback, value, meta) {
// Provide file and text for the link dialog
if (meta.filetype == 'file') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { text: data.filename });
}, null);
}
// Provide image and alt text for the image dialog
if (meta.filetype == 'image') {
piranha.mediapicker.openCurrentFolder(function (data) {
callback(data.publicUrl, { alt: "" });
}, "image");
}
}
});
$("#" + id).parent().append("<a class='tiny-brand' href='https://www.tiny.cloud' target='tiny'>Powered by Tiny</a>");
};
Piranha uses sets extended_valid_elements: piranha.editorconfig.extended_valid_elements but my dev tools are not showing the value that I type in editorconfig.json...
editorconfig.json
devTools
I've tried everything their docs say, I have a question open on github with Piranha as well.. Any suggestions would be great! Thanks
See the complete answer here: https://github.com/PiranhaCMS/piranha.core/issues/1663
code which i have tried for sticky header and sticky column , issue is that both are not working together tried so many option but some time sticky header is not working with horizontal scroll and some last column action item is not visible if define right side sticky column
<MaterialTable
columns={columns
.filter(l => selectedColumns.includes(l.field as keyof T))
.map(val => ({
...val,
headerStyle: {
whiteSpace: 'nowrap',
// minWidth: '400px',
},
cellStyle: {
whiteSpace: 'nowrap',
// minWidth: '400px',
},
}))}
localization={localization}
icons={icons}
options={{
...options,
// paging: false,
maxBodyHeight: '550px',
headerStyle: { position: 'sticky',top: 0},
overflowY?: "scroll",
// actionsCellStyle?: { paddingRight: '23px'},
selection: showMultiSelector,
//actionsColumnIndex: 0,
fixedColumns: fixLeftMostColumn
? {
right: -1,
}
: {},
}}
/>
found some solution but looking same above example with material ui and react.
https://codesandbox.io/s/bn7c7?file=/demo.js
Material table with sticky header and sticky columns with action item
I'm updating my app from Material-UI v1 to v2. I'm trying to use a style override to set the color of a selected <BottomNavigationAction> element.
const styles = {
bottomNavStyle: {
position: 'fixed',
left: '0px',
bottom: '0px',
height: '50px',
width: '100%',
zIndex: '100'
},
'&$selected': {
color: "#00bcd4" //<==trying to add this color to selected items
},
};
class bottom_nav extends Component {
state = {
selectedIndex: -1,
};
handleChange = (event, value) => {
this.setState({value});
};
render() {
const { classes } = this.props;
return (
<Paper className={classes.bottomNavStyle}>
<BottomNavigation
value={this.props.selectedBottomNavIndex}
onChange={this.handleChange}
showLabels
>
<BottomNavigationAction
label="Appointments"
icon={theApptsIcon}
/>
<BottomNavigationAction
label="Contacts"
icon={theEmailIcon}
/>
<BottomNavigationAction
label="Video Call"
icon={theVideoCall}
/>
</BottomNavigation>
</Paper>
);
}
}
export default withStyles(styles)(bottom_nav);
But, this does not do anything to the color of selected items.
I've read the Material-UI docs on CSS in JS and JSS, but haven't quite gotten it yet. What is the correct syntax for this?
UPDATE
Based on a response to this thread I've tried this:
const styles = {
bottomNavStyle: {
position: 'fixed',
left: '0px',
bottom: '0px',
height: '50px',
width: '100%',
zIndex: '100'
},
actionItemStyle: {
'&$selected': {
color: "#00bcd4 !important"
},
},
}
[.....]
return (
<Paper className={classes.bottomNavStyle}>
<BottomNavigation
value={this.props.selectedBottomNavIndex}
onChange={this.handleChange}
showLabels
>
<BottomNavigationAction
label="Appointments"
icon={theApptsIcon}
className={classes.actionItemStyle}
/>
<BottomNavigationAction
label="Contacts"
icon={theEmailIcon}
className={classes.actionItemStyle}
/>
<BottomNavigationAction
label="Video Call"
icon={theVideoCall}
className={classes.actionItemStyle}
/>
</BottomNavigation>
</Paper>
);
}
...but have not yet gotten the new color to appear on the web page.
Your updated solution looks good, there are just a few small changes...
You need to include an empty .selected class in your styles rules.
const styles = {
// Root styles for `BottomNavigationAction` component
actionItemStyles: {
"&$selected": {
color: "red"
}
},
// This is required for the '&$selected' selector to work
selected: {}
};
You need to pass classes={{selected: classes.selected}} to BottomNavigationAction. This is required for the '&$selected' selector to work.
<BottomNavigation
value={value}
onChange={this.handleChange}
className={classes.root}
>
<BottomNavigationAction
classes={{
root: classes.actionItemStyles,
selected: classes.selected
}}
label="Recents"
value="recents"
icon={<RestoreIcon />}
/>
</BottomNavigation>
Live Example:
There are couple of things I would like to suggest.
1) Write the name of the component with first letter capitalized since it is not treated the same way if it is named with small first letter and with capitalized.
2) If there is no other way for your cs rule to be applied, if it is overridden always because of some css specificity, use !iportant at the end of the rule.
3) Try this type of nesting of css in jss:
const styles = {
bottomNavStyle: {
position: 'fixed',
left: '0px',
bottom: '0px',
height: '50px',
width: '100%',
zIndex: '100',
'&:selected': {
color: "#00bcd4"
},
},
};
An earlier question mentioned a method using the el config in order to make the browser remember passwords. Howewer, the el config no longer exists in ExtJS 4.1.
Now, what should I do?
I believe it should be contentEl instead of el but I do this another way. You can build the entire thing with ExtJS directly. The only twist is that Ext fields will be created with the autocomplete=off attribute by default, so I use a derived class to override that.
Ext.define('ACField', {
extend: 'Ext.form.field.Text',
initComponent: function() {
Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
if (Ext.isString(oneTpl)) {
allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
}
});
this.callParent(arguments);
}
});
Ext.onReady(function() {
new Ext.panel.Panel({
renderTo: Ext.getBody(),
width: 300,
height: 100,
autoEl: {
tag: 'form',
action: 'login.php',
method: 'post'
},
items: [
new ACField({
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username'
}),
new ACField({
xtype: 'textfield',
name: 'password',
fieldLabel: 'Password',
inputType: 'password'
}),
],
buttons: [{
xtype: 'button',
text: 'Log in',
type: 'submit',
preventDefault: false
}]
});
});
The answer from lagnat was mostly correct, to get this also working on Chrome and Firefox the following is required:
1) Override default ExtJS Textfield behavior for autocomplete (copied from lagnat):
Ext.define('ACField', {
extend: 'Ext.form.field.Text',
initComponent: function() {
Ext.each(this.fieldSubTpl, function(oneTpl, idx, allItems) {
if (Ext.isString(oneTpl)) {
allItems[idx] = oneTpl.replace('autocomplete="off"', 'autocomplete="on"');
}
});
this.callParent(arguments);
}
});
2) Make sure the textfields are within a <form> tag: (see answer from lagnat), since ExtJS 4 the <form> tag is no longer present in a FormPanel.
autoEl: {
tag: 'form',
action: '/j_spring_security_check',
method: 'post'
},
3) Make sure there is a <form> present in the HTML, with the same <input> names:
items:[
Ext.create('ACField',{
fieldLabel: 'Username',
name:'j_username',
inputId: 'username',
allowBlank:false,
selectOnFocus:true
}),
Ext.create('ACField',{
fieldLabel:'Password',
name:'j_password',
inputId: 'password',
xtype:'textfield',
allowBlank:false,
inputType:'password'
})
],
and within the HTML the regular form with same input names:
<body>
<div id="login-panel">
<form id="loginForm" action="<c:url value="/j_spring_security_check"/>" method="post">
<input class="x-hidden" type="text" id="username" name="j_username"/>
<input class="x-hidden" type="password" id="password" name="j_password"/>
</form>
</div>
<noscript>Please enable JavaScript</noscript>
</body>
With all these changes in place, saving username/password works in IE, Chrome and Firefox.
There is the autoRender property which will allow you to apply the Extjs field to an already existing element on the page. So if you set up your basic form in html, the browser should recognize the fields for the form as login info, and then Extjs will overlay itself onto that form if you use the autoRender with a reference to the correct fields (and also the button on the form to a submit type button in your basic html form) it should work correctly.
Also, keep in mind that the browser probably will not recognize an ajax call for logging in and you may need to use the basic form submission. I have a working example in my application, but I would have a hard time trying to pull out application specific code so have an example for here. Please comment if you need the example and I may be able to get back to you by monday.
Answer by #Lagnat does not work for ExtJS 4.2.1 and 4.2.2. It might be due to removal of type config from button. What we need is standard submit button <input type="submit"> for the button. So I added it on the button with opacity: 0. Below is my working code (Tested working on Firefox 27, Chrome 33, Safari 5.1.7, IE 11. Autofill/Autosave password should be enabled for browser):
Ext.create('Ext.FormPanel', {
width: 400,
height: 500,
padding: '45 0 0 25',
autoEl: {
tag: 'form',
action: 'login.php',
method: 'post'
},
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'username',
listeners: {
afterrender: function() {
this.inputEl.set({
'autocomplete': 'on'
});
}
}
}, {
xtype: 'textfield',
fieldLabel: 'Password',
inputType: 'password',
name: 'username',
listeners: {
afterrender: function() {
this.inputEl.set({
'autocomplete': 'on'
});
}
}
}, {
xtype: 'button',
text: 'LOG IN',
width: 100,
height: 35,
preventDefault: false,
clickEvent: 'click',
listeners: {
afterrender: function() {
this.el.createChild({
tag: 'input',
type: 'submit',
value: 'LOG IN',
style: 'width: 100px; height: 35px; position: relative; top: -31px; left: -4px; opacity: 0;'
});
}
}
}]
});
I recommend using the built in Cookie functionality of ExtJS.
You can read a cookie using: readCookie('password);
You can create a cookie using: createCookie('password', "pass123", 30); // save for 30 days
Then you can use basic business logic to auto-populate your formField with the stored password.
Does that make sense?
I am trying to add dinamically a panel item to a main panel with a card layout which has initially one panel in it.
After one event (a tap) i build dinamically a new panel and I add it to the main panel, after this i try to set the new panel item like the active one via setActiveItem
Things work ok on Android but not on iphone.
Exactly i have this app.js:
Ext.Loader.setConfig({enabled: true});
Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'rpc',
appFolder: 'app',
controllers: ['Home'],
autoCreateViewport: false,
launch: function () {
Ext.create('Ext.Panel',{
fullscreen: true,
layout: {
type : 'card',
animation:{
type:'slide'
,duration :3000
}
},
defaults: { /*definisce le caratteristiche di default degli elementi contenuti..??*/
flex: 1
},
items:[{
title: 'Compose',
xtype: 'griglia'
}]
});
}
});
}
});
In a controller i have
.....
.....
var grigliaPan=button.up('griglia');
var mainPan=grigliaPan.up('panel');
var html=
'<img src="img/'+segnoScelto+'_big.png" />'
+'<h1>'+segnoScelto+'</h1>'
+'<p>'+previsione+'</p>'
+'</br></br>';
if (typeof mainPan.getComponent(1) == 'undefined'){
var previsioPan = Ext.widget('previsio');
previsioPan.setHtml(html);
//here i create a button for going home panel
var backButton=new Ext.Button({
ui : 'decline',
alias: 'widget.backbutton',
text: 'Home Page',
width : 150,
height:100
})
previsioPan.add(backButton);
var it=mainPan.getItems();
alert (it['keys']); //this prints : ext-griglia-1
mainPan.add(previsioPan);
var it=mainPan.getItems();
alert (it['keys']); //this prints : ext-griglia-1,ext-previsio-1
//
}
mainPan.getLayout().setAnimation({type: 'slide', direction: 'left', duration:1000});
//mainPan.setActiveItem(1);
var pree=mainPan.getAt(1);
//pree.show();
//mainPan.setActiveItemm(pree);
mainPan.setActiveItem('ext-previsio-1');
The three form of setActiveItem() are ok for Android and falls with iPhone. Can somebody please show me what is the right way to set the new active item added dinamically on the iphone ?
The problem should not be with the add() function cause i can see the new item via the getItems() added in main panel after the add().
by following code you can understand that thisCell is added later after creation of thisRow.
var thisRow = new Ext.Panel({
layout: { type: 'hbox', align: 'stretch', pack: 'center' },
id: 'row' + (rowCount + 1),
defaults: { flex: 1 }
});
// Now we need to add the cells to the above Panel:
var thisCell = new Ext.Panel({
cls: 'dashboardButton',
layout: { type: 'vbox', align: 'center', pack: 'center' },
items: [{
xtype: 'image',
src: 'some image url',
height: '70px',
width: '100px',
}]
});
thisRow.add(thisCell);
hope this will help you to achieve your desired output...