# Week1C<br>
## A simple Subtitle Editor with only keyboard
[TOC]
----
Made by FanRende (030Mortal#5525)
<img src="" width="60%">
---
友人: 我想要一個可以
全部用鍵盤來編輯字幕檔的東東
我: 豪
----
## 架構介紹
Vue + Vite + TS
Vuetify
(Electron)
---
## CodeMirror
[官網](https://codemirror.net/)
前端如果有文字編輯器的需求可以用
----
### vue-codemirror
[github](https://github.com/surmon-china/vue-codemirror)
在 Vue 中用 CodeMirror
----
```typescript
<script setup lant=ts>
const handleReady = (cm: {
view: EditorView;
state: EditorState;
container: HTMLDivElement;
}) => {
console.log(cm);
view.value = cm.view;
container.value = cm.container;
};
</script>
<template>
<codemirror
ref="codemirrorRef"
v-model="subtitle"
placeholder="空空如也~~"
:style="{ height: '70vh' }"
:indent-with-tab="true"
:tab-size="2"
:extensions="extensions"
@ready="handleReady"
@update="onViewUpdate"
/>
</template>
```
---
## Video.js
[官網](https://videojs.com/)
----
### vue-videojs
[github](https://github.com/surmon-china/videojs-player)
---
參考 / 延伸閱讀:
- [CodeMirror](https://codemirror.net/)
- [Video.js](https://videojs.com/)
- [Building a Vue 3 Desktop App with Vite and Electron](https://learnvue.co/articles/vue-and-electron-desktop-apps)
<div class="flex-container">
<div class="flex-content">
</div>
<div class="flex-content">
</div>
</div>
<style>
.gray {
color: gray;
font-size: 0.5em;
}
.slides .rust {
font-size: 0.75em !important;
line-height: 1.2em !important;
}
.mermaid {
background-color: rgba(1, 1, 1, .2) !important;
}
.slides code {
background-color: #444 !important;
border-radius: 10px;
white-space : pre-wrap !important;
padding-right: 0.1em;
padding-left: 0.1em;
}
.code-wrapper code {
background-color: inherit !important;
border-radius: inherit;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-content {
flex-grow: 1;
font-size: 0.7em;
}
.small {
font-size: 0.9em;
}
</style>
<style>
/* Customize website's scrollbar like Mac OS */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(128, 128, 128, 1);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
</style>
{"title":"Week1C - A simple subtitle editor with only keyboard","slideOptions":"{\"theme\":\"dark\",\"transition\":\"fade\",\"previewLinks\":false}","description":"","contributors":"[{\"id\":\"82f6b599-31b8-4112-9dc5-7d7b7d6a3ebb\",\"add\":2763,\"del\":15}]"}