前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Html新特性contenteditable自定义富文本

Html新特性contenteditable自定义富文本

作者头像
明知山
发布2020-09-02 16:48:26
9550
发布2020-09-02 16:48:26
举报
文章被收录于专栏:前端开发随笔前端开发随笔
代码语言:javascript
复制
 <div id="editer" contenteditable @input="getEditer($event)"></div>
  <!-- 上传视频-->
 <input ref="fileVideo" type="file" accept="video/*" @change="uploadVideo($event)" />
 <!-- 上传图片-->
 <input ref="fileImg" type="file" accept="image/*" @change="uploadImg($event)" />
代码语言:javascript
复制
    getUpload(e) {
      return new Promise((resolve, reject) => {
      //通过id聚焦放置文本内容
        var editer = document.getElementById("editer");
        editer.focus();
        this.$axios({
          method: "post",
          url:"http:///uploadFile",
          data: file
        }).then(res => {
          if (res.data.status == 200) {
            resolve(res.data.info.url);
          }
        });
      });
    },
     // 上传视频
    uploadVideo(e) {
      this.getUpload(e).then(res => {
        this.$refs.fileVideo.value = ""; //处理change不能同时上传相同文件
        document.execCommand(
          "insertHTML",
          false,
          "<div>&nbsp;<video controls src= " + res + "></video>&nbsp;</div>"
        );
      });
    },
    // 上传图片
    uploadImg(e) {
      this.getUpload(e).then(res => {
        this.$refs.fileImg.value = "";
        document.execCommand("InsertImage", false, res);
      });
    },

document.execCommand

自定义富文本主要在于对document.execCommand的了解 如果还需要自定义富文本组件,比如设置字体、加粗…直接去文档地址去拿

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-04-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • document.execCommand
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档