charlestehio/productalert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add (post editor): add image block, add 'standard' post format

Browse Source
This commit is contained in:
Charles T
2023-07-31 01:39:39 +08:00
parent 73062716b9
commit 9ed9671f09
29 changed files with 382 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

165
resources/js/vue/PostEditor.vue
View File

@@ -187,6 +187,7 @@ import VueEditorJs from "./VueEditorJs.vue";
import List from "@editorjs/list";
import Header from "@editorjs/header";
import ImageTool from "@editorjs/image";
import { mapActions, mapState } from "pinia";
@@ -253,13 +254,160 @@ export default {
class: List,
inlineToolbar: true,
},
image: {
class: ImageTool,
config: {
field: "file",
endpoints: {
byFile: null, // Your backend file uploader endpoint
byUrl: null, // Your endpoint that provides uploading by Url
},
},
},
},
onReady: () => {},
onChange: (args) => {},
data: {
time: 1591362820044,
blocks: [],
version: "2.25.0",
time: 1690738306815,
blocks: [
{
id: "DYr36VT6KH",
data: {
text: "Introduction",
level: 3,
},
type: "header",
},
{
id: "TAh-E2RIrs",
data: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
type: "paragraph",
},
{
id: "sQWS7Ivg74",
data: {
text: "First Point",
level: 3,
},
type: "header",
},
{
id: "Y9GYmrtsEk",
data: {
file: {
url: "https://cdn1.productalert.co/uploads/1690738207_3b4cf9ff-c617-4062-b910-22e61e1751d0.jpg",
},
caption: "Picture of First Point",
stretched: false,
withBorder: false,
withBackground: false,
},
type: "image",
},
{
id: "7qzQF_jale",
data: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
type: "paragraph",
},
{
id: "_oYWs021IJ",
data: {
text: "Second Point",
level: 3,
},
type: "header",
},
{
id: "PzXRqEDx1Z",
data: {
file: {
url: "https://cdn1.productalert.co/uploads/1690738243_8eb9f5b2-f3ad-45d9-a626-8ef160ef4068.jpg",
},
caption: "Picture of Second Point",
stretched: false,
withBorder: false,
withBackground: false,
},
type: "image",
},
{
id: "oD5oZ_q0Qo",
data: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
type: "paragraph",
},
{
id: "am9pIHopIw",
data: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
type: "paragraph",
},
{
id: "iFvJ1tYZk-",
data: {
text: "Third Point",
level: 3,
},
type: "header",
},
{
id: "zqwukyGttU",
data: {
file: {
url: "https://cdn1.productalert.co/uploads/1690738271_180a520a-22df-4b98-aad3-9962e10832d6.jpg",
},
caption: "Picture of Third Point",
stretched: false,
withBorder: false,
withBackground: false,
},
type: "image",
},
{
id: "uuR88uia0m",
data: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
type: "paragraph",
},
{
id: "KNVtnJ5lou",
data: {
text: "Fourth Point",
level: 3,
},
type: "header",
},
{
id: "SWdpL4jh6G",
data: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
type: "paragraph",
},
{
id: "dQqWsgP_FO",
data: {
text: "Conclusion",
level: 3,
},
type: "header",
},
{
id: "I7FOByi69M",
data: {
text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
},
type: "paragraph",
},
],
version: "2.27.2",
},
},
};
@@ -378,7 +526,7 @@ export default {
.then((response) => {
console.warn(response);
if (response.data.action == "redirect_back") {
history.back();
window.location.replace(route("posts.manage"));
}
});
@@ -469,6 +617,15 @@ export default {
},
},
mounted() {
this.config.tools.image.config.endpoints.byFile = route(
"api.admin.upload.cloud.image"
);
this.config.tools.image.config.additionalRequestHeaders = {
"X-CSRF-TOKEN": document
.querySelector('meta[name="csrf-token"]')
.getAttribute("content"),
};
this.fetchCountryLocales().then(() => {
this.setDefaultLocale();