Creating a custom button in Jodit Editor - jodit

I'm trying to create a custom table button using Jodit React Editor using this as reference - https://xdsoft.net/jodit/examples/toolbar/custom_button.html
I'm a little lost on this though.
I need to be able to create a table and have the icon be a text icon that says - "Table"
Right now I've added this to my configurations - extraButtons: ['tableNew'].
I've also added the below code to the render method.
this.jodit.options.controls.tableNew = {
iconURL: '',
exec: function (editor) {
return '<table> <thead> <tr> <th> Sl no </th> <th>Name</th> <th>Age</th> </tr> </thead>'+
' <tbody> <tr> <td>1</td> <td></td> <td></td> </tr> </tbody> </table>';
}
};
I see that a space has been added in the toolbar which on hover says tableNew but on clicking it nothing happens.
I'd really appreciate it if someone could help me out with this.

Instead of the following,
return '<table> <thead> <tr> <th> Sl no </th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td></td> <td></td> </tr> </tbody> </table>';
try something like this:
return editor.create.fromHTML('<table> <thead> <tr> <th> Sl no </th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td></td> <td></td> </tr> </tbody> </table>');
This works for me (a similiar implementation, not returning table like you, but return some list).

Related

How to remove row gap between two tables in Laravel maatwebsite/excel FromView

I want to export order and order item data in my laravel web app in xls format so i decided to try using maatwebsite/excel v3.1. I'm using FromView class to convert blade template into an excel file, the blade structure looks like this:
<table>
<thead>
<tr>
<th> Order# </th>
<th> Customer </th>
<th> Order Date </th>
<th> Total </th>
</tr>
</thead>
<tbody>
<tr>
<td> 1132 </td>
<td> Ashin </td>
<td> 21-11-2021 </td>
<td> 3000.00$ </td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th colspan="4"> Order Items </th>
</tr>
<tr>
<th> Product </th>
<th> Price </th>
<th> Qty </th>
<th> Subtotal </th>
</tr>
</thead>
<tbody>
<tr>
<td> Bag </td>
<td> 1200.00$ </td>
<td> 2 </td>
<td> 2400.00$ </td>
</tr>
<tr>
<td> Hat </td>
<td> 600.00$ </td>
<td> 1 </td>
<td> 600.00$ </td>
</tr>
</tbody>
</table>
and the results looks like this:
there is a row gap between these two tables, how can i remove it?

Table number iterator

I want to create a table in twig. The rows in the table are added dynamically, depending on what the user configures in the admin. I'm almost there, but each tr needs to be prefixed with a number.
How do I make the number (1, 2, 3) dynamic, as I don't know how many rows will be in the table beforehand? I have looked at the batch and for explanations in the twig documentation but it doesn't explain what to do when you don't know the max number.
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
As you didn't provide the twig code in your question I'm assuming you are building the table with a for
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
{% for item in items %}
<tr>
<th scope="row">{{ loop.index }}</th>
<td>{{ item.first_name }}</td>
<td>{{ item.last_name }}</td>
<td>{{ item.handle }}</td>
</tr>
{% endfor %}
</tbody>
</table>
demo

Get tr having specific th value from the table having an id using Xpath

I am using python3.6 with XPath library. Crawling inside the table gives me an empty list. And need to crawl to specific th.
My tr contents are dynamically generated. I need to crawl to tr which has a specific th value. Example In HTML code, the Rank appears in the second tr but it can appear in anywhere in tr. It doesn't have a specific index. Need to get the href from the tr having the Rank th.
My html file:
<tbody>
<tr>
<th class="a-color-secondary a-size-base prodDetSectionEntry">
Product Number
</th>
<td class="a-size-base">
B003NR57BY
</td>
</tr>
<tr>
<th class="a-color-secondary a-size-base prodDetSectionEntry">
Rank
</th>
<td>
<span>
<span>#3 in Computer Mice</span>
<br>
</span>
</td>
</tr>
<tr>
<th class="a-color-secondary a-size-base prodDetSectionEntry">
Created Date
</th>
<td class="a-size-base">
June 7, 2010
</td>
</tr>
</tbody>
</table>
Python code:
listings_details = parser.xpath(XPATH_PRODUCT_DETAILS)
for row in listings_details:
th = row.xpath("./th/text()")
if th[0].strip() == 'Rank':
categories = row.xpath("./td/span/span//text()")
qid_url= row.xpath("./td/span/span//#href")
I expect the output to be
Rank: 3,
url : /gp/bestsellers/pc/11036491/ref=pd_zg_hrsr_pc_1_1_last,
category: Computer Mice
Need to get the href from the tr having the Rank th.
Use:
/table/tbody/tr[normalize-space(th)='Rank']/td//a/#href
Note: this works for your provided fragment (now well-formed). You need to add later a context for selecting the table element.
<table>
<tbody>
<tr>
<th class="a-color-secondary a-size-base prodDetSectionEntry">Product Number</th>
<td class="a-size-base">B003NR57BY</td>
</tr>
<tr>
<th class="a-color-secondary a-size-base prodDetSectionEntry">Rank</th>
<td>
<span>
<span>#3 in
Computer Mice
</span>
<br/>
</span>
</td>
</tr>
<tr>
<th class="a-color-secondary a-size-base prodDetSectionEntry">Created Date</th>
<td class="a-size-base">June 7, 2010</td>
</tr>
</tbody>
</table>
Test in http://www.xpathtester.com/xpath/53808ee94dfbc5b38f12791cf857ffb9

many pandas dataframe to in one readeable file

a=np.array([[1,1,1,1],[2,2,2,2],[3,3,3,3]])
df=pandas.DataFrame(a)
df.to_html('table.html')
I am trying to make pandas.DataFrame to html.
The data are from csv.file, and i split it to several table.
i want make table are in one file one by one.(it's not linked together)
open(filename, mode):
it likes file open with mode 'a',no overwrite original file.
Sample output table like this.
How can i do that or are there another more readable way ?
You can proceed as follows:
put all your dataframes in a list
iterate through them and convert each one to HTML
concatenate all the HTML outputs to one single file
In terms of code, here's how you can do that:
a=np.array([[1,1,1,1],[2,2,2,2],[3,3,3,3]])
b=np.array([[1,4,5,1],[12,2,32,2],[3,32,30,3]])
df_a = pd.DataFrame(a)
df_b = pd.DataFrame(b)
list_df = [df_a, df_b]
output = ""
for index, df in enumerate(list_df):
output += df.to_html() + '<br>'
with open('output.html', 'w') as f:
f.writelines(output)
Here's how the ouput looks like:
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<th>1</th>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<th>2</th>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table><br><table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>1</td>
<td>4</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<th>1</th>
<td>12</td>
<td>2</td>
<td>32</td>
<td>2</td>
</tr>
<tr>
<th>2</th>
<td>3</td>
<td>32</td>
<td>30</td>
<td>3</td>
</tr>
</tbody>
</table><br>

Convert linked images to embedded images

i have an excel file with many images inside.
Actually, this excel files was made with HTML code that converted to excel file and the images were linked to their respective image. ( The reason i made the file with excel is because there is about 700+ images and i cant make it manually from 1. It will takes so much time to finish)
here is my excel's HTML code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<thead>
<tr>
<th>No</th>
<th>Image</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td><img src="56.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >2</td>
<td><img src="57.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >3</td>
<td><img src="58.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >4</td>
<td><img src="59.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >5</td>
<td><img src="60.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >6</td>
<td><img src="61.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >7</td>
<td><img src="62.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >8</td>
<td><img src="63.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >9</td>
<td><img src="64.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >10</td>
<td><img src="65.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >11</td>
<td><img src="66.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >12</td>
<td><img src="67.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >13</td>
<td><img src="68.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >14</td>
<td><img src="69.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >15</td>
<td><img src="70.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >16</td>
<td><img src="71.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >17</td>
<td><img src="72.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >18</td>
<td><img src="73.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >19</td>
<td><img src="74.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >20</td>
<td><img src="75.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >21</td>
<td><img src="76.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >22</td>
<td><img src="77.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >23</td>
<td><img src="78.jpg" width="200px"/></td>
<td></td>
</tr>
<tr>
<td >24</td>
<td><img src="79.jpg" width="200px"/></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
The problem is, when i save it and send the excel file to other's PC, the images will be blank. Here's the screenshot
i tried to google the problem but still i couldn't find the solution yet.
Any method to convert all the images to embedded images?
Thank you
I wrote a VBA script to convert all linked images to embedded images.
This script will have errors if there are shapes which aren't images. It also assumes that embedded images have their link in their alt text, which I found to be the case in my situation.
Sub INSERT_PICS()
Dim shp As Shape
For Each shp In ActiveSheet.Shapes
Debug.Print shp.Name
Debug.Print shp.AlternativeText
ActiveSheet.Shapes.AddPicture Filename:=shp.AlternativeText, linktofile:=msoFalse, _
savewithdocument:=msoCTrue, Left:=shp.Left, Top:=shp.Top, Width:=shp.Width, Height:=shp.Height
shp.Delete
Next shp
End Sub

Resources