At first I want to say that I'm beginner in Javascript, so I can't edit my function correctly.
For now I have clickable text to remove row, but I want to use image instead of text.
This is part of function:
...
var removeRow = $.fn.optionTest.createColumn($("<a>", options.removeLinkOptions).text('Remove Row'));
row.append(id).append(label).append(from).append(to).append(removeRow);
I can't achieve correct syntax, I've tried something like, but unsuccessfully...
var removeRow = $.fn.optionTest.createColumn($("<a>", options.removeLinkOptions).src("http://linktoimage.com/img.jpg"));
Thank you for understanding and trying to help!
UPDATE
Later I'm using removeRow in following, It have href: 'javascript:;', maybe that's why not working?
$.fn.optionTest.defaults = {
clearOnChange: false,
actionId: '#action',
indexOptions: {
class: 'div-format-test'
},
rowOptions: {
id: 'option',
class: 'div-format',
tag: 'tr'
},
fromOptions: {
name: 'from',
type: 'text',
value: 'from',
size: 20
},
toOptions: {
name: 'to',
type: 'text',
value: 'to',
size: 20
},
removeLinkOptions: {
class: 'removeRow',
href: 'javascript:;'
}
};
For now I've change code like:
var removeRow = $.fn.optionTest.createColumn($("<img>", options.removeLinkOptions).src("http://www.somelink.com/image.png"));
But seems like there is wrong syntax rows not appear at all now...
use an <img> instead of <a> for an image. <a> is used for a link.
Thanks
In addition to the already mentioned changing <a> to <img>, you also need to set the attribute in order to change the image source. Using .attr('src','...') instead of .src('...') should fix it.
Changing this:
var removeRow = $.fn.optionTest.createColumn($("<img>", options.removeLinkOptions).src("http://www.somelink.com/image.png"));
To this:
var removeRow = $.fn.optionTest.createColumn($("<img>", options.removeLinkOptions).attr("src","http://www.somelink.com/image.png"));
That should fix your issue. Hope that helps!
Related
I use grapejs, and I need to change the text language. There is 'i81n' for labels, but I couldn't find anything for inputs like this as you can see i change the label language with i18n but selectbox's options are still english Also if it's possible, As you can see in the pic I need to change the placeholder for text input and the title 'text' above it
I Found how to change inputs. You have to change your props one by one. You can find the details in
https://github.com/artf/grapesjs/issues/2712#issuecomment-615763048
And for the second issue you have to add your i18n file domComponents. in my scenario it's like this
var _default = {domComponents: {
names: {
'': 'Kutu',
wrapper: 'Gövde',
text: 'Metin',
comment: 'Yorum',
image: 'Görsel',
video: 'Video',
label: 'Etiket',
link: 'Link',
map: 'Harita',
tfoot: 'Tablo alt',
tbody: 'Tablo gövde',
thead: 'Tablo başlık',
table: 'Tablo',
row: 'Satır',
cell: 'Hücre'
}...}..}
Document for this is here : https://grapesjs.com/docs/modules/I18n.html#plugin-development
I've been looking through a lot of documentation and examples, but I haven't found an answer. Here's my problem, I have the following code inside my CKEditor stylesSet:
{name: 'Full Column Photo', element: 'img', attributes: { 'class': 'full-
column' }, childRule: function( element ) {
return !element.is( 'img' );
}},
{ name: 'Disable Image Popup', element: 'img', attributes: { 'class':
'disable-popup' }, childRule: function( element ) {
return !element.is( 'img' );
} },
If I have an element that has the style/class ".full-column" and then add the style/class ".disable-popup" to that same element, '.full-column' gets removed. How can I keep both classes in the element? And how can I remove only the selected style/class if it's already been selected for the element before.
All help greatly appreciated.
In JavaScript you can add a class to an elements existing class list using the classList property. The property exposes the add function which can be used to add a new class name to the list.
You first need to get a reference to the DOM element you wish to manipulate.
const el = document.getElementById('some-element');
Next you can add the class you want to the element
el.classList.add('new-class');
Alternatively if you want to later remove the class you can use the remove function.
el.classList.remove('new-class');
Edit: In light of your comment, would you be able to specify the attributes.class property as a function that returns the object you have. Something like:
{
name: 'Disable Image Popup',
element: 'img',
attributes: {
'class': function() {
element.addClass('disable-popup');
return '';
}
},
childRule: function( element ) {
return !element.is( 'img' );
}
}
Weirdly, I don't think there is a function that will return the CKEDITOR.dom.element classes on the element, only the styles or a hasClass() function.
here is the code:
nodes.push({
id: d_id,
shape: 'image',
image: DIR + '_honeypot.png',
title: '<div>类型: '+d_type+'</div>' + '<div>IP: '+d_ip+'</div>' + '<div>状态：'+activity+d_runtime+'</div>',
label: d_type});
but the event of hoverNode is work. like the code:
network.on("hoverNode",function () {
console.log("ok111");
});
if not solved, have mind to using hoverNode to replace title
Can you help me please? (sorry my english is not good)
from what I understand from this page http://visjs.org/docs/network/interaction.html# the hover option is defaulted to false. Have you changed it to true?
I was having a look at the adpt-strap table lite and was playing around with it. here is the JSfiddle that I was playing about with: http://jsfiddle.net/cx5gm0sa/
What I was trying to do and I was wondering if it is possible is to try and dynamically hide/show a column. The code I have added consists of $scope.showColumn = true; (you can see the value of this on the html page, I am printing it out at the top).
When you click the buy button on any row the variable gets set to the opposite of what it was before so it alternates between true and false.
$scope.buyCar = function (car) {
$scope.showColumn = !$scope.showColumn
};
This variable is also what is used for the visible property of the model column, however when the variable changes the column doesn't hide/show as I would have expected, it only ever seems to hide/show depending on what value the variable was initialized with. Is there anyway to make this work dynamically as I originally expected it would have and does anyone know why it wouldnt be working that way already?
Thanks in advance for any help I may get.
Got it. OK, I think the reason the table does not update is because your controller does not re-run the code that defines the table when you click the Buy button. I have changed this so that instead of assigning the array of the configs to the $scope.carsTableColumnDefinition directly, I defined a function named getDefinition that returns the array instead. Then in the $scope.buyCar = function (car){}, I then call the function.
So here are the changes I made:
$scope.carsTableColumnDefinition = getDefinition();
...
//Then inside the buyCar function I have:
$scope.buyCar = function (car) {
$scope.showColumn = !$scope.showColumn;
//now refresh by calling the get-definition function:
$scope.carsTableColumnDefinition = getDefinition();
};
..
//Finally, this is my getDefinition function:
function getDefinition(){
return [
{
columnHeaderDisplayName: 'Model',
displayProperty: 'name',
sortKey: 'name',
columnSearchProperty: 'name',
visible: $scope.showColumn
},
{
columnHeaderTemplate: '<span><i class="glyphicon glyphicon-calendar"></i> Model Year</span>',
template: '<strong>{{ item.modelYear }}</strong>',
sortKey: 'modelYear',
width: '12em',
columnSearchProperty: 'modelYear'
},
{
columnHeaderTemplate: '<span><i class="glyphicon glyphicon-usd"></i> Price</span>',
displayProperty: 'price',
cellFilter: 'currency',
sortKey: 'price',
width: '9em',
columnSearchProperty: 'price'
},
{
columnHeaderDisplayName: 'Buy',
templateUrl: 'src/tablelite/docs/buyCell.html',
width: '4em'
}
];
}
I updated the jsfiddle - check it out.
CKEditor's Mathjax plugin contains several elements in the dialog: one textarea (id: equation) and one div (id: preview).
https://github.com/ckeditor/ckeditor-dev/blob/master/plugins/mathjax/dialogs/mathjax.js
When some mathjax code is entered in the textarea, the formula is written in the div. I am trying to add several predefined buttons that add usual formulae mathjax text to the textarea, so users only have to populate these formulae.
Adding a button into the elements works nice, but I can only access to change the div element. Accessing the textarea does not work, it seems that is not available in any scope at all.
id: 'info',
elements: [
{
id: 'testButton',
type: 'button',
button: 'aaaa',
onClick: function() {
// Changing the ID value does work
preview.setValue('Test');
// but changing the textarea does not.
// equation.setValue('Test');
// document.getElementById('equation').setValue('Test');
}
},
{
id: 'equation',
type: 'textarea',
label: lang.dialogInput,
onLoad: function() {
var that = this;
if ( !( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) ) {
this.getInputElement().on( 'keyup', function() {
// Add \( and \) for preview.
preview.setValue( '\\(' + that.getInputElement().getValue() + '\\)' );
} );
}
},
Sorry if this is a simple question, but how can I access to equation textarea?
After much reading, it seems that this is a way, not sure it's the best way though.
onClick: function() {
this._.dialog.setValueOf("info","equation","TEST");
}