forked from opentiny/tiny-vue
docs(fluent-editor): optimize fluent-editor mobile-first docs (#1804)
This commit is contained in:
GitHub
parent
072d888daf
commit
7054c15dee
|
|
@ -38,6 +38,18 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'disabled'
|
||||
},
|
||||
{
|
||||
name: 'image-upload',
|
||||
typeAnchorName: 'IImageUploadOptions',
|
||||
type: 'IImageUploadOptions',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '图片上传模块配置项',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'image-upload'
|
||||
},
|
||||
{
|
||||
name: 'modelValue / v-model',
|
||||
type: 'string',
|
||||
|
|
@ -48,11 +60,51 @@ export default {
|
|||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'options',
|
||||
type: 'object',
|
||||
defaultValue: "",
|
||||
desc: {
|
||||
'zh-CN': '编辑器配置项，参考 <a href="https://quilljs.com/docs/configuration#options" target="_blank">Quill</a> 文档',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'options'
|
||||
},
|
||||
{
|
||||
name: 'zIndex',
|
||||
type: 'number',
|
||||
defaultValue: "",
|
||||
desc: {
|
||||
'zh-CN': '编辑器的 z-index',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage'
|
||||
}
|
||||
],
|
||||
events: [],
|
||||
methods: [],
|
||||
slots: []
|
||||
}
|
||||
],
|
||||
types: [
|
||||
{
|
||||
name: 'IImageUploadOptions',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IImageUploadOptions {
|
||||
url: string, // 图片上传地址
|
||||
method: string, // 上传方法
|
||||
name: string, // 图片名称
|
||||
withCredentials: boolean, // 是否需要认证，开启后会在请求里带上 cookie 信息
|
||||
headers: object, // 上传请求头部信息
|
||||
csrf: string, // 请求 csrf 携带信息
|
||||
success: (serverResponse: { file: { downloadUrl: string } }[], next: (imageUrl: string) => void) => void, // 上传成功回调信息
|
||||
fail: (serverError: string) => void // 上传失败回调信息
|
||||
}
|
||||
`
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content" :zIndex="2"></tiny-fluent-editor>
|
||||
<tiny-fluent-editor v-model="content"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ content }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="value" :data-type="false" :data-upgrade="false"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ value }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFluentEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '<p>Hello <strong>FluentEditor</strong>!</p>'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content" disabled></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,46 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content" :image-upload="imageUpload"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ content }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Modal } from '@opentiny/vue'
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFluentEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '{"ops":[{"insert":"Hello "},{"attributes":{"bold":true},"insert":"FluentEditor"},{"insert":"!"}]}',
|
||||
imageUpload: {
|
||||
url: 'https://run.mocky.io/v3/f34365b4-679d-4e8f-8313-ddb11d6750be',
|
||||
method: 'POST',
|
||||
name: 'image',
|
||||
withCredentials: true,
|
||||
headers: {},
|
||||
success: (serverResponse, next) => {
|
||||
let file = {}
|
||||
|
||||
for (const key in serverResponse) {
|
||||
file = serverResponse[key]
|
||||
break
|
||||
}
|
||||
|
||||
next(file.downloadUrl)
|
||||
},
|
||||
fail: (serverError) => {
|
||||
Modal.message({
|
||||
message: `上传失败回调事件：${serverError}`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-fluent-editor v-model="content" :options="options"></tiny-fluent-editor>
|
||||
内容：<br />
|
||||
{{ content }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TinyFluentEditor from '@opentiny/vue-fluent-editor'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFluentEditor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
content: '',
|
||||
options: {
|
||||
placeholder: '请输入内容'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,6 +13,56 @@ export default {
|
|||
'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']
|
||||
},
|
||||
{
|
||||
demoId: 'image-upload',
|
||||
name: {
|
||||
'zh-CN': '图片上传',
|
||||
'en-US': 'Image Upload'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>image-upload</code> 设置图片上传模块的配置项。',
|
||||
'en-US': ''
|
||||
},
|
||||
codeFiles: ['image-upload.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'options',
|
||||
name: {
|
||||
'zh-CN': '编辑器配置',
|
||||
'en-US': ''
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>options</code> 设置编辑器的配置项，支持的配置项和 Quill 的相同，可参考 <a href="https://quilljs.com/docs/configuration#options" target="_blank">Quill</a> 文档。',
|
||||
'en-US': ''
|
||||
},
|
||||
codeFiles: ['options.vue']
|
||||
},
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const toolbar = (FluentEditor) => {
|
|||
[{ direction: 'rtl' }],
|
||||
[{ color: [] }, { background: [] }],
|
||||
[{ align: [] }],
|
||||
['link', 'image', 'video', 'file'],
|
||||
['link', 'image'],
|
||||
['better-table'],
|
||||
['fullscreen']
|
||||
]
|
||||
|
|
|
|||
|
|
@ -72,6 +72,8 @@
|
|||
}
|
||||
|
||||
span.ql-lineheight {
|
||||
margin-right: 24px !important;
|
||||
|
||||
> span {
|
||||
width: 60px;
|
||||
}
|
||||
|
|
@ -106,6 +108,10 @@
|
|||
background-color: rgba(25, 25, 25, 0.1);
|
||||
color: #191919;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -83,6 +83,7 @@ export default defineComponent({
|
|||
IconCloudUpload: IconCloudUpload(),
|
||||
IconFullscreen: IconFullscreen()
|
||||
},
|
||||
emits: ['ready', 'blur', 'focus', 'update:modelValue', 'change'],
|
||||
props: [
|
||||
...props,
|
||||
'_constants',
|
||||
|
|
|
|||
Loading…
Reference in New Issue