Vue<富文本编辑器>

效果图:

image.png

此处介绍一个好用的 Tinymce 富文本编辑器,也是 vue-element-admin
后台管理项目中所用到的。(都有现成的了,不妨拿来用)

image.png
image.png

点击查看 vue-element-admin 富文本功能介绍
点击查看 Tinymce 中文文档

文件下载:

此处给大家看一下使用到的文件目录

image.png

上面就是封装好的富文本组件,你也可以 点击这里去下载 相应的文件目录,不过还是建议全部下载下来,把对应的组件拿出来用比较好。(还有很多别的组件也很好用呢,也可以偷来用 😄)

image.png
图片上传:

外部图片插入:这里提一下图片插入这块,每次插入的时候,你需要备注图片的在线地址,输入完之后,就会插入到编辑器中。

image.png

本地图片插入:如果想插入本地图片,你需要点击右上角的上传,然后配合自己后端的接口,上传本地图片到服务端,并生成一个在线图片地址,以便插入到编辑器中,这样你最终传给后端的就是一个 <img src="在线地址" alt=""> 的图片标签了。
image.png

下面文件标注的地方就是,上传图片的组件模块,这里面你可以根据自身需求进行调整

image.png
使用代码:
<template>
  <div class="app-content">
    <div class="Tinymce_box">
      <tinymce v-model="content" :height="500" />
      <div v-if="content" class="editor-content">
        <h3>预览效果:</h3>
        <div v-html="content" />
      </div>
    </div>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
export default {
  components: { Tinymce },
  data() {
    return {
      content: ""
    };
  }
};
</script>
<style lang="scss"  scoped>
.Tinymce_box {
  display: flex;
}
.editor-content {
  margin-left: 30px;
  flex-grow: 1;
  border: 2px dashed #f1f1f1;
  padding:0 20px;
}
h3 {
  color: #808080;
}
</style>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。