Skip to content

Commit 953cd79

Browse files
yodaggyodagg
committed
Update panel
1 parent cd5e2c3 commit 953cd79

File tree

10 files changed

+118
-42
lines changed

10 files changed

+118
-42
lines changed

‎LICENSE‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2020 test005
3+
Copyright (c) 2020 so-diao
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎build/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ function toNames(name, styles) {
3737
const data = {}
3838

3939
for ( const name in rawIcons ) {
40+
if ( rawIcons[name].private ) break
4041
const styles = rawIcons[name].styles
4142
const categories = getCategories(name)
4243

‎build/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"dependencies": {
3-
"@fortawesome/fontawesome-free": "^5.13.0",
3+
"@fortawesome/fontawesome-free": "^5.14.0",
44
"yamljs": "^0.3.0"
55
}
66
}

‎example/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@
1616
toolbar: 'fontawesomepicker forecolor backcolor fontsizeselect formatselect',
1717
fontsize_formats: '12px 14px 16px 18px 24px 36px',
1818
external_plugins: {
19-
// 插件链接 或者 将fontawesomepicker放在tinymce的plugins目录下自动注册
20-
fontawesomepicker: '/pro/tinymce-fontawesomepicker/fontawesomepicker/plugin.min.js'
19+
// fontawesomepicker: 'https://www.unpkg.com/tinymce-fontawesomepicker/fontawesomepicker/plugin.min.js'
20+
fontawesomepicker: 'http://pro/tinymce-fontawesomepicker/fontawesomepicker/plugin.js'
2121
},
22-
fontawesomeUrl: 'https://www.unpkg.com/@fortawesome/fontawesome-free@5.13.0/css/all.min.css'
22+
fontawesomeUrl: 'https://www.unpkg.com/@fortawesome/fontawesome-free@5.14.0/css/all.min.css'
2323
})
2424
</script>
2525
</body>

‎fontawesomepicker/asset/categories.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎fontawesomepicker/asset/style.css‎

Lines changed: 51 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,33 +17,43 @@
1717
box-sizing: border-box;
1818
}
1919

20-
.tox .mce-fontawesomepicker--nav {
21-
width: 100%;
22-
height: 100%;
20+
.tox .mce-fontawesomepicker--toolbar {
21+
height: 60px;
22+
}
23+
24+
.tox .mce-fontawesomepicker--color,
25+
.tox .mce-fontawesomepicker--size {
26+
height: 30px;
27+
}
28+
29+
.tox .mce-fontawesomepicker--color span,
30+
.tox .mce-fontawesomepicker--size span {
2331
font-size: 14px;
24-
overflow: hidden;
25-
overflow-y: auto;
2632
}
2733

28-
.tox .mce-fontawesomepicker--nav__item {
29-
cursor: pointer;
30-
line-height: 20px;
31-
white-space: nowrap;
32-
text-overflow: ellipsis;
33-
overflow: hidden;
34+
.tox .mce-fontawesomepicker--color input,
35+
.tox .mce-fontawesomepicker--size input {
36+
font-size: 12px;
37+
float: right;
3438
}
3539

36-
.tox .mce-fontawesomepicker--nav__item:hover {
37-
background-color: rgba(0, 0, 0, 0.1);
40+
.tox .mce-fontawesomepicker--color input {
41+
width: 45px;
42+
height: 30px;
3843
}
3944

40-
.tox .mce-fontawesomepicker--nav__item.current {
41-
color: red
45+
.tox .mce-fontawesomepicker--size input {
46+
border: 1px solid #ccc;
47+
padding: 2px 2px 2px 5px;
48+
box-sizing: border-box;
49+
width: 60px;
50+
height: 25px;
4251
}
4352

4453
.tox .mce-fontawesomepicker--icons {
4554
overflow: auto;
4655
height: 100%;
56+
border-bottom: 1px solid #eee;
4757
}
4858

4959
.tox .mce-fontawesomepicker--icon {
@@ -59,6 +69,32 @@
5969
display: none;
6070
}
6171

72+
73+
.tox .mce-fontawesomepicker--nav {
74+
width: 100%;
75+
height: calc(100% - 70px);
76+
font-size: 14px;
77+
overflow: hidden;
78+
overflow-y: auto;
79+
margin-top: 10px;
80+
}
81+
82+
.tox .mce-fontawesomepicker--nav__item {
83+
cursor: pointer;
84+
line-height: 20px;
85+
white-space: nowrap;
86+
text-overflow: ellipsis;
87+
overflow: hidden;
88+
}
89+
90+
.tox .mce-fontawesomepicker--nav__item:hover {
91+
background-color: rgba(0, 0, 0, 0.1);
92+
}
93+
94+
.tox .mce-fontawesomepicker--nav__item.current {
95+
color: red
96+
}
97+
6298
.tox .mce-fontawesomepicker--icon:hover {
6399
background-color: rgba(0, 0, 0, 0.1);
64100
}

‎fontawesomepicker/plugin.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@
5656
this.editor = editor
5757
this.pluginUrl = pluginUrl
5858
this.$body = ''
59+
this.iconStyle = {}
5960
}
6061

6162
Object.assign(Panel.prototype, {
@@ -84,10 +85,45 @@
8485
html += '</div>'
8586
return html
8687
},
88+
renderInputColor: function() {
89+
var that = this
90+
var val = '#000000'
91+
var html = ''
92+
html += '<div class="mce-fontawesomepicker--color">'
93+
html += ' <label>'
94+
html += ' <span>Color</span>'
95+
html += ' <input type="color" value="'+ val +'">'
96+
html += ' </label>'
97+
html += '</div>'
98+
return html
99+
},
100+
renderInputSize: function() {
101+
var that = this
102+
var val = '14'
103+
var html = ''
104+
html += '<div class="mce-fontawesomepicker--size">'
105+
html += ' <label>'
106+
html += ' <span>Size</span>'
107+
html += ' <input type="number" value="'+ val +'" min="0">'
108+
html += ' </label>'
109+
html += '</div>'
110+
return html
111+
},
112+
renderToolbar: function() {
113+
var that = this
114+
var html = ''
115+
html += '<div class="mce-fontawesomepicker--toolbar">'
116+
html += this.renderInputColor()
117+
html += this.renderInputSize()
118+
html += '</div>'
119+
return html
120+
},
121+
87122
renderBody: function() {
88123
if ( this.$body ) return this.$body
89124
this.$body += '<div class="mce-fontawesomepicker--body">'
90125
this.$body += ' <div class="mce-fontawesomepicker--aside">'
126+
this.$body += this.renderToolbar()
91127
this.$body += this.renderNav()
92128
this.$body += ' </div>'
93129
this.$body += ' <div class="mce-fontawesomepicker--content">'

20200520140904.jpg renamed to image.jpg

File renamed without changes.

‎package.json‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
{
2-
"name": "tinymce-fontawesomepicker",
3-
"version": "0.0.1",
4-
"description": "tinymce v5的一个插件，用来选择fontawesome图标。",
5-
"main": "index.js",
6-
"keywords": [
7-
"tinymce",
8-
"fontawesome",
9-
"icons"
10-
],
11-
"author": "ZCOM",
12-
"license": "MIT",
13-
"scripts": {
14-
"publish": "npm publish",
15-
"patch": "npm version patch & npm publish",
16-
"minor": "npm version minor & npm publish",
17-
"major": "npm version major & npm publish"
18-
}
19-
}
2+
"name": "tinymce-fontawesomepicker",
3+
"version": "0.0.1",
4+
"repository": "https://github.com/so-diao/tinymce-fontawesomepicker",
5+
"description": "A plugin for tinymce5 that selects the fontawesome icon.",
6+
"main": "index.js",
7+
"keywords": [
8+
"tinymce",
9+
"fontawesome",
10+
"icons",
11+
"picker"
12+
],
13+
"author": "so-diao",
14+
"license": "MIT",
15+
"scripts": {
16+
"publish": "npm publish",
17+
"patch": "npm version patch & npm publish",
18+
"minor": "npm version minor & npm publish",
19+
"major": "npm version major & npm publish",
20+
"build": "node build/index.js"
21+
}
22+
}

‎readme.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ A plugin for `tinymce v5` that selects the `fontawesome` icon.
1111
selector: 'textarea',
1212
plugins: 'fontawesomepicker',
1313
toolbar: 'fontawesomepicker',
14-
fontawesomeUrl: 'https://www.unpkg.com/@fortawesome/fontawesome-free@5.13.0/css/all.min.css'
14+
fontawesomeUrl: 'https://www.unpkg.com/@fortawesome/fontawesome-free@5.14.0/css/all.min.css'
1515
})
1616
```
1717

@@ -21,7 +21,7 @@ A plugin for `tinymce v5` that selects the `fontawesome` icon.
2121
selector: 'textarea',
2222
plugins: 'fontawesomepicker',
2323
toolbar: 'fontawesomepicker',
24-
fontawesomeUrl: 'https://www.unpkg.com/@fortawesome/fontawesome-free@5.13.0/css/all.min.css',
24+
fontawesomeUrl: 'https://www.unpkg.com/@fortawesome/fontawesome-free@5.14.0/css/all.min.css',
2525
external_plugins: {
2626
// url
2727
fontawesomepicker: 'https://www.unpkg.com/tinymce-fontawesomepicker/fontawesomepicker/plugin.min.js'
@@ -35,4 +35,4 @@ The code USES `fetch`, not compatible with `Internet Explorer`.
3535

3636

3737
# preview [example](http://gitpages.wo2.me/tinymce-fontawesomepicker/)
38-
![image](20200520140904.jpg)
38+
![image](image.jpg)

0 commit comments

Comments
 (0)