如题我想做个textarea添加话题的功能像这种图片
1***@qq.com
- 发布：2023-03-09 10:26
- 更新：2025-03-04 09:55
- 阅读：1121
大佬们uniapp textarea添加话题使话题的颜色改变这个功能怎么写啊，求指教谢谢?
分类：uni-app
chriswoww - no.1
<template>
<view style="position: relative">
<textarea
style="
position: absolute;
color: transparent;
caret-color: #000;
font-size: 30rpx;
line-height: 30rpx;
width: 100%;
"
placeholder-style="color:#707070;font-size: 30rpx;"
maxlength="50"
:value="inputValue"
@input="onInput"
:placeholder="placeholder"
/>
<view
style="
width: 100%;
white-space: pre-line;
overflow-wrap: break-word;
font-size: 30rpx;
position: relative;
line-height: 30rpx;
"
v-html="highlightedText"
></view>
</view>
</template>
<script>
export default {
name: 'customTextArea',
props: {
value: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '请输入',
},
},
data() {
return {
inputValue: '',
highlightedText: '',
}
},
mounted() {
this.$nextTick(() => {
this.inputValue = this.value
this.highlightText()
})
},
methods: {
onInput(event) {
this.inputValue = event.detail.value
this.highlightText()
this.$emit('input', this.inputValue)
},
// 这里假设你要高亮的话题是以 # 开头的
highlightText() {
const regex = /#[\u4e00-\u9fa5a-zA-Z0-9_]+/g
this.highlightedText = this.inputValue.replace(regex, (match) => {
return `<span style="color: #fbbe3c;">${match}</span>`
})
},
},
}
</script>
<style>
/* 你可以在这里添加样式 */
</style>
用户官网提供的editor编辑器
地址: https://uniapp.dcloud.net.cn/component/editor.html
编辑器操作地址: https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-format
