Skip to content

Commit

Permalink
更新:完成编辑器帖子预览功能
Browse files Browse the repository at this point in the history
  • Loading branch information
zhuchunshu committed Dec 20, 2022
1 parent 334894e commit 9fa1520
Show file tree
Hide file tree
Showing 19 changed files with 700 additions and 283 deletions.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions app/Plugins/Core/resources/assets/js/app.js
Expand Up @@ -3984,11 +3984,13 @@ $(function () {

if (theme === "antialiased") {
$("body").attr("class", 'theme-dark');
$("html").attr("data-theme", 'theme-dark');
$(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>');
}

if (theme === "theme-dark") {
$("body").attr("class", 'antialiased');
$("html").attr("data-theme", 'antialiased');
$(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>');
}

Expand Down
2 changes: 2 additions & 0 deletions app/Plugins/Core/resources/package/js/app.js
Expand Up @@ -149,11 +149,13 @@ $(function(){
let theme = $("body").attr("class");
if(theme==="antialiased"){
$("body").attr("class",'theme-dark')
$("html").attr("data-theme",'theme-dark')
$(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>');

}
if(theme==="theme-dark"){
$("body").attr("class",'antialiased')
$("html").attr("data-theme",'antialiased')
$(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' +
Expand Down
15 changes: 8 additions & 7 deletions app/Plugins/Topic/bootstrap.php
Expand Up @@ -98,17 +98,16 @@
'view' => 'Topic::create.basis',
'scripts' => [
file_hash('plugins/Topic/js/topic.js'),
file_hash('plugins/Topic/js/editor.js'),
file_hash('tabler/libs/tom-select/dist/js/tom-select.base.min.js'),
file_hash('tabler/libs/tinymce/tinymce.min.js'),
],
]);

// topic create - editor plugins

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',]);
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']);

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']);
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']);

Itf()->add('topic-create-editor-toolbar', 1, [
'basicDateButton',
Expand All @@ -121,10 +120,8 @@
'newdocument',
'restoredraft',
'|',
'preview',
'|',
'sfPreview',
'export',
'print',
'|',
'deleteallconversations',
],
Expand Down Expand Up @@ -252,4 +249,8 @@
// ]
//]);

Itf()->add('topic-create-handle-middleware-end',0,\App\Plugins\Topic\src\Handler\Topic\Middleware\Create\CreateEndMiddleware::class);
Itf()->add('topic-create-handle-middleware-end', 0, \App\Plugins\Topic\src\Handler\Topic\Middleware\Create\CreateEndMiddleware::class);

Itf()->add('topic-create-editor-external_plugins', 0, [
'sfPreview' => file_hash('plugins/Topic/js/editor/plugins/sfPreview.js'),
]);
63 changes: 12 additions & 51 deletions app/Plugins/Topic/resources/assets/css/app.css

Large diffs are not rendered by default.

73 changes: 73 additions & 0 deletions app/Plugins/Topic/resources/assets/js/editor.js
@@ -0,0 +1,73 @@
/*
Note: We have included the plugin in the same JavaScript file as the TinyMCE
instance for display purposes only. Tiny recommends not maintaining the plugin
with the TinyMCE instance and using the `external_plugins` option.
*/
tinymce.PluginManager.add('sfPreview', (editor, url) => {
const openDialog = () => editor.windowManager.open({
title: 'Preview',
type: 'htmlpanel', // component type
html: '<div>Html goes here</div>',
body: {
type: 'panel',
items: [
{
type: 'input',
name: 'title',
label: 'Title'
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
{
type: 'submit',
text: 'Save',
buttonType: 'primary'
}
],
onSubmit: (api) => {
const data = api.getData();
/* Insert content when the window form is submitted */
editor.insertContent('Title: ' + data.title);
api.close();
}
});
/* Add a button that opens a window */
editor.ui.registry.addButton('sfPreview', {
icon:'preview',
onAction: () => {
/* Open window */
openDialog();
}
});
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
editor.ui.registry.addMenuItem('sfPreview', {
text: '预览',
icon:'preview',
onAction: () => {
/* Open window */
openDialog();
}
});
/* Return the metadata for the help plugin */
return {
getMetadata: () => ({
name: 'sfPreview',
url: 'https://www.runpod.cn'
})
};
});

/*
The following is an example of how to use the new plugin and the new
toolbar button.
*/
tinymce.init({
selector: 'textarea#custom-plugin',
plugins: 'example help',
toolbar: 'example | help'
});
69 changes: 69 additions & 0 deletions app/Plugins/Topic/resources/assets/js/editor/plugins/sfPreview.js
@@ -0,0 +1,69 @@
/*
Note: We have included the plugin in the same JavaScript file as the TinyMCE
instance for display purposes only. Tiny recommends not maintaining the plugin
with the TinyMCE instance and using the `external_plugins` option.
*/

tinymce.PluginManager.add('sfPreview', (editor, url) => {
const openDialog = () => editor.windowManager.open({
title: '预览',
size: "large",
body: {
type: 'panel',
items: [
{
type: 'iframe', // component type
name: 'sfPreview', // identifier
sandboxed: true,
transparent: true,
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
],
});
/* Add a button that opens a window */
editor.ui.registry.addButton('sfPreview', {
icon:'preview',
onAction: () => {
/* Open window */
let _openDialog = openDialog();
axios.post("/topic/create/preview",{
_token:csrf_token,
content:editor.getContent()
}).then(r=>{
_openDialog.setData({
sfPreview:r.data
})
})
}
});
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
editor.ui.registry.addMenuItem('sfPreview', {
text: '预览',
icon:'preview',
onAction: () => {
/* Open window */
let _openDialog = openDialog();
axios.post("/topic/create/preview",{
_token:csrf_token,
content:editor.getContent()
}).then(r=>{
_openDialog.setData({
sfPreview:r.data
})
})
}
});
/* Return the metadata for the help plugin */
return {
getMetadata: () => ({
name: 'sfPreview',
url: 'https://www.runpod.cn'
})
};
});
28 changes: 28 additions & 0 deletions app/Plugins/Topic/resources/assets/js/topic.js
Expand Up @@ -9039,6 +9039,34 @@ $(function () {
});
}
});

if (document.getElementById('topic-create')) {
document.addEventListener("DOMContentLoaded", function () {
var el;
window.TomSelect && new TomSelect(el = document.getElementById('select-topic-tags'), {
copyClassesToDropdown: false,
dropdownClass: 'dropdown-menu ts-dropdown',
optionClass: 'dropdown-item',
controlInput: '<input>',
render: {
item: function item(data, escape) {
if (data.customProperties) {
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}

return '<div>' + escape(data.text) + '</div>';
},
option: function option(data, escape) {
if (data.customProperties) {
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}

return '<div>' + escape(data.text) + '</div>';
}
}
});
});
}
})();

/******/ })()
Expand Down
Empty file.
69 changes: 69 additions & 0 deletions app/Plugins/Topic/resources/package/js/editor/plugins/sfPreview.js
@@ -0,0 +1,69 @@
/*
Note: We have included the plugin in the same JavaScript file as the TinyMCE
instance for display purposes only. Tiny recommends not maintaining the plugin
with the TinyMCE instance and using the `external_plugins` option.
*/

tinymce.PluginManager.add('sfPreview', (editor, url) => {
const openDialog = () => editor.windowManager.open({
title: '预览',
size: "large",
body: {
type: 'panel',
items: [
{
type: 'iframe', // component type
name: 'sfPreview', // identifier
sandboxed: true,
transparent: true,
}
]
},
buttons: [
{
type: 'cancel',
text: 'Close'
},
],
});
/* Add a button that opens a window */
editor.ui.registry.addButton('sfPreview', {
icon:'preview',
onAction: () => {
/* Open window */
let _openDialog = openDialog();
axios.post("/topic/create/preview",{
_token:csrf_token,
content:editor.getContent()
}).then(r=>{
_openDialog.setData({
sfPreview:r.data
})
})
}
});
/* Adds a menu item, which can then be included in any menu via the menu/menubar configuration */
editor.ui.registry.addMenuItem('sfPreview', {
text: '预览',
icon:'preview',
onAction: () => {
/* Open window */
let _openDialog = openDialog();
axios.post("/topic/create/preview",{
_token:csrf_token,
content:editor.getContent()
}).then(r=>{
_openDialog.setData({
sfPreview:r.data
})
})
}
});
/* Return the metadata for the help plugin */
return {
getMetadata: () => ({
name: 'sfPreview',
url: 'https://www.runpod.cn'
})
};
});
29 changes: 28 additions & 1 deletion app/Plugins/Topic/resources/package/js/topic.js
Expand Up @@ -1214,4 +1214,31 @@ $(function(){
})
})
}
})
})


if(document.getElementById('topic-create')){
document.addEventListener("DOMContentLoaded", function () {
var el;
window.TomSelect && (new TomSelect(el = document.getElementById('select-topic-tags'), {
copyClassesToDropdown: false,
dropdownClass: 'dropdown-menu ts-dropdown',
optionClass:'dropdown-item',
controlInput: '<input>',
render:{
item: function(data,escape) {
if( data.customProperties ){
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}
return '<div>' + escape(data.text) + '</div>';
},
option: function(data,escape){
if( data.customProperties ){
return '<div><span class="dropdown-item-indicator">' + data.customProperties + '</span>' + escape(data.text) + '</div>';
}
return '<div>' + escape(data.text) + '</div>';
},
},
}));
});
}
3 changes: 2 additions & 1 deletion app/Plugins/Topic/resources/views/create/basis.blade.php
Expand Up @@ -75,10 +75,11 @@
toolbar_mode: 'sliding',
image_advtab: true,
automatic_uploads: true,
images_reuse_filename: true,
convert_urls:false,
setup : function(ed) {
//console.log(ed)
},
external_plugins:{!! \App\Plugins\Topic\src\Lib\Editor::externalPlugins() !!},
images_upload_handler: image_upload_handler,
init_instance_callback: (editor) => {
@if(request()->has('restoredraft'))
Expand Down

0 comments on commit 9fa1520

Please sign in to comment.