效果图如下:
html
<div ref="edition" class="edition">
<div
ref="contentInput"
:contenteditable="true"
placeholder="请输入幕文本"
class="content-input"
@input="onChange"
v-html="screenValue"
/>
</div>
<div class="actions">
<el-button
type="text"
size="mini"
round
@click="insertContent"
>
连续
</el-button>
<el-button
type="text"
size="mini"
round
@click="insert(0.5)"
v-text="'0.5s'"
/>
<el-button
type="text"
size="mini"
round
@click="insert(1.0)"
v-text="'1s'"
/>
<el-button
type="text"
size="mini"
round
@click="insert(2.0)"
v-text="'2s'"
/>
</div>
相关方法:
name: 'ScreenEditor',
model: {
prop: 'screen',
event: 'change',
},
props: {
index: {
type: Number,
default: 0,
},
screen: {
type: Object,
default: () => ({ valueText: '' }),
},
},
data() {
return {
screenValue: this.screen.valueText,
};
},
watch: {
screen(newValue) {
this.screenValue = newValue.valueText;
this.formatText();
},
sensitiveWords: {
handler(wordsList) {
// 处理敏感词
wordsList.forEach(({ context }) => {
const span = `<span class="sensitive" contenteditable="false">${context}</span>`;
if (!this.screenValue.includes(span)) {
this.screenValue = this.screenValue.replace(context, span);
}
this.$emit('change', { value: this.screenValue, index: this.index });
});
},
immediate: true,
deep: true,
},
},
created() {
this.formatText();
// 聚焦
this.$refs.contentInput.focus();
const range = getSelection();
range.selectAllChildren(this.$refs.contentInput);
range.collapseToEnd();
},
methods: {
formatText() {
if (this.screen.valueText) {
let text = this.screen.valueText.replace('[0.5]', this.getSpan('pause', 0.5).outerHTML);
text = text.replace('[1.0]', this.getSpan('pause', 1).outerHTML);
text = text.replace('[2.0]', this.getSpan('pause', 2).outerHTML);
const continueArr = text.match(/\[(.+?)\]/g);
continueArr?.forEach((item) => {
text = text.replace(item, this.getSpan('continue', item.replace(/\[(.+?)\]/g, '$1')).outerHTML);
});
this.screenValue = text;
this.$nextTick(() => {
this.addContinueLabel();
});
}
},
onChange(e) {
this.$emit('change', { value: e.target.innerHTML, index: this.index });
},
getRange() {
const selection = getSelection();
if (selection.getRangeAt > 0) {
return { range: selection.getRangeAt(0), selection };
}
const range = document.createRange();
range.setStart(selection.anchorNode, selection.anchorOffset);
range.setEnd(selection.focusNode, selection.focusOffset);
return { range, selection };
},
getSpan(className, text) {
const span = document.createElement('span');
span.className = className;
if (className === 'continue') {
span.setAttribute('text', text);
span.innerText = text;
} else {
span.innerText = `${Number(text).toFixed(1)}s`;
span.setAttribute('second', Number(text).toFixed(1));
span.setAttribute('contenteditable', 'false');
return span;
}
return span;
},
insert(num) {
const { range } = this.getRange();
const span = this.getSpan('pause', num);
range.insertNode(span);
this.$emit('change', { value: this.$refs.contentInput.innerHTML, index: this.index });
},
insertContent() {
const { range, selection } = this.getRange();
if (!selection.toString().trim()) {
return;
}
const span = this.getSpan('continue', selection.toString());
range.deleteContents();
range.insertNode(span);
this.addContinueLabel();
},
addContinueLabel() {
this.$refs.contentInput.querySelectorAll('.continue').forEach((item) => {
const id = `#l${item.id.slice(1)}`;
if (!document.querySelector(id)) {
const continueLabel = document.createElement('div');
continueLabel.className = 'continue-label';
continueLabel.innerHTML = '\n<div class="val" val="letter">\n<button id="detail">连续</button>\n<button id="del" class="el-icon-circle-close" />\n</div>\n';
const randomId = (new Date()).getTime() + Math.floor(1e3 * Math.random());
continueLabel.id = `l${randomId}`;
item.id = `p${randomId}`;
continueLabel.querySelector('#del').addEventListener('click', () => {
const continueSpan = document.querySelector(`#p${randomId}`);
continueSpan && (continueSpan.outerHTML = continueSpan.innerHTML);
continueLabel.remove();
this.$emit('change', { value: this.$refs.contentInput.innerHTML, index: this.index });
});
this.$refs.edition.append(continueLabel);
}
});
this.$refs.contentInput.querySelectorAll('.continue').forEach((item) => {
const id = `#l${item.id.slice(1)}`;
const span = document.querySelector(id);
if (span) {
if (Number(item.offsetTop) === 0 && Number(item.offsetLeft) === 0) {
span.remove();
} else {
span.style.top = `${-20 + item.offsetTop}px`;
span.style.left = `${item.offsetLeft}px`;
}
}
});
this.$emit('change', { value: this.$refs.contentInput.innerHTML, index: this.index });
},
},
<style lang="scss" scoped>
.content {
position: relative;
.content-input {
width: 100%;
min-height: 408px !important;
padding: 20px 15px;
background-image: none;
border: 1px solid #DCDFE6;
border-radius: 4px;
line-height: 40px;
color: #333333;
font-style: normal;
font-weight: 400;
font-size: 14px;
-webkit-user-modify: read-write-plaintext-only;
&:empty:before {
content: attr(placeholder);
font-size: 13px;
color: #999;
}
&:focus:before {
content: none;
}
}
}
</style>
<style lang="scss">
.edition {
.content-input {
.pause {
background-color: rgba(42, 139, 240, 0.2);
white-space: nowrap;
color: #308FF1;
border-radius: 4px;
}
.continue {
line-height: 40px;
border-bottom: solid 1px #308FF1;
border-left: solid 1px #308FF1;
}
.sensitive {
color: rgb(202, 63, 68);
text-decoration: underline;
}
}
.continue-label {
position: absolute;
font-size: 14px;
background-color: rgba(40, 133, 229, 0.2);
color: #308FF1;
border-radius: 2px 2x 2px 0;
display: flex;
align-items: center;
#detail {
display: inline-flex;
padding: 0 2px;
border: none;
background: none;
outline: none;
color: #308FF1;
transition: 0.1s;
}
#del {
cursor: pointer;
display: inline-flex;
border: none;
background: none;
outline: none;
color: #308FF1;
transition: 0.1s;
}
}
}
</style>
使用时对内容进行format
const div = document.createElement('div');
div.innerHTML = screen.valueText;
const sensitive = div.querySelectorAll('.sensitive');
Array.from(sensitive).forEach((e) => {
e.outerHTML = e.innerText;
});
const pause = div.querySelectorAll('.pause');
Array.from(pause).forEach((e) => {
e.outerHTML = `[${e.innerText.replace('s', '')}]`;
});
const continueSpan = div.querySelectorAll('.continue');
Array.from(continueSpan).forEach((e) => {
e.outerHTML = `[${e.innerText}]`;
});
screen.valueText = div.innerText;