-
-
Notifications
You must be signed in to change notification settings - Fork 3.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
84be24e
commit f9b4c68
Showing
15 changed files
with
282 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -71,7 +71,18 @@ window.initContent = [ | |
}, | ||
{ | ||
type: 'paragraph', | ||
children: [{ text: '一行文字' }], | ||
children: [ | ||
{ text: '一行文字' }, | ||
{ | ||
type: 'image', | ||
src: 'https://www.baidu.com/img/flexible/logo/pc/[email protected]', | ||
alt: '百度', | ||
url: 'https://www.baidu.com/', | ||
style: { width: '101px', height: '33px' }, | ||
children: [{ text: '' }], // void node 要有一个空 text | ||
}, | ||
{ text: '一行文字' }, | ||
], | ||
}, | ||
{ | ||
type: 'blockquote', | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,32 +1,37 @@ | ||
// 拖拽,修改图片尺寸 | ||
.w-e-selected-image-container { | ||
position: relative; | ||
display: inline-block; | ||
|
||
.w-e-image-dragger { | ||
width: 7px; | ||
height: 7px; | ||
background-color: #4290f7; | ||
position: absolute; | ||
} | ||
.left-top { | ||
top: -4px; | ||
left: 0; | ||
cursor: nwse-resize; | ||
} | ||
.right-top { | ||
top: -4px; | ||
right: 0; | ||
cursor: nesw-resize; | ||
.w-e-text-container [data-slate-editor] { | ||
.w-e-image-container { | ||
display: inline-block; | ||
} | ||
.left-bottom { | ||
left: 0; | ||
bottom: 0; | ||
cursor: nesw-resize; | ||
} | ||
.right-bottom { | ||
right: 0; | ||
bottom: 0; | ||
cursor: nwse-resize; | ||
.w-e-selected-image-container { | ||
position: relative; | ||
overflow: hidden; | ||
|
||
.w-e-image-dragger { | ||
width: 7px; | ||
height: 7px; | ||
background-color: #4290f7; | ||
position: absolute; | ||
} | ||
.left-top { | ||
top: 0; | ||
left: 0; | ||
cursor: nwse-resize; | ||
} | ||
.right-top { | ||
top: 0; | ||
right: 0; | ||
cursor: nesw-resize; | ||
} | ||
.left-bottom { | ||
left: 0; | ||
bottom: 0; | ||
cursor: nesw-resize; | ||
} | ||
.right-bottom { | ||
right: 0; | ||
bottom: 0; | ||
cursor: nwse-resize; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/** | ||
* @description image width 100% | ||
* @author wangfupeng | ||
*/ | ||
|
||
import ImageWidthBaseClass from './WidthBase' | ||
|
||
class ImageWidth100 extends ImageWidthBaseClass { | ||
title = '100%' // 菜单标题 | ||
value = '100%' // css width 的值 | ||
} | ||
|
||
export default ImageWidth100 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
/** | ||
* @description image width 50% | ||
* @author wangfupeng | ||
*/ | ||
|
||
import ImageWidthBaseClass from './WidthBase' | ||
|
||
class ImageWidth50 extends ImageWidthBaseClass { | ||
title = '50%' // 菜单标题 | ||
value = '50%' // css width 的值 | ||
} | ||
|
||
export default ImageWidth50 |
65 changes: 65 additions & 0 deletions
65
packages/basic-modules/src/modules/image/menu/WidthBase.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
/** | ||
* @description image width base class | ||
* @author wangfupeng | ||
*/ | ||
|
||
import { Transforms, Node } from 'slate' | ||
import { IButtonMenu, IDomEditor } from '@wangeditor/core' | ||
import { checkNodeType, getSelectedNodeByType } from '../../_helpers/node' | ||
|
||
abstract class ImageWidthBaseClass implements IButtonMenu { | ||
abstract title: string // 菜单标题 | ||
tag = 'button' | ||
abstract value: string // css width 的值 | ||
|
||
getValue(editor: IDomEditor): string | boolean { | ||
// 无需获取 val | ||
return '' | ||
} | ||
|
||
isActive(editor: IDomEditor): boolean { | ||
// 无需 active | ||
return false | ||
} | ||
|
||
private getSelectedNode(editor: IDomEditor): Node | null { | ||
return getSelectedNodeByType(editor, 'image') | ||
} | ||
|
||
isDisabled(editor: IDomEditor): boolean { | ||
if (editor.selection == null) return true | ||
|
||
const imageNode = this.getSelectedNode(editor) | ||
if (imageNode == null) { | ||
// 选区未处于 image node ,则禁用 | ||
return true | ||
} | ||
return false | ||
} | ||
|
||
exec(editor: IDomEditor, value: string | boolean) { | ||
if (this.isDisabled(editor)) return | ||
|
||
const imageNode = this.getSelectedNode(editor) | ||
if (imageNode == null) return | ||
|
||
// @ts-ignore | ||
const { style = {} } = imageNode | ||
const newStyle = { | ||
...style, | ||
width: this.value, // 修改 width | ||
height: '', // 清空 height | ||
} | ||
|
||
Transforms.setNodes( | ||
editor, | ||
// @ts-ignore | ||
{ style: newStyle }, | ||
{ | ||
match: n => checkNodeType(n, 'image'), | ||
} | ||
) | ||
} | ||
} | ||
|
||
export default ImageWidthBaseClass |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.