Skip to content

Commit 9fa1520

Browse files
zhuchunshuzhuchunshu
committedDec 20, 2022
更新:完成编辑器帖子预览功能
·
v2.7.7v2.1.7
1 parent 334894e commit 9fa1520

File tree

19 files changed

+700
-283
lines changed

19 files changed

+700
-283
lines changed
 

‎app/Plugins/Core/resources/assets/image/user_background.jpg

400 KB
Loading

‎app/Plugins/Core/resources/assets/js/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3984,11 +3984,13 @@ $(function () {
39843984

39853985
if (theme === "antialiased") {
39863986
$("body").attr("class", 'theme-dark');
3987+
$("html").attr("data-theme", 'theme-dark');
39873988
$(this).html('<svg class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0h24v24H0z" stroke="none"></path><circle cx="12" cy="12" r="4"></circle><path d="M3 12h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"></path></svg>');
39883989
}
39893990

39903991
if (theme === "theme-dark") {
39913992
$("body").attr("class", 'antialiased');
3993+
$("html").attr("data-theme", 'antialiased');
39923994
$(this).html('<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">\n' + ' <desc>Download more icon variants from https://tabler-icons.io/i/moon</desc>\n' + ' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>\n' + ' <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"></path>\n' + ' </svg>');
39933995
}
39943996

‎app/Plugins/Core/resources/package/js/app.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,11 +149,13 @@ $(function(){
149149
let theme = $("body").attr("class");
150150
if(theme==="antialiased"){
151151
$("body").attr("class",'theme-dark')
152+
$("html").attr("data-theme",'theme-dark')
152153
$(this).html('<svg class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0h24v24H0z" stroke="none"></path><circle cx="12" cy="12" r="4"></circle><path d="M3 12h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"></path></svg>');
153154

154155
}
155156
if(theme==="theme-dark"){
156157
$("body").attr("class",'antialiased')
158+
$("html").attr("data-theme",'antialiased')
157159
$(this).html('<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-moon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">\n' +
158160
' <desc>Download more icon variants from https://tabler-icons.io/i/moon</desc>\n' +
159161
' <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>\n' +

‎app/Plugins/Topic/bootstrap.php

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,17 +98,16 @@
9898
'view' => 'Topic::create.basis',
9999
'scripts' => [
100100
file_hash('plugins/Topic/js/topic.js'),
101-
file_hash('plugins/Topic/js/editor.js'),
102101
file_hash('tabler/libs/tom-select/dist/js/tom-select.base.min.js'),
103102
file_hash('tabler/libs/tinymce/tinymce.min.js'),
104103
],
105104
]);
106105

107106
// topic create - editor plugins
108107

109-
Itf()->add('topic-create-editor-plugins', 0, ['importcss', 'searchreplace', 'autolink', 'autosave', 'directionality', 'code', 'visualblocks', 'visualchars', 'image', 'link', 'media', 'codesample', 'table', 'charmap', 'pagebreak', 'nonbreaking', 'anchor', 'insertdatetime', 'advlist', 'lists', 'wordcount', 'charmap', 'quickbars',]);
108+
Itf()->add('topic-create-editor-plugins', 0, ['importcss', 'searchreplace', 'autolink', 'autosave', 'directionality', 'code', 'visualblocks', 'visualchars', 'image', 'link', 'media', 'codesample', 'table', 'charmap', 'pagebreak', 'nonbreaking', 'insertdatetime', 'advlist', 'lists', 'wordcount', 'charmap', 'quickbars']);
110109

111-
Itf()->add('topic-create-editor-toolbar', 0, ['undo', 'redo', 'restoredraft', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'fontfamily', 'fontsize', 'blocks', '|', 'alignleft', 'aligncenter', 'alignright', 'alignjustify','outdent', 'indent','numlist', 'bullist', '|', 'forecolor', 'backcolor', 'removeformat', '|', 'insertfile', 'image', 'media','link', 'anchor', 'codesample', '|', 'ltr', 'rtl']);
110+
Itf()->add('topic-create-editor-toolbar', 0, ['undo', 'redo', 'restoredraft', '|', 'bold', 'italic', 'underline', 'strikethrough', '|', 'fontfamily', 'fontsize', 'blocks', '|', 'alignleft', 'aligncenter', 'alignright', 'alignjustify', 'outdent', 'indent', 'numlist', 'bullist', '|', 'forecolor', 'backcolor', 'removeformat', '|', 'insertfile', 'image', 'media', 'link', 'sfPreview', 'codesample', '|', 'ltr', 'rtl']);
112111

113112
Itf()->add('topic-create-editor-toolbar', 1, [
114113
'basicDateButton',
@@ -121,10 +120,8 @@
121120
'newdocument',
122121
'restoredraft',
123122
'|',
124-
'preview',
125-
'|',
123+
'sfPreview',
126124
'export',
127-
'print',
128125
'|',
129126
'deleteallconversations',
130127
],
@@ -252,4 +249,8 @@
252249
// ]
253250
//]);
254251

255-
Itf()->add('topic-create-handle-middleware-end',0,\App\Plugins\Topic\src\Handler\Topic\Middleware\Create\CreateEndMiddleware::class);
252+
Itf()->add('topic-create-handle-middleware-end', 0, \App\Plugins\Topic\src\Handler\Topic\Middleware\Create\CreateEndMiddleware::class);
253+
254+
Itf()->add('topic-create-editor-external_plugins', 0, [
255+
'sfPreview' => file_hash('plugins/Topic/js/editor/plugins/sfPreview.js'),
256+
]);

‎app/Plugins/Topic/resources/assets/css/app.css

Lines changed: 12 additions & 51 deletions
Large diffs are not rendered by default.

‎app/Plugins/Topic/resources/assets/js/editor.js

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/*
2+
Note: We have included the plugin in the same JavaScript file as the TinyMCE
3+
instance for display purposes only. Tiny recommends not maintaining the plugin
4+
with the TinyMCE instance and using the `external_plugins` option.
5+
*/
6+
tinymce.PluginManager.add('sfPreview', (editor, url) => {
7+
const openDialog = () => editor.windowManager.open({
8+
title: 'Preview',
9+
type: 'htmlpanel', // component type
10+
html: '<div>Html goes here</div>',
11+
body: {
12+
type: 'panel',
13+
items: [
14+
{
15+
type: 'input',
16+
name: 'title',
17+
label: 'Title'
18+
}
19+
]
20+
},
21+
buttons: [
22+
{
23+
type: 'cancel',
24+
text: 'Close'
25+
},
26+
{
27+
type: 'submit',
28+
text: 'Save',
29+
buttonType: 'primary'
30+
}
31+
],
32+
onSubmit: (api) => {
33+
const data = api.getData();
34+
/* Insert content when the window form is submitted */
35+
editor.insertContent('Title: ' + data.title);
36+
api.close();
37+
}
38+
});
39+
/* Add a button that opens a window */
40+
editor.ui.registry.addButton('sfPreview', {
41+
icon:'preview',
42+
onAction: () => {
43+
/* Open window */
44+
openDialog();
45+
}
46+
});
47+
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
48+
editor.ui.registry.addMenuItem('sfPreview', {
49+
text: '预览',
50+
icon:'preview',
51+
onAction: () => {
52+
/* Open window */
53+
openDialog();
54+
}
55+
});
56+
/* Return the metadata for the help plugin */
57+
return {
58+
getMetadata: () => ({
59+
name: 'sfPreview',
60+
url: 'https://www.runpod.cn'
61+
})
62+
};
63+
});
64+
65+
/*
66+
The following is an example of how to use the new plugin and the new
67+
toolbar button.
68+
*/
69+
tinymce.init({
70+
selector: 'textarea#custom-plugin',
71+
plugins: 'example help',
72+
toolbar: 'example | help'
73+
});

‎app/Plugins/Topic/resources/assets/js/editor/plugins/sfPreview.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
Note: We have included the plugin in the same JavaScript file as the TinyMCE
3+
instance for display purposes only. Tiny recommends not maintaining the plugin
4+
with the TinyMCE instance and using the `external_plugins` option.
5+
*/
6+
7+
tinymce.PluginManager.add('sfPreview', (editor, url) => {
8+
const openDialog = () => editor.windowManager.open({
9+
title: '预览',
10+
size: "large",
11+
body: {
12+
type: 'panel',
13+
items: [
14+
{
15+
type: 'iframe', // component type
16+
name: 'sfPreview', // identifier
17+
sandboxed: true,
18+
transparent: true,
19+
}
20+
]
21+
},
22+
buttons: [
23+
{
24+
type: 'cancel',
25+
text: 'Close'
26+
},
27+
],
28+
});
29+
/* Add a button that opens a window */
30+
editor.ui.registry.addButton('sfPreview', {
31+
icon:'preview',
32+
onAction: () => {
33+
/* Open window */
34+
let _openDialog = openDialog();
35+
axios.post("/topic/create/preview",{
36+
_token:csrf_token,
37+
content:editor.getContent()
38+
}).then(r=>{
39+
_openDialog.setData({
40+
sfPreview:r.data
41+
})
42+
})
43+
}
44+
});
45+
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
46+
editor.ui.registry.addMenuItem('sfPreview', {
47+
text: '预览',
48+
icon:'preview',
49+
onAction: () => {
50+
/* Open window */
51+
let _openDialog = openDialog();
52+
axios.post("/topic/create/preview",{
53+
_token:csrf_token,
54+
content:editor.getContent()
55+
}).then(r=>{
56+
_openDialog.setData({
57+
sfPreview:r.data
58+
})
59+
})
60+
}
61+
});
62+
/* Return the metadata for the help plugin */
63+
return {
64+
getMetadata: () => ({
65+
name: 'sfPreview',
66+
url: 'https://www.runpod.cn'
67+
})
68+
};
69+
});

‎app/Plugins/Topic/resources/assets/js/topic.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9039,6 +9039,34 @@ $(function () {
90399039
});
90409040
}
90419041
});
9042+
9043+
if (document.getElementById('topic-create')) {
9044+
document.addEventListener("DOMContentLoaded", function () {
9045+
var el;
9046+
window.TomSelect && new TomSelect(el = document.getElementById('select-topic-tags'), {
9047+
copyClassesToDropdown: false,
9048+
dropdownClass: 'dropdown-menu ts-dropdown',
9049+
optionClass: 'dropdown-item',
9050+
controlInput: '<input>',
9051+
render: {
9052+
item: function item(data, escape) {
9053+
if (data.customProperties) {
9054+
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
9055+
}
9056+
9057+
return '<div>' + escape(data.text) + '</div>';
9058+
},
9059+
option: function option(data, escape) {
9060+
if (data.customProperties) {
9061+
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
9062+
}
9063+
9064+
return '<div>' + escape(data.text) + '</div>';
9065+
}
9066+
}
9067+
});
9068+
});
9069+
}
90429070
})();
90439071

90449072
/******/ })()

‎app/Plugins/Topic/resources/package/js/editor.js

Whitespace-only changes.

‎app/Plugins/Topic/resources/package/js/editor/plugins/sfPreview.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*
2+
Note: We have included the plugin in the same JavaScript file as the TinyMCE
3+
instance for display purposes only. Tiny recommends not maintaining the plugin
4+
with the TinyMCE instance and using the `external_plugins` option.
5+
*/
6+
7+
tinymce.PluginManager.add('sfPreview', (editor, url) => {
8+
const openDialog = () => editor.windowManager.open({
9+
title: '预览',
10+
size: "large",
11+
body: {
12+
type: 'panel',
13+
items: [
14+
{
15+
type: 'iframe', // component type
16+
name: 'sfPreview', // identifier
17+
sandboxed: true,
18+
transparent: true,
19+
}
20+
]
21+
},
22+
buttons: [
23+
{
24+
type: 'cancel',
25+
text: 'Close'
26+
},
27+
],
28+
});
29+
/* Add a button that opens a window */
30+
editor.ui.registry.addButton('sfPreview', {
31+
icon:'preview',
32+
onAction: () => {
33+
/* Open window */
34+
let _openDialog = openDialog();
35+
axios.post("/topic/create/preview",{
36+
_token:csrf_token,
37+
content:editor.getContent()
38+
}).then(r=>{
39+
_openDialog.setData({
40+
sfPreview:r.data
41+
})
42+
})
43+
}
44+
});
45+
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
46+
editor.ui.registry.addMenuItem('sfPreview', {
47+
text: '预览',
48+
icon:'preview',
49+
onAction: () => {
50+
/* Open window */
51+
let _openDialog = openDialog();
52+
axios.post("/topic/create/preview",{
53+
_token:csrf_token,
54+
content:editor.getContent()
55+
}).then(r=>{
56+
_openDialog.setData({
57+
sfPreview:r.data
58+
})
59+
})
60+
}
61+
});
62+
/* Return the metadata for the help plugin */
63+
return {
64+
getMetadata: () => ({
65+
name: 'sfPreview',
66+
url: 'https://www.runpod.cn'
67+
})
68+
};
69+
});

‎app/Plugins/Topic/resources/package/js/topic.js

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1214,4 +1214,31 @@ $(function(){
12141214
})
12151215
})
12161216
}
1217-
})
1217+
})
1218+
1219+
1220+
if(document.getElementById('topic-create')){
1221+
document.addEventListener("DOMContentLoaded", function () {
1222+
var el;
1223+
window.TomSelect && (new TomSelect(el = document.getElementById('select-topic-tags'), {
1224+
copyClassesToDropdown: false,
1225+
dropdownClass: 'dropdown-menu ts-dropdown',
1226+
optionClass:'dropdown-item',
1227+
controlInput: '<input>',
1228+
render:{
1229+
item: function(data,escape) {
1230+
if( data.customProperties ){
1231+
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
1232+
}
1233+
return '<div>' + escape(data.text) + '</div>';
1234+
},
1235+
option: function(data,escape){
1236+
if( data.customProperties ){
1237+
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
1238+
}
1239+
return '<div>' + escape(data.text) + '</div>';
1240+
},
1241+
},
1242+
}));
1243+
});
1244+
}

‎app/Plugins/Topic/resources/views/create/basis.blade.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,11 @@
7575
toolbar_mode: 'sliding',
7676
image_advtab: true,
7777
automatic_uploads: true,
78-
images_reuse_filename: true,
78+
convert_urls:false,
7979
setup : function(ed) {
8080
//console.log(ed)
8181
},
82+
external_plugins:{!! \App\Plugins\Topic\src\Lib\Editor::externalPlugins() !!},
8283
images_upload_handler: image_upload_handler,
8384
init_instance_callback: (editor) => {
8485
@if(request()->has('restoredraft'))

0 commit comments

Comments
 (0)
Please sign in to comment.