前端研究 订阅所有【前端研究】的日志

在contenteditable的div中的段落文字中获取光标位置，并在光标处插入字符

作者:admin 日期:2021-12-23
字体大小: 小 中 大

 vue项目中的一个小需求如题，代码整理如下：

Javascript代码
  1. <template>  
  2.   <el-container class="about">  
  3.     <el-main>  
  4.       <section class="bgBox">  
  5.           <h1>在诗句上任意位置点击，再点击“插入字符”按钮，即可在光标处插入字符</h1>  
  6.           <div class="h20"></div>  
  7.         <el-button type="primary" @click="insertChar">插入字符</el-button>  
  8.         <div class="h30"></div>  
  9.         <div class="edit" contenteditable>  
  10.           <p  
  11.             v-for="(item, index) in sentenses"  
  12.             :key="item"  
  13.             @click="getCurrentSent(index)"  
  14.           >  
  15.             {{ item }}  
  16.           </p>  
  17.         </div>  
  18.       </section>  
  19.     </el-main>  
  20.   </el-container>  
  21. </template>  
  22.   
  23. <script>  
  24. const insertStr = (soure, start, newStr)=>{     
  25.    return soure.slice(0, start) + newStr + soure.slice(start);  
  26. }  
  27.   
  28. import { getTableList, uploadFile } from "@/api/system/api_user";  
  29. export default {  
  30.   data() {  
  31.     return {  
  32.       current_sent: null,  
  33.       sentenses: [  
  34.         "凌波不过横塘路。但目送、芳尘去。",  
  35.         "锦瑟华年谁与度。月桥花院，琐窗朱户。只有春知处。 ",  
  36.         "飞云冉冉蘅皋暮。彩笔新题断肠句。若问闲情都几许。",  
  37.         "一川烟草，满城风絮。梅子黄时雨。"  
  38.       ]  
  39.     };  
  40.   },  
  41.   computed: {  },  
  42.   methods: {  
  43.     getCurrentSent(index) {  
  44.       // 获取当前句子  
  45.       this.current_sent = index;  
  46.     },  
  47.     insertChar() {  
  48.       // 获取getSelection对象，这个对象有很多内容，自己找到有用的数据  
  49.       let select = window.getSelection();  
  50.   
  51.       // 利用insertStr函数，在光标位置插入###三个字符  
  52.       let newSent = insertStr(  
  53.         this.sentenses[this.current_sent],  
  54.         select.anchorOffset - 1,  
  55.         "###"  
  56.       );  
  57.   
  58.       // 更新sentenses数组视图  
  59.       Vue.set(this.sentenses, this.current_sent, newSent);  
  60.     }  
  61.   }  
  62. };  
  63. </script>  
  64. <style lang="scss"></style>  

 



文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 0 | 引用: 0 | 查看次数: 3231
发表评论
昵　称:
密　码: 游客发言不需要密码.
邮　箱: 支持Gravatar头像.
网　址: 输入网址便于回访.
内　容:
验证码:
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.
字数限制 300 字 | UBB代码 关闭 | [img]标签 关闭