vue富文本编辑器Tinymce,功能齐全,对图片等媒体资源操控性好,非常推荐!

使用步骤:

1.在index.html中引入js文件:

<body>
  <script src="./static/tinymce4.7.5/tinymce.min.js"></script>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

⚠️注意:一定要在打包的js之前引入

2.将富文本资源文件放到static文件夹:

附 下载地址:tinymce静态资源文件包    

3.在components文件夹下放置如下文件(封装好的组件,plugin和toolbar是配置功能的文件,可以根据个人需要修改删除。editorImage是一个图片上传的组件,可以自定义修改,因此对媒体资源可扩展性好。index是主文件,编写富文本的地方,也可以根据个人需要修改)

附 下载地址:组件下载地址

4.在需要的地方调用即可,如demo.vue中:

<template>
  <div id="demo">
    <tinymce :height="300" v-model="content"/>
  </div>
</template>

<script>
import Tinymce from "./Tinymce";
export default {
  name: "qrcode",
  components: { Tinymce },
  data() {
    return {
      content: `<h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1><p style="text-align: center; font-size: 15px;"><img title="TinyMCE Logo" src="//www.tinymce.com/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />`
    };
  },
  methods: {},
  mounted() {}
};
</script>

<style scoped>
</style>

这是运行之后的结果:

自定义插入图片(或者视频,语音)的功能特别赞,根据个人需要来修改。

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值