Skip to content

F
fns_backend
Commit 9d8f5c64 authored by chenqikuai's avatar chenqikuai
Browse files
Options

fix：富文本修复

parent f36ee099
Hide whitespace changes
Inline Side-by-side
Showing with 367 additions and 169 deletions
src/App.vue
View file @ 9d8f5c64
......@@ -7,11 +7,11 @@
</template>
<script lang="ts">
import Vue from 'vue'
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'
moment.locale('zh-cn')
import Vue from "vue";
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");
import {
DatePicker,
......@@ -29,7 +29,7 @@ import {
Spin,
Pagination,
ConfigProvider,
} from 'ant-design-vue'
} from "ant-design-vue";
Vue.use(DatePicker)
.use(Button)
.use(Table)
......@@ -44,36 +44,16 @@ Vue.use(DatePicker)
.use(Spin)
.use(Pagination)
.use(ConfigProvider)
.use(FormModel)
.use(FormModel);
export default Vue.extend({
data() {
return {
zh_CN,
}
};
},
})
});
</script>
<style lang="less">
.vhtml{
h1 {
font-size: 1.4rem !important;
font-weight: 300 !important;
line-height: 1.5rem !important;
letter-spacing: -0.01562em !important;
}
h2 {
font-size: 1.2rem !important;
font-weight: 300 !important;
line-height: 1.5rem !important;
letter-spacing: -0.01562em !important;
}
h3 {
font-size: 1rem !important;
font-weight: 300 !important;
line-height: 1.5rem !important;
letter-spacing: -0.01562em !important;
}
}
<style lang="scss">
@import "./assets/sass/main.scss";
</style>
\ No newline at end of file
src/assets/sass/editor.scss
View file @ 9d8f5c64
@import './variables.scss';
.editor {
.ProseMirror{
min-height: 400px;
.el-tiptap-editor {
word-wrap: break-word;
white-space: break-spaces;
$root: &;
> * {
box-sizing: border-box;
}
.ProseMirror img.ProseMirror-selectednode {
outline: 3px solid #68cef8;
p {
margin-bottom: 0;
margin-top: 0;
outline: none;
line-height: 40px;
min-height: 40px;
}
position: relative;
&__content {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
h1,
h2,
h3,
h4,
h5 {
margin-top: 20px;
margin-bottom: 20px;
* {
caret-color: currentColor;
&:first-child {
margin-top: 0;
}
pre {
padding: 0.7rem 1rem;
border-radius: 5px;
background: $color-black;
color: $color-white;
font-size: 0.8rem;
overflow-x: auto;
code {
display: block;
}
&:last-child {
margin-bottom: 0;
}
}
p code {
padding: 0.2rem 0.4rem;
border-radius: 5px;
font-size: 0.8rem;
font-weight: bold;
background: rgba($color-black, 0.1);
color: rgba($color-black, 0.8);
ul,
ol {
counter-reset: none;
list-style-type: none;
margin-bottom: 0;
margin-left: 24px;
margin-top: 0;
padding-bottom: 5px;
padding-left: 0;
padding-top: 5px;
}
ol li > p {
margin: 0;
&:first-child::before {
content: counter(el-tiptap-counter) '.' !important;
display: inline-block;
left: -5px;
line-height: 1;
margin-left: -24px;
position: relative;
text-align: right;
top: 0;
width: 24px;
}
}
ul,
ol {
padding-left: 1rem;
ul li > p {
&:first-child::before {
content: '\2022';
text-align: center;
display: inline-block;
left: -5px;
line-height: 1;
margin-left: -24px;
position: relative;
text-align: right;
top: 0;
width: 24px;
}
}
ol {
counter-reset: el-tiptap-counter;
li > p,
li > ol,
li > ul {
margin: 0;
li > p:first-child::before {
counter-increment: el-tiptap-counter;
}
}
a {
color: $primary-color;
cursor: pointer;
}
blockquote {
border-left: 5px solid #edf2fc;
border-radius: 2px;
color: $regular-text-color;
margin: 10px 0;
padding-left: 1em;
}
code {
background-color: $lighter-primary-color;
border-radius: 4px;
color: $primary-color;
display: inline-block;
font-size: 14px;
font-weight: 700;
padding: 0 8px;
}
a {
pre {
background-color: $primary-text-color;
color: $lighter-primary-color;
font-size: 16px;
overflow-x: auto;
padding: 14px 20px;
margin: 10px 0;
border-radius: 5px;
code {
background-color: transparent;
border-radius: 0;
color: inherit;
display: block;
font-family: 'Menlo,Monaco,Consolas,Courier,monospace';
font-size: inherit;
font-weight: normal;
padding: 0;
}
}
blockquote {
border-left: 3px solid rgba($color-black, 0.1);
color: rgba($color-black, 0.8);
padding-left: 0.8rem;
font-style: italic;
ul[data-type='todo_list'] {
margin-left: 5px;
p {
margin: 0;
}
}
.todo-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-bottom: 0;
img {
max-width: 100%;
border-radius: 3px;
}
&[data-text-align='right'] {
justify-content: flex-end !important;
}
table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
margin: 0;
overflow: hidden;
td,
th {
min-width: 1em;
border: 2px solid $color-grey;
padding: 3px 5px;
vertical-align: top;
box-sizing: border-box;
position: relative;
> * {
margin-bottom: 0;
}
&[data-text-align='center'] {
justify-content: center !important;
}
th {
font-weight: bold;
text-align: left;
&[data-text-align='justify'] {
text-align: space-between !important;
}
.selectedCell:after {
z-index: 2;
position: absolute;
content: '';
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(200, 200, 255, 0.4);
pointer-events: none;
.todo-content {
padding-left: 10px;
> p {
font-size: 16px;
&:last-of-type {
margin-bottom: 0;
}
}
}
.column-resize-handle {
position: absolute;
right: -2px;
top: 0;
bottom: 0;
width: 4px;
z-index: 20;
background-color: #adf;
pointer-events: none;
&--done {
> .todo-checkbox {
color: $primary-color;
}
> .todo-content > p {
color: $primary-color;
text-decoration: line-through;
}
}
}
}
hr {
margin-top: 20px;
margin-bottom: 20px;
}
@for $i from 1 through 7 /* max-indent */ {
$indent-margin-base: 30px;
.tableWrapper {
margin: 1em 0;
overflow-x: auto;
*[data-indent='#{$i}'] {
margin-left: $indent-margin-base * $i !important;
}
}
th {
font-weight: 500;
text-align: left;
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
.column-resize-handle {
background-color: $light-primary-color;
bottom: 0;
pointer-events: none;
position: absolute;
right: -2px;
top: 0;
width: 4px;
z-index: 20;
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
}
h1 {
font-size: 1.4rem !important;
font-weight: 300 !important;
line-height: 1.5rem !important;
letter-spacing: -0.01562em !important;
}
h2 {
font-size: 1.2rem !important;
font-weight: 300 !important;
line-height: 1.5rem !important;
letter-spacing: -0.01562em !important;
}
h3 {
font-size: 1rem !important;
font-weight: 300 !important;
line-height: 1.5rem !important;
letter-spacing: -0.01562em !important;
}
> * + * {
margin-top: 0.75em;
}
ul,
ol {
padding: 0 1rem;
}
li {
line-height: 2em !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: rgba(#616161, 0.1);
color: #616161;
}
pre {
background: #0d0d0d;
color: #fff;
font-family: 'JetBrainsMono', monospace;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
code {
color: inherit;
padding: 0;
background: none;
font-size: 0.8rem;
}
}
mark {
background-color: #faf594;
}
img {
max-width: 100%;
height: auto;
}
hr {
margin: 1rem 0;
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0d0d0d, 0.1);
}
hr {
border: none;
border-top: 2px solid rgba(#0d0d0d, 0.1);
margin: 2rem 0;
}
ul[data-type='taskList'] {
list-style: none;
padding: 0;
li {
display: flex;
align-items: center;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
user-select: none;
}
> div {
flex: 1 1 auto;
}
}
}
}
src/assets/sass/variables.scss
View file @ 9d8f5c64
$color-black: #000000;
$color-white: #ffffff;
$color-grey: #dddddd;
$black-color: #000;
$white-color: #fff;
$light-background-color: #f5f7fA;
$primary-color: #409eff;
$light-primary-color: #b3d8ff;
$lighter-primary-color: #d9ecff;
$extra-light-primary-color: #ecf5ff;
$danger-color: #f56c6c;
$primary-text-color: #303133;
$regular-text-color: #606266;
$placeholder-text-color: #c0c4cc;
$border-color: #dcdfe6;
$lighter-border-color: #ebeef5;
\ No newline at end of file
src/components/Editor/index.vue
View file @ 9d8f5c64
<template>
<div class="border border-gray-300 p-3 rounded" >
<div class="border border-gray-300 p-3 rounded">
<EditorMenuBar :editor="editor" />
<editor-content :editor="editor" class="editor__content vhtml" />
<editor-content
:editor="editor"
class="editor editor__content el-tiptap-editor"
/>
</div>
</template>
......@@ -25,14 +28,16 @@ export default Vue.extend({
text: {
type: String,
required: true,
default:''
default: "",
},
},
watch:{
text(newV,oldV){
this.editor.commands.setContent(newV)
watch: {
text(newV, oldV) {
this.editor.commands.setContent(newV, false, {
preserveWhitespace: "full",
});
this.$emit("update:editorContent", newV);
}
},
},
data() {
let editor: any = undefined;
......@@ -42,14 +47,19 @@ export default Vue.extend({
},
mounted() {
this.editor = new Editor({
parseOptions: {
preserveWhitespace: "full",
},
onUpdate: () => {
const content = this.editor.getHTML();
this.$emit("update:editorContent", content);
},
extensions: [StarterKit, Timage],
autofocus: "start",
})
this.editor.commands.setContent(this.text)
});
this.editor.commands.setContent(this.text, false, {
preserveWhitespace: "full",
});
},
beforeDestroy() {
this.editor.destroy();
......
src/views/Root/Activity/detail.vue
View file @ 9d8f5c64
......@@ -4,7 +4,9 @@
{{ $route.query.id }}
<p class="text-gray-400">操作时间：{{ time | formatDate }}</p>
<img v-if="imageUrl" :src="imageUrl" class="mx-auto my-5" />
<div class="text-left p-5 vhtml" v-html="content">{{ content }}</div>
<div class="text-left p-5 el-tiptap-editor editor" v-html="content">
{{ content }}
</div>
</div>
</template>
......
src/views/Root/News/detail.vue
View file @ 9d8f5c64
<template>
<div>
<p class=" text-2xl font-bold mb-5 ">{{ title }}</p>
<p class=" text-gray-400">新增时间：{{ time | format }} <span class=" ml-2">作者：{{ name }}</span></p>
<div class="text-left p-5 vhtml" v-html="content"></div>
<p class="text-2xl font-bold mb-5">{{ title }}</p>
<p class="text-gray-400">
新增时间：{{ time | format }} <span class="ml-2">作者：{{ name }}</span>
</p>
<div class="text-left p-5 el-tiptap-editor editor" v-html="content"></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import News from '@/service/News/index'
import Filter from '@/filter/index'
import Vue from "vue";
import News from "@/service/News/index";
import Filter from "@/filter/index";
const news = new News()
const news = new News();
export default Vue.extend({
data(){
return{
title:'',
time:'',
name:'',
content:''
}
data() {
return {
title: "",
time: "",
name: "",
content: "",
};
},
filters: {
format(value: string) {
return Filter.formatDate(value)
}
return Filter.formatDate(value);
},
},
methods: {
getDetails() {
......@@ -40,17 +42,16 @@ export default Vue.extend({
// this.content = data.content
// this.title = data.title
// })
const _str = this.$route.query.msg as string
const msg = JSON.parse(_str)
this.time = msg.created_at
this.name = msg.writer
this.content = msg.content
this.title = msg.title
}
const _str = this.$route.query.msg as string;
const msg = JSON.parse(_str);
this.time = msg.created_at;
this.name = msg.writer;
this.content = msg.content;
this.title = msg.title;
},
},
created() {
this.getDetails()
}
})
this.getDetails();
},
});
</script>
\ No newline at end of file
src/views/Root/News/publish.vue
View file @ 9d8f5c64
......@@ -134,9 +134,10 @@ export default Vue.extend({
this.form.imageUrl = res.file_name ? new FileService().getImageSrc(res.file_name) : ''
this.form.summary = res.desc
this.form.editableContent = res.content
this.form.content = res.content.replace(/(<p>|<\/p>)+/g,'')
console.log('res', res)
console.log('imageUrl', this.form.imageUrl)
this.form.content = res.content
// this.form.content = res.content.replace(/(<p>|<\/p>)+/g,'')
console.log(this.form.content);
// console.log('imageUrl', this.form.imageUrl)
},
getContent(value:string){
this.form.content = value
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment