Skip to content

Commit 662ae8f

Browse files
yodaggyodagg
authored
Merge pull request #4 from so-diao/dev
Dev
2 parents aa13564 + 2e1fab3 commit 662ae8f

File tree

5 files changed

+73
-6
lines changed

5 files changed

+73
-6
lines changed

‎fontawesomepicker/plugin.js‎

Lines changed: 70 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -172,19 +172,67 @@
172172

173173
// Empty tags will be automatically deleted
174174
// Use <!--. --> to placeholder
175-
var html = '<span><!-- . --><span contenteditable="false" class="'+ icon +'"></span></span>'
175+
var html = ' <span class="mark-fapkw"><!-- . --><span contenteditable="false" class="mark-fapk '+ icon +'"></span></span> '
176176
editor.execCommand('mceInsertContent', false, html)
177177
editor.windowManager.close()
178178
}
179179
}
180180
}
181181
}
182182

183+
var SettingPanel = function(editor) {
184+
var target = utils.getRngNode(editor)
183185

186+
editor.windowManager.open({
187+
title: 'Icon setting',
188+
body: {
189+
type: 'panel',
190+
items: [
191+
{
192+
type: 'input',
193+
name: 'icon-size',
194+
label: 'icon size'
195+
},
196+
{
197+
type: 'colorinput',
198+
name: 'icon-color',
199+
label: 'icon color'
200+
}
201+
]
202+
},
203+
buttons: [
204+
{
205+
type: 'cancel',
206+
name: 'closeButton',
207+
text: 'Cancel'
208+
},
209+
{
210+
type: 'submit',
211+
name: 'submitButton',
212+
text: 'change',
213+
primary: true
214+
}
215+
],
216+
initialData: {
217+
'icon-size': editor.$(target).css('font-size'),
218+
'icon-color': editor.$(target).css('color'),
219+
},
220+
onSubmit: function (api) {
221+
var data = api.getData()
222+
223+
editor.$(target).css({
224+
'font-size': data['icon-size'],
225+
'color': data['icon-color']
226+
})
227+
// editor.execCommand('mceReplaceContent', false, '')
228+
api.close()
229+
}
230+
})
231+
}
184232

185-
var buttonIcon = '<svg width="24" height="24" viewBox=\"0 0 512 512\"><path d=\"M116.65 219.35a15.68 15.68 0 0 0 22.65 0l96.75-99.83c28.15-29 26.5-77.1-4.91-103.88C203.75-7.7 163-3.5 137.86 22.44L128 32.58l-9.85-10.14C93.05-3.5 52.25-7.7 24.86 15.64c-31.41 26.78-33 74.85-5 103.88zm143.92 100.49h-48l-7.08-14.24a27.39 27.39 0 0 0-25.66-17.78h-71.71a27.39 27.39 0 0 0-25.66 17.78l-7 14.24h-48A27.45 27.45 0 0 0 0 347.3v137.25A27.44 27.44 0 0 0 27.43 512h233.14A27.45 27.45 0 0 0 288 484.55V347.3a27.45 27.45 0 0 0-27.43-27.46zM144 468a52 52 0 1 1 52-52 52 52 0 0 1-52 52zm355.4-115.9h-60.58l22.36-50.75c2.1-6.65-3.93-13.21-12.18-13.21h-75.59c-6.3 0-11.66 3.9-12.5 9.1l-16.8 106.93c-1 6.3 4.88 11.89 12.5 11.89h62.31l-24.2 83c-1.89 6.65 4.2 12.9 12.23 12.9a13.26 13.26 0 0 0 10.92-5.25l92.4-138.91c4.88-6.91-1.16-15.7-10.87-15.7zM478.08.33L329.51 23.17C314.87 25.42 304 38.92 304 54.83V161.6a83.25 83.25 0 0 0-16-1.7c-35.35 0-64 21.48-64 48s28.65 48 64 48c35.2 0 63.73-21.32 64-47.66V99.66l112-17.22v47.18a83.25 83.25 0 0 0-16-1.7c-35.35 0-64 21.48-64 48s28.65 48 64 48c35.2 0 63.73-21.32 64-47.66V32c0-19.48-16-34.42-33.92-31.67z\"/></svg>'
233+
var iconsButtonSvg = '<svg width="24" height="24" viewBox=\"0 0 512 512\"><path d=\"M116.65 219.35a15.68 15.68 0 0 0 22.65 0l96.75-99.83c28.15-29 26.5-77.1-4.91-103.88C203.75-7.7 163-3.5 137.86 22.44L128 32.58l-9.85-10.14C93.05-3.5 52.25-7.7 24.86 15.64c-31.41 26.78-33 74.85-5 103.88zm143.92 100.49h-48l-7.08-14.24a27.39 27.39 0 0 0-25.66-17.78h-71.71a27.39 27.39 0 0 0-25.66 17.78l-7 14.24h-48A27.45 27.45 0 0 0 0 347.3v137.25A27.44 27.44 0 0 0 27.43 512h233.14A27.45 27.45 0 0 0 288 484.55V347.3a27.45 27.45 0 0 0-27.43-27.46zM144 468a52 52 0 1 1 52-52 52 52 0 0 1-52 52zm355.4-115.9h-60.58l22.36-50.75c2.1-6.65-3.93-13.21-12.18-13.21h-75.59c-6.3 0-11.66 3.9-12.5 9.1l-16.8 106.93c-1 6.3 4.88 11.89 12.5 11.89h62.31l-24.2 83c-1.89 6.65 4.2 12.9 12.23 12.9a13.26 13.26 0 0 0 10.92-5.25l92.4-138.91c4.88-6.91-1.16-15.7-10.87-15.7zM478.08.33L329.51 23.17C314.87 25.42 304 38.92 304 54.83V161.6a83.25 83.25 0 0 0-16-1.7c-35.35 0-64 21.48-64 48s28.65 48 64 48c35.2 0 63.73-21.32 64-47.66V99.66l112-17.22v47.18a83.25 83.25 0 0 0-16-1.7c-35.35 0-64 21.48-64 48s28.65 48 64 48c35.2 0 63.73-21.32 64-47.66V32c0-19.48-16-34.42-33.92-31.67z\"/></svg>'
186234
function registerUi(editor) {
187-
editor.ui.registry.addIcon(PLUGIN_NAME, buttonIcon)
235+
editor.ui.registry.addIcon(PLUGIN_NAME, iconsButtonSvg)
188236
editor.ui.registry.addButton(PLUGIN_NAME, {
189237
icon: PLUGIN_NAME,
190238
tooltip: PLUGIN_NAME,
@@ -199,6 +247,23 @@
199247
editor.execCommand('mceOpenFontawesomepicker')
200248
}
201249
})
250+
251+
editor.ui.registry.addMenuItem('fontawesomesetting', {
252+
icon: 'preferences',
253+
text: 'Icon setting',
254+
onAction: function () {
255+
SettingPanel(editor)
256+
}
257+
})
258+
editor.ui.registry.addContextMenu('fontawesomesetting', {
259+
update: function (element) {
260+
var classList = element.classList
261+
if ( classList.contains('mark-fapk') || classList.contains('mark-fapkw') ) return 'fontawesomesetting'
262+
return ''
263+
}
264+
})
265+
266+
202267
}
203268

204269
var Icons = IconsPanel()
@@ -210,6 +275,8 @@
210275
// setting
211276
editor.settings.extended_valid_elements = editor.settings.extended_valid_elements || ''
212277
editor.settings.extended_valid_elements += ',span[*]'
278+
editor.settings.contextmenu = editor.settings.contextmenu || ''
279+
editor.settings.contextmenu += ' fontawesomesetting'
213280

214281
// register
215282
editor.addCommand('mceOpenFontawesomepicker', function () {

‎fontawesomepicker/plugin.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎image.jpg‎

-69.5 KB
Binary file not shown.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tinymce-fontawesomepicker",
3-
"version": "0.0.2",
3+
"version": "0.1.1",
44
"repository": "https://github.com/so-diao/tinymce-fontawesomepicker",
55
"description": "A plugin for tinymce5 that selects the fontawesome icon.",
66
"main": "index.js",

‎readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,4 @@ A plugin for `tinymce v5` that selects the `fontawesome` icon.
3131

3232

3333
# preview [example](http://gitpages.wo2.me/tinymce-fontawesomepicker/)
34-
![image](image.jpg)
34+
![image](image.png)

0 commit comments

Comments
 (0)