devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

feat: TipTap 이미지 적용

Browse Source
This commit is contained in:
Hide_D
2021-12-14 02:03:05 +09:00
parent 1bfd0018b1
commit 3c6a884663
9 changed files with 495 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/j_image_upload.php
-111
View File
@@ -1,111 +0,0 @@
<?php
namespace sammo;
include 'lib.php';
include 'func.php';
WebUtil::requireAJAX();
$session = Session::requireGameLogin([])->setReadOnly();
$userID = $session::getUserID();
$serverID = UniqueConst::$serverID;
$image = $_FILES['img'];
switch ($image['error']) {
case UPLOAD_ERR_OK:
break;
case UPLOAD_ERR_NO_FILE:
Json::die([
'result'=>false,
'reason'=>'파일이 없습니다.'
]);
case UPLOAD_ERR_INI_SIZE:
case UPLOAD_ERR_FORM_SIZE:
Json::die([
'result'=>false,
'reason'=>'업로드된 파일이 지나치게 큽니다.'
]);
default:
Json::die([
'result'=>false,
'reason'=>'업로드되지 않았습니다.'
]);
}
if(!is_uploaded_file($image['tmp_name'])) {
Json::die([
'result'=>false,
'reason'=>'제대로 파일이 업로드되지 않았습니다.'
]);
}
if($image['size'] > 1048576) {
//파일크기 검사
Json::die([
'result'=>false,
'reason'=>'1MB 이하로 올려주세요!'
]);
}
$size = getImageSize($image['tmp_name']);
$imageType = $size[2];
$availableImageType = array('.jpg'=>IMAGETYPE_JPEG, '.png'=>IMAGETYPE_PNG, '.gif'=>IMAGETYPE_GIF);
$newExt = array_search($imageType, $availableImageType, true);
if(!$newExt) {
Json::die([
'result'=>false,
'reason'=>'jpg, gif, png 파일이 아닙니다!'
]);
}
$db = RootDB::db();
$imgStor = KVStorage::getStorage($db, 'img_storage');
$picName = hash_file('md5', $image['tmp_name']);
$newPicName = "$picName$newExt";
$destDir = AppConf::getUserIconPathFS().'/uploaded_image';
$dest = $destDir.'/'.$newPicName;
if(!file_exists($dest)){
if (!file_exists($destDir)) {
mkdir($destDir);
}
if(!is_dir($destDir)) {
Json::die([
'result'=>false,
'reason'=>'버그! 업로드 경로 확인!'
]);
}
if(!is_writable($destDir)){
Json::die([
'result'=>false,
'reason'=>'버그! 업로드 권한 확인!'
]);
}
$dest = $destDir.'/'.$newPicName;
if(!move_uploaded_file($image['tmp_name'], $dest)) {
Json::die([
'result'=>false,
'reason'=>'업로드에 실패했습니다!'
]);
}
}
$storedStatus = $imgStor->$newPicName??[];
$imgKey = "$serverID:$userID";
if(!key_exists($imgKey, $storedStatus)){
$storedStatus[$imgKey] = TimeUtil::now();
}
$imgStor->$newPicName = $storedStatus;
Json::die([
'result'=>true,
'reason'=>'성공',
'path'=>AppConf::getUserIconPathWeb().'/uploaded_image/'.$newPicName
]);
hwe/sammo/API/Misc/UploadImage.php
+101
View File
@@ -0,0 +1,101 @@
<?php
namespace sammo\API\Misc;
use sammo\Session;
use DateTimeInterface;
use sammo\AppConf;
use sammo\KVStorage;
use sammo\RootDB;
use sammo\TimeUtil;
use sammo\UniqueConst;
use sammo\Validator;
class UploadImage extends \sammo\BaseAPI
{
public function validateArgs(): ?string
{
$v = new Validator($this->args);
$v->rule('required', [
'imageData',
]);
if (!$v->validate()) {
return $v->errorStr();
}
return null;
}
public function getRequiredSessionMode(): int
{
return static::REQ_GAME_LOGIN | static::REQ_READ_ONLY;
}
public function launch(Session $session, ?DateTimeInterface $modifiedSince, ?string $reqEtag)
{
$imageData = base64_decode($this->args['imageData'], true);
if ($imageData === false) {
return "올바른 데이터가 아닙니다.";
}
if(strlen($imageData) > 1024*1024){
//NOTE: 가변 길이를 적용해야할까?
return "이미지 크기가 1MB보다 큽니다.";
}
$contentType = (new \finfo(FILEINFO_MIME_TYPE))->buffer($imageData);
if (substr($contentType, 0, 5) !== 'image') {
return '이미지 파일이 아닙니다: ' . $contentType;
}
$extension = ltrim($contentType, 'image/');
$validExtensions = ['png', 'jpeg', 'jpg', 'gif', 'webp'];
if (!in_array(strtolower($extension), $validExtensions)) {
return '지원하지 않는 이미지 파일입니다: ' . $contentType;
}
$oMD = hash_init('md5');
hash_update($oMD, $imageData);
$imgName = hash_final($oMD);
$imgFullName = "{$imgName}.{$extension}";
$destDir = AppConf::getUserIconPathFS() . '/uploaded_image';
$destPath = "{$destDir}/{$imgFullName}";
if (!file_exists($destPath)) {
if (!file_exists($destDir)) {
mkdir($destDir);
}
if (!is_dir($destDir)) {
return '버그! 업로드 경로 확인!';
}
if (!is_writable($destDir)) {
return '버그! 업로드 권한 확인!';
}
if (!file_put_contents($destPath, $imageData)) {
return '업로드에 실패했습니다!';
}
}
$db = RootDB::db();
$imgStor = KVStorage::getStorage($db, 'img_storage');
$userID = $session->userID;
$serverID = UniqueConst::$serverID;
$storedStatus = $imgStor->$imgFullName ?? [];
$imgKey = "$serverID:$userID";
if (!key_exists($imgKey, $storedStatus)) {
$storedStatus[$imgKey] = TimeUtil::now();
}
$imgStor->$imgFullName = $storedStatus;
return [
'result' => true,
'path'=>AppConf::getUserIconPathWeb().'/uploaded_image/'.$imgFullName,
];
}
}
hwe/scss/editor_component.scss
+46
View File
@@ -0,0 +1,46 @@
.custom-image-original {
max-width: 100%;
display: block;
}
.custom-image-large {
width: 100%;
display: block;
}
.custom-image-medium {
width: 50%;
display: block;
}
.custom-image-small {
margin: auto;
width: 25%;
}
.custom-image-align-float-left{
float: left;
}
.custom-image-align-float-right{
float: right;
}
.custom-image-align-center{
margin-left: auto;
margin-right: auto;
display: block;
}
.custom-image-align-left{
margin-left: 0;
margin-right: auto;
display: block;
}
.custom-image-align-right{
margin-left: auto;
margin-right: 0;
display: block;
}
hwe/ts/PartialDipcenter.vue
+1
View File
@@ -48,6 +48,7 @@
<script lang="ts">
import "@scss/dipcenter.scss";
import "@scss/common_legacy.scss";
import "@scss/editor_component.scss";
import TipTap from "./components/TipTap.vue";
import { defineComponent } from "vue";
import { sammoAPI } from "./util/sammoAPI";
hwe/ts/components/TipTap.vue
+243 -6
View File
@@ -76,7 +76,9 @@
<b-button-group class="mx-1">
<b-button
@click="editor.chain().focus().unsetColor().unsetBackgroundColor().run()"
@click="
editor.chain().focus().unsetColor().unsetBackgroundColor().run()
"
v-b-tooltip.hover
title="색상 취소"
><i class="bi bi-droplet"></i
@@ -95,15 +97,26 @@
type="color"
class="form-control form-control-color"
:value="
colorConvert(editor.getAttributes('textStyle').backgroundColor, '#000000')
colorConvert(
editor.getAttributes('textStyle').backgroundColor,
'#000000'
)
"
@input="
editor.chain().focus().setBackgroundColor($event.target.value).run()
"
@input="editor.chain().focus().setBackgroundColor($event.target.value).run()"
v-b-tooltip.hover
title="배경색"
/>
</b-button-group>
<b-button-group class="mx-1">
<b-button
v-b-tooltip.hover
@click="showImageModal = true"
title="이미지 추가"
><i class="bi bi-image"></i
></b-button>
<!-- 이미지추가 -->
<!-- 링크 -->
<!-- 영상링크 -->
@@ -144,8 +157,7 @@
<!-- 문단정렬(왼, 가, 오, 양)(내어, 들여) -->
</b-button-group>
<b-button-group class="mx-1">
</b-button-group>
<b-button-group class="mx-1"> </b-button-group>
<b-button-group class="mx-1">
<!-- 줄간격 (1.0, 1.2, 1.4, 1.5, 1.6, 1.8, 2.0, 3.0) -->
@@ -155,19 +167,177 @@
<!-- 원본 코드 -->
</b-button-group>
</b-button-toolbar>
<bubble-menu
:tippy-options="{ animation: false, maxWidth: 600 }"
:editor="editor"
v-if="editable && editor"
v-show="editor.isActive('custom-image')"
>
<b-button-toolbar>
<b-button-group class="mx-1">
<b-button
@click="editor.chain().focus().setImage({ size: 'small' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'small',
}),
f_frac: true,
}"
v-b-tooltip.hover
title="1/4 너비로 채우기"
>1/4</b-button
>
<b-button
@click="editor.chain().focus().setImage({ size: 'medium' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'medium',
}),
f_frac: true,
}"
v-b-tooltip.hover
title="1/2 너비로 채우기"
>1/2</b-button
>
<b-button
@click="editor.chain().focus().setImage({ size: 'large' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'large',
}),
f_frac: true,
}"
v-b-tooltip.hover
title="가득 채우기"
>1</b-button
>
<b-button
@click="editor.chain().focus().setImage({ size: 'original' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
size: 'original',
}),
}"
>원본</b-button
>
</b-button-group>
<b-button-group class="mx-1">
<b-button
@click="editor.chain().focus().setImage({ align: 'float-left' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'float-left',
}),
}"
v-b-tooltip.hover
title="왼쪽으로 붙이기"
><i class="bi bi-chevron-bar-left"></i
></b-button>
<b-button
@click="editor.chain().focus().setImage({ align: 'left' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'left',
}),
}"
v-b-tooltip.hover
title="왼쪽으로"
><i class="bi bi-align-start"></i
></b-button>
<b-button
@click="editor.chain().focus().setImage({ align: 'center' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'center',
}),
}"
v-b-tooltip.hover
title="가운데로"
><i class="bi bi-align-center"></i
></b-button>
<b-button
@click="editor.chain().focus().setImage({ align: 'right' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'right',
}),
}"
v-b-tooltip.hover
title="오른쪽으로 붙이기"
><i class="bi bi-align-end"></i
></b-button>
<b-button
@click="editor.chain().focus().setImage({ align: 'float-right' }).run()"
:class="{
'is-active': editor.isActive('custom-image', {
float: 'float-right',
}),
}"
v-b-tooltip.hover
title="오른쪽으로 붙이기"
><i class="bi bi-chevron-bar-right"></i
></b-button>
</b-button-group>
</b-button-toolbar>
</bubble-menu>
<editor-content :editor="editor" />
<b-modal
v-model="showImageModal"
title="이미지 추가"
okTitle="추가"
cancelTitle="취소"
@ok="tryAddImage"
@show="resetModal"
@hidden="resetModal"
>
<div class="bg-light text-dark">
<b-form-group
label-cols-sm="4"
label-cols-lg="3"
content-cols-sm
content-cols-lg="7"
description="업로드할 파일을 선택해주세요. (jpg, png, gif, webp)"
label="이미지 업로드"
label-align="right"
:label-for="`${uuid}_image_upload`"
>
<input
class="form-control"
type="file"
:id="`${uuid}_image_upload`"
@change="chooseImage"
accept=".jpg,.jpeg,.png,.gif,.webp"
/>
</b-form-group>
<b-form-group
label-cols-sm="4"
label-cols-lg="3"
content-cols-sm
content-cols-lg="7"
description="링크할 이미지 주소를 입력해주세요."
label="이미지 링크"
label-align="right"
:label-for="`${uuid}_image_link`"
>
<b-form-input v-model="imageLink"></b-form-input>
</b-form-group>
</div>
</b-modal>
</template>
<script lang="ts">
//import "@scss/common/bootstrap5.scss";
import { defineComponent } from "vue";
import { Editor, EditorContent } from "@tiptap/vue-3";
import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
import { FontSize } from "@/tiptap-ext/FontSize";
import StarterKit from "@tiptap/starter-kit";
import Underline from "@tiptap/extension-underline";
import TextStyle from "@tiptap/extension-text-style";
import TextAlign from "@tiptap/extension-text-align";
import Color from "@tiptap/extension-color";
//import Image from "@tiptap/extension-image";
import CustomImage from "@/tiptap-ext/CustomImage";
import Link from "@tiptap/extension-link";
import { BackgroundColor } from "@/tiptap-ext/BackgroundColor";
import {
BButtonGroup,
@@ -176,11 +346,20 @@ import {
BDropdown,
BDropdownItem,
BDropdownDivider,
BModal,
} from "bootstrap-vue-3";
import { v4 as uuidv4 } from "uuid";
import { unwrap } from "@/util/unwrap";
import { getBase64FromFileObject } from "@/util/getBase64FromFileObject";
import { sammoAPI } from "@/util/sammoAPI";
import { isObject, isString } from "lodash";
import { AxiosError } from "axios";
const compoment = defineComponent({
components: {
EditorContent,
BubbleMenu,
BModal,
BButtonGroup,
BButtonToolbar,
BButton,
@@ -189,6 +368,10 @@ const compoment = defineComponent({
BDropdownDivider,
},
methods: {
chooseImage(e: Event) {
const target = unwrap(e.target) as HTMLInputElement;
this.imageUploadFiles = target.files;
},
colorConvert(val: string | undefined, defaultVal: string) {
if (!val) {
return defaultVal;
@@ -207,6 +390,54 @@ const compoment = defineComponent({
}
return val;
},
async tryAddImage(bvModalEvt: Event) {
if (this.imageUploadFiles === null || this.imageUploadFiles.length == 0) {
this.addImageLink(bvModalEvt);
return;
}
const targetImage = unwrap(this.imageUploadFiles.item(0));
let imageResult: {
result: true;
path: string;
};
try {
const base64Binary = await getBase64FromFileObject(targetImage);
imageResult = await sammoAPI("Misc/UploadImage", {
imageData: base64Binary,
});
} catch (e) {
if (isString(e)) {
alert(e);
bvModalEvt.preventDefault();
}
if (isObject(e) && "response" in e) {
const axiosErr = e as AxiosError;
if (axiosErr.response?.status === 413) {
alert("허용 용량을 초과했습니다.");
bvModalEvt.preventDefault();
}
}
console.error(e);
return false;
}
const imagePath = imageResult.path;
this.editor.chain().focus().setImage({ src: imagePath }).run();
},
addImageLink(bvModalEvt: Event) {
if (!this.imageLink) {
alert("업로드할 이미지를 선택하거나, 이미지 주소를 입력해주세요.");
bvModalEvt.preventDefault();
return false;
}
this.editor.chain().focus().setImage({ src: this.imageLink }).run();
},
resetModal() {
this.imageLink = "";
this.imageUploadFiles = null;
},
},
props: {
@@ -221,6 +452,7 @@ const compoment = defineComponent({
},
data() {
return {
uuid: uuidv4(),
editor: null as unknown as InstanceType<typeof Editor>,
fontList: ["Pretendard", "맑은 고딕", "궁서", "돋움"],
fontSize: [
@@ -235,6 +467,9 @@ const compoment = defineComponent({
"48px",
"72px",
],
imageUploadFiles: null as FileList | null,
imageLink: "",
showImageModal: false,
};
},
@@ -272,6 +507,8 @@ const compoment = defineComponent({
BackgroundColor.configure({
types: ["textStyle"],
}),
CustomImage,
Link,
],
editable: this.editable,
content: this.modelValue,
hwe/ts/tiptap-ext/CustomImage.ts
+82
View File
@@ -0,0 +1,82 @@
//https://github.com/joevallender/tiptap2-image-example/blob/main/src/extensions/custom-image-3.js
import Image, { ImageOptions } from '@tiptap/extension-image'
import { mergeAttributes } from '@tiptap/core'
export interface CustomImageOptions extends ImageOptions {
sizes: string[],
}
declare module '@tiptap/core' {
interface Commands<ReturnType> {
setImage: (options: { src: string, alt?: string, title?: string, size: string }) => ReturnType,
}
}
export default Image.extend<CustomImageOptions>({
name: 'custom-image',
addOptions() {
return {
...Image.options,
sizes: ['original', 'small', 'medium', 'large'],
}
},
addAttributes() {
return {
src: {
default: null,
},
alt: {
default: null,
},
title: {
default: null,
},
size: {
default: 'original',
rendered: false
},
align: {
default: 'center',
rendered: false
}
}
},
addCommands() {
return {
// This is unchanged from the original
// Image setImage function
// However, if I extended addComands in
// the same way as addAttributes `this`
// seemed to lose context, so I've just
// copied it in here directly
setImage: (options) => ({ tr, commands }) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
if (tr.selection?.node?.type?.name == 'custom-image') {
return commands.updateAttributes('custom-image', options)
}
else {
return commands.insertContent({
type: this.name,
attrs: options
})
}
},
}
},
renderHTML({ node, HTMLAttributes }) {
// When we render the HTML, grab the
// size and add an appropriate
// corresponding class
HTMLAttributes.class = ' custom-image-' + node.attrs.size;
HTMLAttributes.class += ' custom-image-align-' + node.attrs.align;
return [
'img',
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
]
}
})
hwe/ts/util/getBase64FromFileObject.ts
+17
View File
@@ -0,0 +1,17 @@
import { unwrap } from "./unwrap";
//https://stackoverflow.com/questions/36280818/how-to-convert-file-to-base64-in-javascript
export function getBase64FromFileObject(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
let encoded = unwrap(reader.result).toString().replace(/^data:(.*,)?/, '');
if ((encoded.length % 4) > 0) {
encoded += '='.repeat(4 - (encoded.length % 4));
}
resolve(encoded);
};
reader.onerror = error => reject(error);
});
}
package.json
+4
View File
@@ -19,6 +19,7 @@
"license": "MIT",
"type": "module",
"dependencies": {
"@popperjs/core": "^2.11.0",
"@tiptap/extension-color": "^2.0.0-beta.9",
"@tiptap/extension-image": "^2.0.0-beta.24",
"@tiptap/extension-link": "^2.0.0-beta.33",
@@ -32,11 +33,13 @@
"@types/linkifyjs": "^2.1.4",
"@types/quill": "^2.0.9",
"@types/select2": "^4.0.54",
"@types/uuid": "^8.3.3",
"@vueup/vue-quill": "^1.0.0-beta.7",
"async-validator": "^4.0.7",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"bootstrap-vue-3": "^0.1.0",
"buffer": "^6.0.3",
"core-js": "^3.19.3",
"date-fns": "^2.27.0",
"downloadjs": "^1.4.7",
@@ -47,6 +50,7 @@
"lodash": "^4.17.21",
"query-string": "^7.0.1",
"select2": "^4.0",
"uuid": "^8.3.2",
"vue": "^3.2.2",
"vue-multiselect": "^3.0.0-alpha.2",
"vue-types": "^4.1.1",
webpack.config.cjs
+1 -1
View File
@@ -95,7 +95,7 @@ module.exports = (env, argv) => {
'@': tsDir,
'@scss': path.resolve(tsDir, '../scss'),
'@util': path.resolve(tsDir, 'util'),
}
},
},
mode,
entry: entryIngameVue,