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

最新推荐文章于 2024-08-13 02:58:00 发布

竹子js

最新推荐文章于 2024-08-13 02:58:00 发布

阅读量5.6k

点赞数 2

分类专栏： vue 文章标签： tinymce富文本编辑器 vue富文本编辑器

本文链接：https://blog.csdn.net/bamboozjy/article/details/82665140

版权

vue 专栏收录该内容

71 篇文章 3 订阅

订阅专栏

使用步骤：

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>

这是运行之后的结果：