forked from opentiny/tiny-vue
docs(fluent-editor): optimize demo/api docs (#1757)
This commit is contained in:
GitHub
parent
6cd4c5072c
commit
e3abd8c05e
|
|
@ -0,0 +1,58 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
apis: [
|
||||
{
|
||||
name: 'fluent-editor',
|
||||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'data-type',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '初始化的富文本数据格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-switch'
|
||||
},
|
||||
{
|
||||
name: 'data-upgrade',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '富文本数据输出格式是否为 Delta 格式，默认为 Delta 格式，设置成 false，则为 HTML 格式',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'data-switch'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否为不可编辑状态',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'disabled'
|
||||
},
|
||||
{
|
||||
name: 'modelValue / v-model',
|
||||
type: 'string',
|
||||
defaultValue: "''",
|
||||
desc: {
|
||||
'zh-CN': '绑定值',
|
||||
'en-US': 'Bound Value'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
}
|
||||
],
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ content }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ content }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFluentEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ value }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
const value = ref('<p>Hello <strong>FluentEditor</strong>!</p>')
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ content }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFluentEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content" disabled></tiny-fluent-editor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
const content = ref('{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}')
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ content }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFluentEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: FluentEditor 富文本
|
||||
---
|
||||
|
||||
# FluentEditor 富文本
|
||||
|
||||
<div>用于创建和编辑富文本内容。</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: FluentEditor
|
||||
---
|
||||
|
||||
# FluentEditor
|
||||
|
||||
<div>FluentEditor is a rich text component used to create and edit rich text content.</div>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
metaData: {
|
||||
experimental: '3.17.0'
|
||||
},
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>v-model</code> 设置绑定值，默认数据保存格式为 Delta 数据格式。',
|
||||
'en-US': 'You can refer to component label.'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'data-switch',
|
||||
name: {
|
||||
'zh-CN': '数据格式转换',
|
||||
'en-US': 'Vertical divider line'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>data-type</code> 指定富文本数据保存的格式。数据默认保存格式为 Delta 形式，若需要将数据保存格式设置为 HTML 形式，并关闭 HTML 格式自动转 Delta 格式，设置 <code>:data-type="false"</code>，<code>:data-upgrade="false"</code>。</p>',
|
||||
'en-US': '<p>The direction of the separator line can be set through the<code>direction</code>attribute.</p>'
|
||||
},
|
||||
codeFiles: ['data-switch.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用态',
|
||||
'en-US': 'The position of the separator copy'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过属性 <code>disabled</code> 可设置编辑器为不可编辑状态。</p>',
|
||||
'en-US':
|
||||
'<p>The position of the separator text can be set through the<code>content position</code>attribute.</p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -128,6 +128,12 @@ export const cmpMenus = [
|
|||
{ 'nameCn': '日期选择器', 'name': 'DatePicker', 'key': 'date-picker' },
|
||||
{ 'nameCn': '下拉时间', 'name': 'DropTimes', 'key': 'drop-times' },
|
||||
{ 'nameCn': '文件上传', 'name': 'FileUpload', 'key': 'file-upload' },
|
||||
{
|
||||
'nameCn': '富文本',
|
||||
'name': 'FluentEditor',
|
||||
'key': 'fluent-editor',
|
||||
'mark': { 'type': 'warning', 'text': 'Beta' }
|
||||
},
|
||||
{ 'nameCn': '表单', 'name': 'Form', 'key': 'form' },
|
||||
{ 'nameCn': '输入框', 'name': 'Input', 'key': 'input' },
|
||||
{ 'nameCn': ' IP地址输入框', 'name': 'IpAddress', 'key': 'ip-address' },
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
"@opentiny/vue-design-saas": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@opentiny/vue-directive": "workspace:~",
|
||||
"@opentiny/vue-fluent-editor": "workspace:~",
|
||||
"@opentiny/vue-icon": "workspace:~",
|
||||
"@opentiny/vue-icon-saas": "workspace:~",
|
||||
"@opentiny/vue-repl": "^1.1.2",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
{
|
||||
"name": "@opentiny/fluent-editor",
|
||||
"version": "0.1.0",
|
||||
"main": "dist/index.cjs.js",
|
||||
"version": "3.17.0",
|
||||
"main": "dist/index.js",
|
||||
"files": [
|
||||
"dist/*"
|
||||
],
|
||||
"module": "dist/index.es.js",
|
||||
"module": "dist/index.mjs",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.es.js",
|
||||
"require": "./dist/index.cjs.js"
|
||||
"import": "./dist/index.mjs",
|
||||
"require": "./dist/index.js"
|
||||
},
|
||||
"./dist/style.css": {
|
||||
"import": "./dist/style.css",
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
"dependencies": {
|
||||
"highlight.js": "^10.2.0",
|
||||
"html2canvas": "^1.0.0-rc.7",
|
||||
"quill": "^2.0.0-dev.4",
|
||||
"quill": "2.0.0-dev.4",
|
||||
"quill-delta": "^5.1.0"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue