docs(fluent-editor): add formula demo (#2516)

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

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :options="options" ref="editorRef"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { TinyFluentEditor } from '@opentiny/vue'
+
+// 引入 mathlive 模块和样式
+import 'mathlive'
+import 'mathlive/static.css'
+import 'mathlive/fonts.css'
+
+const editorRef = ref()
+
+const content = ref('{"ops":[{"insert":{"mathlive":{"value":"\\sum_{i=1}^{n} i^2","mode":"dialog"}}},{"insert":"\n"}]}')
+
+const options = ref({
+  modules: {
+    // 工具栏
+    toolbar: ['formula'],
+    // 可编辑公式
+    mathlive: true
+  }
+})
+
+onMounted(() => {
+  editorRef.value.state.quill.setContents({
+    'ops': [{ 'insert': { 'mathlive': { 'value': '\\sum_{i=1}^{n} i^2', 'mode': 'dialog' } } }, { 'insert': '\n' }]
+  })
+})
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <tiny-fluent-editor v-model="content" :options="options" ref="editorRef"></tiny-fluent-editor>
+    内容：<br />
+    {{ content }}
+  </div>
+</template>
+
+<script>
+import { TinyFluentEditor } from '@opentiny/vue'
+
+// 引入 mathlive 模块和样式
+import 'mathlive'
+import 'mathlive/static.css'
+import 'mathlive/fonts.css'
+
+export default {
+  components: {
+    TinyFluentEditor
+  },
+  data() {
+    return {
+      content: '{"ops":[{"insert":{"mathlive":{"value":"\\sum_{i=1}^{n} i^2","mode":"dialog"}}},{"insert":"\n"}]}',
+      options: {
+        modules: {
+          // 工具栏
+          toolbar: ['formula'],
+          // 可编辑公式
+          mathlive: true
+        }
+      }
+    }
+  },
+  mounted() {
+    this.$refs.editorRef.state.quill.setContents({
+      'ops': [{ 'insert': { 'mathlive': { 'value': '\\sum_{i=1}^{n} i^2', 'mode': 'dialog' } } }, { 'insert': '\n' }]
+    })
+  }
+}
+</script>

examples/sites/demos/pc/app/fluent-editor/webdoc/fluent-editor.js

@@ -51,6 +51,18 @@ export default {
       },
       codeFiles: ['options.vue']
     },
+    {
+      demoId: 'formula',
+      name: {
+        'zh-CN': '可编辑公式',
+        'en-US': 'Formula'
+      },
+      desc: {
+        'zh-CN': '通过设置 <code>options</code> 中的 <code>mathlive</code> 为 true 开启可编辑公式功能。',
+        'en-US': ''
+      },
+      codeFiles: ['options-formula.vue']
+    },
     {
       demoId: 'data-switch',
       name: {

examples/sites/package.json

@@ -41,6 +41,7 @@
     "github-markdown-css": "^5.1.0",
     "highlight.js": "^11.5.1",
     "marked": "^4.3.0",
+    "mathlive": "^0.101.1",
     "prismjs": "^1.28.0",
     "sortablejs": "1.15.0",
     "tailwindcss": "^3.2.4",

packages/vue/src/fluent-editor/package.json

@@ -11,7 +11,7 @@
     "//postversion": "pnpm build"
   },
   "dependencies": {
-    "@opentiny/fluent-editor": "~3.20.0",
+    "@opentiny/fluent-editor": "~3.22.0",
     "@opentiny/vue-common": "workspace:~",
     "@opentiny/vue-icon": "workspace:~",
     "@opentiny/vue-image-viewer": "workspace:~",