contenteditable Selection 在vue中实现自定义表达式

深藏阁楼爱情的钟 2023-06-21 12:24 6阅读 0赞

# contenteditable 相关介绍 #

## 实现效果展示 ##

![1576141347534.gif][]  
contenteditable 属性规定是否可编辑元素的内容

### 属性值 ###

*  `true` 可以编辑元素内容
 *  `false` 无法编辑元素内容
 *  `classname` 继承父元素的 `contenteditable` 属性

## Selection属性一览 ##

[https://developer.mozilla.org/zh-CN/docs/Web/API/Selection][https_developer.mozilla.org_zh-CN_docs_Web_API_Selection]

### widnow.getSelection() ###

返回一个 `Selection` 对象，表示用户选择的文本范围或光标的当前位置

###  ###

### Section.getRangeAt() ###

返回选区开始的节点（Node）

const sel = window.getSelection();
    const range = sel.getRangeAt(0);

### 光标所在位置追加元素代码 ###

var sel, range;
    var textContent;
    //失去焦点时获取光标的位置
    sel = window.getSelection();
    
    // 先获取一下焦点
    $('.flex').focus()
    $('.flex').blur(function() { 
      getblur()
    })
    
    function getblur() { 
      sel = window.getSelection();
      range = sel.getRangeAt(0);
    }
    
    // 光标所在位置追加元素
    function insertHtmlAtCaret(html) { 
      if (window.getSelection) { 
        // IE9 and non-IE
        if (sel.getRangeAt && sel.rangeCount) { 
          var el = document.createElement("div");
          el.innerHTML = html;
          var frag = document.createDocumentFragment(),
              node,
              lastNode;
          while ((node = el.firstChild)) { 
            lastNode = frag.appendChild(node);
          }
          range.insertNode(frag); // Preserve the selection
          if (lastNode) { 
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
          }
        }
      } else if (document.selection && document.selection.type != "Control") { 
        // IE < 9
        document.selection.createRange().pasteHTML(html);
      }
      textContent = $(".flex").html();
    }

### 文字生成图片 ###

/** * js使用canvas将文字转换成图像数据base64 * @param {string} text 文字内容 "abc" * @param {string} fontsize 文字大小 20 * @param {function} fontcolor 文字颜色 "#000" * @param {boolean} imgBase64Data 图像数据 */
    export const textBecomeImg = (text,fontsize,fontcolor) => { 
      var canvas = document.createElement('canvas');
      var $buHeight = 0;
      if(fontsize <= 32){  $buHeight = 1; }
      else if(fontsize > 32 && fontsize <= 60 ){  $buHeight = 2;}
      else if(fontsize > 60 && fontsize <= 80 ){  $buHeight = 4;}
      else if(fontsize > 80 && fontsize <= 100 ){  $buHeight = 6;}
      else if(fontsize > 100 ){  $buHeight = 10;}
      canvas.height=fontsize + $buHeight ;
      var context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.fillStyle = fontcolor;
      context.font=fontsize+"px Arial";
      context.textBaseline = 'middle';
      context.fillText(text,5,fontsize/2)
    
      canvas.width = context.measureText(text).width;
      context.fillStyle = fontcolor;
      context.font=14+"px Arial";
      context.textAlign="left";
      context.textBaseline = 'middle';
      context.fillText(text,5,fontsize/2)
    
      var dataUrl = canvas.toDataURL('image/png');
      return dataUrl;
    }

剩下的就是jq了 `jquery大法好`

this.$nextTick(() => { 
      $('.collapse-item').click(function() { 
        const {  name, key } = JSON.parse($(this).attr('data'))
        let htmlStr = "";
        const tempKey = "this.paramsKey." + key;
        const url = textBecomeImg(name, 20, "#fff");
        htmlStr = `<img data-key="${ tempKey }" style="background: #3296fa;margin: 0 10px 10px 0;" src="${ url}">`;
        insertHtmlAtCaret(htmlStr)
      })
    })

注意： 项目本身是vue工程，但是该功能需要各种操作dom，所以就在组件里见面vue与jq结合使用了

### 整个组件代码 ###

方案改过一版，代码还未进行优化，因为代码里面使用了一些项目本身的数据，所以整套逻辑只能做参考了

*  html

<template>
      <el-card>
        <div class="hide-show">
          <div class="hide-show-left">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item v-for="(item, index) in collapseData" :key="index" title="当前表单" name="1" >
                <p v-for="val in item.list" :key="val.key" class="collapse-item" :data="JSON.stringify(val)">{
       { val.name }}</p>
              </el-collapse-item>
            </el-collapse>
          </div>
          <div class="hide-show-right">
            <div class="hide-show-right-box">
              <div class="flex" contenteditable="true"></div>
            </div>
            <div class="hide-show-right-bottom">                                                                                                           
              <p class="title">满足以上条件字段隐藏</p>
              <ul>
                <li class="li-item">请从左侧面板选择字段或选项</li>
                <li class="li-item">
                  支持
                  <span style="color: red;">英文</span>模式下运算符(+, -, *, /, >, <, ==, !=, <=, >=)
                </li>
                <li class="li-item">
                  <p>参考场景:</p>
                  <p>总金额控件输入的值小于10000时，需要隐藏当前控件，则可将隐藏条件设置为： 总金额 < 100</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </el-card>
    </template>

*  js

*  css

[1576141347534.gif]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAxOS9naWYvMjM5NTA0LzE1NzYxNDE0NTA1NjgtMzU3N2ZlNWQtMTQ4Yi00YmUzLWI0ZDEtNDk0YTI5NDBmYzBhLmdpZg#align=left&display=inline&height=527&name=1576141347534.gif&originHeight=527&originWidth=640&size=9968653&status=done&style=none&width=640
[https_developer.mozilla.org_zh-CN_docs_Web_API_Selection]: https://developer.mozilla.org/zh-CN/docs/Web/API/Selection