diff --git a/package.json b/package.json
index 811347c..575feea 100644
--- a/package.json
+++ b/package.json
@@ -11,5 +11,8 @@
     "url": "https://git.faronear.org/npm/unip.part"
   },
   "author": "luk.lu",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "vuedraggable": "^2.24.0"
+  }
 }
diff --git a/ucStoryEditor/ucStoryEditor.vue b/ucStoryEditor/ucStoryEditor.vue
new file mode 100644
index 0000000..2715866
--- /dev/null
+++ b/ucStoryEditor/ucStoryEditor.vue
@@ -0,0 +1,137 @@
+<script>
+// #ifdef H5
+import draggable from 'vuedraggable'
+// #endif
+
+export default {
+  // #ifdef H5
+  components: {
+    draggable,
+  },
+  // #endif
+  props: {
+    storyContent: {
+      type: Array,
+      default: ()=>[],
+    },
+    allowImage: {
+      type: Boolean,
+      default: true,
+    },
+    allowVideo: {
+      type: Boolean,
+      default: false,
+    },
+    //   onClick: {
+    //     type: Function,
+    //     default: null,
+    //   },
+  },
+  data() {
+    return {}
+  },
+  onLoad() {},
+  onShow() {},
+  methods: {
+    addText() {
+      if (!Array.isArray(this.storyContent)) {
+        this.storyContent = []
+      }
+      this.storyContent.push({ text: '' })
+      console.log(this.storyContent)
+    },
+    async addImage() {
+      if (!Array.isArray(this.storyContent)) {
+        this.storyContent = []
+      }
+      let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'image' })
+      if (_state === 'SUCCESS') {
+        this.storyContent.push({ image: fileID })
+      }
+    },
+    async addVideo() {
+      if (!Array.isArray(this.storyContent)) {
+        this.storyContent = []
+      }
+      let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'video' })
+      if (_state === 'SUCCESS') {
+        this.storyContent.push({ video: fileID })
+      }
+    },
+    deleteSection(index) {
+      if (this.storyContent[index].text || this.storyContent[index].image || this.storyContent[index].video) {
+        uni.showModal({
+          title: this.$ll({deDE:'Sind Sie sicher den Abschnitt zu entfernen?', enUS:'Are you sure to delete this section?', zhCN:'真的要删除这个段落吗？'}),
+          content: this.storyContent[index].text ? this.storyContent[index].text : '',
+          success: ({ confirm, cancel }) => {
+            if (confirm) {
+              this.storyContent.splice(index, 1)
+              if (this.storyContent.length === 0) {
+                this.storyContent.push({ text: '' })
+              }
+            }
+          },
+        })
+      } else {
+        if (this.storyContent.length > 1) {
+          this.storyContent.splice(index, 1)
+        } else {
+          this.$message({ type: 'warning', message: this.$ll({zhCN:'不能删除唯一的段落', enUS:'Cannot delete the last section', deDE:'Der letzte Abschnitt kann nicht entfernen'}) })
+        }
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <view style="display: flex; flex-flow: column nowrap; box-sizing: border-box">
+    <view>
+      <!-- #ifdef H5 -->
+      <draggable v-model="storyContent">
+        <!-- #endif -->
+        <view v-for="(section, index) of storyContent" :key="index" style="margin: 5px; position: relative">
+          <textarea
+            v-if="section.text !== undefined"
+            v-model="section.text"
+            maxlength="-1"
+            auto-height="true"
+            style="box-sizing: border-box; line-height: 1.5em; min-height: 3em; width: 100%; padding: 0 5px; border: 1px solid #eee; background: white"
+            placeholder=""
+            placeholder-style="font-size:small"
+          ></textarea>
+          <img v-if="section.image" :src="section.image" style="width: 100%" />
+          <video v-if="section.video" :src="section.video" style="width: 100%"></video>
+          <i
+            class="el-icon-circle-close"
+            style="position: absolute; top: 0px; right: -10px; border-radius: 100%; cursor: pointer; font-size: 20px"
+            @click="deleteSection(index)"
+          ></i>
+        </view>
+        <!-- #ifdef H5 -->
+      </draggable>
+      <!-- #endif -->
+    </view>
+
+    <view class="sActionBar">
+      <view style="display: flex; flex-flow: row nowrap; align-items: center; width: 100%">
+        <el-button size="mini" type="primary" icon="" @click="addText">{{ $ll({deDE:'Text', enUS:'Text', zhCN:'文字'}) }}</el-button>
+        <el-button v-if="allowImage" size="mini" type="primary" icon="" @click="addImage">{{ $ll({deDE:'Bild', enUS:'Image', zhCN:'图片'}) }}</el-button>
+        <el-button v-if="allowVideo" size="mini" type="primary" icon="" @click="addVideo">{{ $ll({deDE:'Video', enUS:'Video', zhCN:'视频'}) }}</el-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.sActionBar {
+  width: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  padding: 5px;
+  .u-btn {
+    margin: 5px 5px;
+  }
+}
+</style>
diff --git a/ucStoryReader/ucStoryReader.vue b/ucStoryReader/ucStoryReader.vue
new file mode 100644
index 0000000..78b4fbf
--- /dev/null
+++ b/ucStoryReader/ucStoryReader.vue
@@ -0,0 +1,38 @@
+<script>
+export default {
+  props: {
+    storyContent: {
+      type: Array,
+      default: ()=>[],
+    },
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+  },
+  onLoad() {},
+  onShow() {
+  },
+  methods: {},
+}
+</script>
+
+<template>
+  <view style="display: flex; flex-flow: column nowrap;">
+      <view
+        v-for="(section, index) of storyContent"
+        :key="index"
+        style="display: flex; flex-flow: column nowrap; padding: 5px; position: relative;"
+      >
+        <text v-if="section.text !== undefined" style="box-sizing: border-box; width: 100%; padding: 5px;">{{ section.text }}</text>
+        <img v-if="section.image" :src="section.image" style="width: 100%;" />
+        <video v-if="section.video" :src="section.video" style="width: 100%;" autoplay></video>
+      </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+
+</style>