文本框中光标处插入 文本

53 阅读1分钟

 <el-form label-width="100">
        <el-form-item label="模板名称:" required>
          <el-input v-model="formData.templateName" placeholder="请输入模板名称"></el-input>
        </el-form-item>
        <el-form-item label="标题替换值:">
          <el-button type="primary" @click="insertText1('${BROADCAST_DATE}')">播报日期</el-button>
        </el-form-item>
        <el-form-item label="模板标题:" required>
          <el-input ref="inputRef" v-model="formData.title" placeholder="请输入模板标题"></el-input>
        </el-form-item>
        <el-form-item label="模板类型:">
          <el-radio-group v-model="formData.templateType">
            <el-radio size="large" label="3">午盘</el-radio>
            <el-radio size="large" label="4">收盘</el-radio>
            <el-radio size="large" label="5">美股收盘</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="内容替换值:">
          <el-button type="primary" @click="insertText('${rise}')">涨幅前三</el-button>
          <el-button type="primary" @click="insertText('${fall}')">跌幅前三</el-button>

          <el-button type="primary" @click="insertText('${priceRanking}')">涨跌幅排名</el-button>
          <el-button type="primary" @click="insertText('${BROADCAST_DATE}')">播报日期</el-button>
          <el-button type="primary" @click="insertText('${Y_M_D}')">日期</el-button>

          <el-button type="primary" @click="insertText('${RISK}')">风险提示</el-button>
        </el-form-item>
        <el-form-item label="模板内容:" required>
          <el-input
            ref="textAreaRef"
            v-model="formData.content"
            rows="5"
            type="textarea"
            placeholder="请输入模板内容"
          ></el-input>
        </el-form-item>
      </el-form>

// 在光标当前位置插入文本
const insertText1 = (textToInsert = '插入的文本') => {
  if (inputRef.value) {
    const textarea = inputRef.value.$el.querySelector('input');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const textBefore = textarea.value.substring(0, start);
    const textAfter = textarea.value.substring(end, textarea.value.length);
    textarea.value = textBefore + textToInsert + textAfter;
    textarea.setSelectionRange(start + textToInsert.length, start + textToInsert.length);
    formData.title = textarea.value;
    textarea.focus();
  } 
};

const insertText = (textToInsert = '插入的文本') => {
  if (textAreaRef.value) {
    const textarea = textAreaRef.value.$el.querySelector('textarea');
    const start = textarea.selectionStart;
    const end = textarea.selectionEnd;
    const textBefore = textarea.value.substring(0, start);
    const textAfter = textarea.value.substring(end, textarea.value.length);
    textarea.value = textBefore + textToInsert + textAfter;
    textarea.setSelectionRange(start + textToInsert.length, start + textToInsert.length);
    formData.content = textarea.value;
    textarea.focus();
  }
};