art-template:input框中传入视频后不能进行输入/删除操作

最新推荐文章于 2022-11-01 15:22:13 发布

weixin_33845477

最新推荐文章于 2022-11-01 15:22:13 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cd27fab6fb9a0320e73effd

博客围绕art-template模板引擎展开，介绍其是简约、超快的模板引擎，支持标准和原始语法。基于JQuery开发引用该引擎，页面选框可添加多种内容。但input选框插入视频后不能编辑/删除，给出临时解决方案，也指出正确做法是调整引用公用组件。

1.art-template模版引擎文档

art-template 是一个简约、超快的模板引擎
它支持两种模板语法:

标准语法

{{if user}}
  <h2>{{user.name}}</h2>
{{/if}}
复制代码

原始语法

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>
复制代码

art-template ----文档链接

2.项目背景介绍

基于JQuery进行的开发引用的是art-template模版引擎
项目中需要引入内部公共组件(原因在此不宜过多赘述)
页面功能：
- 页面以弹窗形式展示
- 页面内选框可根据状态进行编辑 / 修改 / 保存等操作
- 选框内部可添加链接 / 图片 / 视频 / 文字等相关内容

3.input选框中插入视频后不能编辑/删除操作

解决方案：
- 在模版引擎中对渲染的内容进行处理
- 对渲染的字符串进行判断是否包含video标签
- 判断video标签后是否有其他内容
- 如video标签后无内容的话则填入<br>标签字段
代码如下

    <% var ans = answers[j].answer %>
    <% var indexVal = ans.indexOf("</video>") %>
    <% var sliceLen = ans.slice(indexVal+8).length %>
    <% var boolAnsVal = (indexVal !== -1) && (sliceLen === 4) ? ans.slice(0,indexVal+8)+'<br>' : ans %>
    <div class="<%= 'audit-detail-item-content audit-answer-box ' + redColorFun %>">
        <div contenteditable="<%= params.statusNum === 0 ? true : false %>" data-dom="audit-detail-edit" data-id="<%= answers[j].id %>" data-tagid="<%= answers[j].answerTagId %>" class="<%= 'audit-answer-con-text ' + editInput %>">
            <%- boolAnsVal %>
        </div>
    </div>
复制代码