docs(fluent-editor): fix text exceeding problem caused by too long co…

…ntent in the fluent-editor component demo (#2711)

* docs(fluent-editor): fixed text exceeding problem caused by too long content in the fluent-editor component demo

* docs(fluent-editor): remove useless demo code

examples/sites/demos/pc/app/fluent-editor/basic-usage-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+  <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+  <div class="fluent-editor-demo__basic-usage__content">
     内容：<br />
     {{ content }}
   </div>
@@ -12,3 +12,11 @@ import { TinyFluentEditor } from '@opentiny/vue'
 
 const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
 </script>
+
+<style scoped>
+.fluent-editor-demo__basic-usage__content {
+  margin: 16px 0;
+  line-height: 1.5;
+  word-break: break-word;
+}
+</style>

examples/sites/demos/pc/app/fluent-editor/basic-usage.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+  <tiny-fluent-editor v-model="content"></tiny-fluent-editor>
+  <div class="fluent-editor-demo__basic-usage__content">
     内容：<br />
     {{ content }}
   </div>
@@ -20,3 +20,11 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.fluent-editor-demo__basic-usage__content {
+  margin: 16px 0;
+  line-height: 1.5;
+  word-break: break-word;
+}
+</style>

examples/sites/demos/pc/app/fluent-editor/before-editor-init-composition-api.vue

@@ -1,14 +1,10 @@
 <template>
-  <div>
-    <tiny-fluent-editor
-      ref="fluentEditorRef"
-      v-model="content"
-      :before-editor-init="beforeEditorInit"
-      :options="editorOptions"
-    ></tiny-fluent-editor>
-    内容：<br />
-    {{ content }}
-  </div>
+  <tiny-fluent-editor
+    ref="fluentEditorRef"
+    v-model="content"
+    :before-editor-init="beforeEditorInit"
+    :options="editorOptions"
+  ></tiny-fluent-editor>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/fluent-editor/before-editor-init.vue

@@ -1,14 +1,10 @@
 <template>
-  <div>
-    <tiny-fluent-editor
-      ref="fluentEditorRef"
-      v-model="content"
-      :before-editor-init="beforeEditorInit"
-      :options="editorOptions"
-    ></tiny-fluent-editor>
-    内容：<br />
-    {{ content }}
-  </div>
+  <tiny-fluent-editor
+    ref="fluentEditorRef"
+    v-model="content"
+    :before-editor-init="beforeEditorInit"
+    :options="editorOptions"
+  ></tiny-fluent-editor>
 </template>
 
 <script>

examples/sites/demos/pc/app/fluent-editor/data-switch-composition-api.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
-    内容：<br />
-    {{ value }}
-  </div>
+  <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/fluent-editor/data-switch.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
-    内容：<br />
-    {{ value }}
-  </div>
+  <tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
 </template>
 
 <script>

examples/sites/demos/pc/app/fluent-editor/disabled-composition-api.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
-  </div>
+  <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/fluent-editor/disabled.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
-  </div>
+  <tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
 </template>
 
 <script>

examples/sites/demos/pc/app/fluent-editor/image-upload-composition-api.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
-    内容：<br />
-    {{ content }}
-  </div>
+  <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/fluent-editor/image-upload.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
-    内容：<br />
-    {{ content }}
-  </div>
+  <tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
 </template>
 
 <script>

examples/sites/demos/pc/app/fluent-editor/options-composition-api.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
-    内容：<br />
-    {{ content }}
-  </div>
+  <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
 </template>
 
 <script setup>

examples/sites/demos/pc/app/fluent-editor/options.vue

@@ -1,9 +1,5 @@
 <template>
-  <div>
-    <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
-    内容：<br />
-    {{ content }}
-  </div>
+  <tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
 </template>
 
 <script>