zhoujunyu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(Rich Text Editor): Fix bugs in the Rich Text Editor (#616) 

* Fix rich-text-edtior functionality and style issues

* fix(Rich Text Editor): Fix bugs in the Rich Text Editor
This commit is contained in:
shonen7 2023-10-23 15:33:43 +08:00 committed by GitHub
parent 251866d80a
commit ff84e6522d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 97 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/renderless/src/rich-text-edtior/vue.ts
View File

@ -67,33 +67,33 @@ export const renderless = (
let toolBar = [
'bold',
'italic',
'link',
'unlink',
'highlight',
'underline',
'strike',
'subscript',
'superscript',
'quote',
'code',
'codeBlock',
'unorderedlist',
'orderedlist',
'taskList',
'quote',
'codeBlock',
'formatClear',
'nodeDelete',
'subscript',
'superscript',
// 'nodeDelete',
'undo',
'redo',
'left',
'center',
'right',
'h-box',
'font-size',
'line-height',
'h-box',
'img',
'highlight',
'color',
'table',
'backgroundColor'
'backgroundColor',
'formatClear',
'link',
'unlink',
'img',
'table'
]
if (props.customToolBar) {
toolBar = props.customToolBar

83
packages/theme/src/rich-text-editor/index.less
View File

@ -15,6 +15,45 @@
text-decoration: underline;
}
h1 {
font-size: 2em;
margin-block-start: 0.67em;
margin-block-end: 0.67em;
font-weight: bold;
}
h2 {
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-weight: bold;
}
h3 {
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
font-weight: bold;
}
h4 {
margin-block-start: 1.33em;
margin-block-end: 1.33em;
font-weight: bold;
}
h5 {
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}
h6 {
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
}
height: 100%;
&__toolbar {
@ -71,20 +110,32 @@
.h-options {
position: absolute;
background-color: #dfdede;
padding: .15rem;
background-color: var(--ti-rich-text-edito-options-bg-color);
left: 0px;
display: none;
border-radius: .4rem;
border-radius: var(--ti-rich-text-edito-options-border-radius);
box-shadow: var(--ti-rich-text-edito-options-box-shadow);
z-index: 999;
button {
color: black;
margin: 0;
text-align: center;
line-height: var(--ti-common-line-height-3);
svg, path {
fill: black;
}
&:hover {
background-color: var(--ti-rich-text-edito-options-item-bg-color);
svg, path {
fill: var(--ti-rich-text-edito-options-item-hover-color);
}
}
}
}
&:hover {
background-color: #d2e4ff;
.h-options {
display: flex;
@ -92,7 +143,6 @@
button {
width: auto;
color: black;
}
}
}
@ -223,15 +273,23 @@
.line-height-options {
position: absolute;
background-color: #dfdede;
padding: .15rem;
background-color: var(--ti-rich-text-edito-options-bg-color);
left: 0px;
display: none;
border-radius: .4rem;
border-radius: var(--ti-rich-text-edito-options-border-radius);
box-shadow: var(--ti-rich-text-edito-options-box-shadow);
z-index: 999;
button {
color: black;
margin: 0;
text-align: center;
line-height: var(--ti-common-line-height-3);
&:hover {
background-color: var(--ti-rich-text-edito-options-item-bg-color);
color: var(--ti-rich-text-edito-options-item-hover-color);
}
}
}
@ -242,7 +300,6 @@
button {
width: auto;
color: black;
}
}
}
@ -265,19 +322,25 @@
.font-size-options {
display: none;
position: absolute;
border-radius: 0.4rem;
background-color: #dfdede;
border-radius: var(--ti-rich-text-edito-options-border-radius);
background-color: var(--ti-rich-text-edito-options-bg-color);
box-shadow: var(--ti-rich-text-edito-options-box-shadow);
z-index: 99;
button {
color: black;
margin: 0;
text-align: center;
line-height: var(--ti-common-line-height-3);
&:hover {
background-color: var(--ti-rich-text-edito-options-item-bg-color);
color: var(--ti-rich-text-edito-options-item-hover-color);
}
}
}
&:hover {
background-color: #d2e4ff;
background-color: var(--ti-rich-text-edito-options-item-bg-color);
.font-size-options {
display: flex;

5
packages/theme/src/rich-text-editor/vars.less
View File

@ -6,4 +6,9 @@
--ti-rich-text-editor-button-disabled: var(--ti-common-color-icon-disabled);
--ti-rich-text-editor-poplist-item-selected-bg-color: var(--ti-common-color-selected-background);
--ti-rich-text-editor-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color);
--ti-rich-text-edito-options-bg-color: var(--ti-common-color-bg-white-normal);
--ti-rich-text-edito-options-box-shadow: var(--ti-common-shadow-2-down);
--ti-rich-text-edito-options-border-radius: var(--ti-common-border-radius-normal);
--ti-rich-text-edito-options-item-padding: var(--ti-common-space-6) var(--ti-common-space-5x);
--ti-rich-text-edito-options-item-hover-color: var(--ti-common-color-icon-hover);
}

2
packages/vue-locale/src/lang/zh-CN.ts
View File

@ -172,7 +172,7 @@ export default {
taskList: '任务列表',
quote: '引用',
codeBlock: '代码块',
formatClear: '清楚标记',
formatClear: '清除标记',
nodeDelete: '删除节点',
undo: '回退',
redo: '前进',

8
packages/vue/src/rich-text-editor/src/pc.vue
View File

@ -91,7 +91,7 @@
class="color-button"
>
<label for="tiny--back-color">
<TinyIconRichTextColor></TinyIconRichTextColor>
<TinyIconRichbackgroundColor></TinyIconRichbackgroundColor>
</label>
<input
id="tiny-back-color"
@ -245,7 +245,8 @@ import {
iconRichTextBold,
iconRichTextCodeBlock,
iconRichTextCodeView,
iconRichTextColor,
IconEditorTextcolor,
IconEditorBackground,
iconRichTextDeleteColumn,
iconRichTextDeleteRow,
iconRichTextDeleteTable,
@ -369,7 +370,8 @@ export default defineComponent({
TinyIconRichTextBold: iconRichTextBold(),
TinyIconRichTextCodeBlock: iconRichTextCodeBlock(),
TinyIconRichTextCodeView: iconRichTextCodeView(),
TinyIconRichTextColor: iconRichTextColor(),
TinyIconRichTextColor: IconEditorTextcolor(),
TinyIconRichbackgroundColor: IconEditorBackground(),
TinyIconRichTextDeleteColumn: iconRichTextDeleteColumn(),
TinyIconRichTextDeleteRow: iconRichTextDeleteRow(),
TinyIconRichTextDeleteTable: iconRichTextDeleteTable(),