【无标题】

自定义 tinymce 富文本编辑器在vue中使用，vue 集成 tinymce 富文本编辑器

1.在你的vue项目中安装tinymce4.7
npm install tinymce@4.7.4

2.随便在哪个你喜欢的文件夹下建立一个util.js的文件里面的内容如下，里面的值和地址是用户富文本编辑器的发起请求所用的自己根据需要修改

在这里插入代码片/**
 * @file util.js
 * @author liumapp
 * @email liumapp.com@gmail.com
 * @homepage http://www.liumapp.com
 * @date 6/11/18
 */


import axios from 'axios';
import Cookies from 'js-cookie';
import { Message } from 'iview';

let util = {

};
util.title = function (title) {
  title = title || 'editor demo';
  window.document.title = title;
};

const ajaxUrl = 'http://localhost:2020/';

util.ajaxUrl = ajaxUrl;

util.ajax = axios.create({
  baseURL: ajaxUrl,
  timeout: 30000
});

util.post = function (url, data) {
  const token = Cookies.get('userInfo') ? JSON.parse(Cookies.get('userInfo')).token : '';
  if (!data) {
    data = { token: token };
  } else {
    data.token = token;
  }
  return axios({
    method: 'post',
    baseURL: ajaxUrl,
    url,
    data: data,
    timeout: 10000,
    headers: {
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/json; charset=UTF-8',
      'Authorization': 'Bearer ' + token
    }
  }).then(
    (response) => {
      return this.checkStatus(response);
    }
  )
};

util.checkStatus = function checkStatus (response) {
  // loading
  // 如果http状态码正常，则直接返回数据
  // console.log(response)
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response;
    // 如果不需要除了data之外的数据，可以直接 return response.data
  }
  Message.warning('网络异常');
  // 异常状态下，把错误信息返回去
  return {
    status: -404,
    msg: '网络异常'
  };
};

export default util;

下面是使用示例，

<template>
  <div>
    <!-- 组件样式不用管 -->
    <Row>
      <Col span="18" offset="3">
        <Card shadow>
          <Upload
            action="http://localhost:2020/upload/word/template"
            :on-success="handleSuccess"
          >
            <Button icon="ios-cloud-upload-outline">上传word文档</Button>
          </Upload>
          <Upload
            action="http://admin.alzhswmu.cn/prod-api/common/upload"
            :on-success="imageUploadedSuccessfully"
          >
            <Button icon="ios-cloud-upload-outline">上传图片</Button>
          </Upload>
          <Form ref="editorModel" :model="editorModel" :rules="editorRules">
            <FormItem prop="content">
              <textarea
                v-model="customEditor"
                class="tinymce-textarea"
                id="tinymceEditer"
                style="height: 800px"
              >
              </textarea>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmit('editorModel')">提交</Button>
              <Button type="ghost" @click="handleReset('editorModel')">重置</Button>
              <button @click="gitData">获取值</button>
            </FormItem>
          </Form>

          <Spin fix v-if="spinShow">
            <Icon type="load-c" size="18" class="demo-spin-icon-load"></Icon>
            <div>加载组件中...</div>
          </Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import tinymce from "tinymce";
import util from "@/libs/util";
export default {
  name: "index",
  data() {
    return {
      spinShow: true,
      editorModel: {
        content: "dfsd",
      },
      content2: "sdds",
      editorRules: {
        content: [
          {
            type: "string",
            min: 5,
            message: "the username size shall be no less than 5 chars ",
            trigger: "blur",
          },
        ],
      },
      customEditor: "富文本测试",
      // 图片上传好的列表
      imgListData: [],
    };
  },
  watch: {
    customEditor: function (newVal) {
      this.editorModel.content = newVal;
    },
  },
  methods: {
    handleSuccess(res) {
      console.log(res);
      this.customEditor = res.content;
      console.log("haoxy" + this.customEditor);
      tinymce.get("tinymceEditer").setContent(this.customEditor);
    },
    init() {
      this.$nextTick(() => {
        let vm = this;
        let height = document.body.offsetHeight - 300;
        tinymce.init({
          selector: "#tinymceEditer",
          branding: false,
          elementpath: false,
          height: height,
          language: "zh_CN.GB2312",
          menubar: "edit insert view format table tools",
          plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools",
            "searchreplace visualblocks visualchars code fullpage",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons paste textcolor colorpicker textpattern imagetools codesample",
          ],
          toolbar1:
            " newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent fontsizeselect | link image emoticons media codesample",
          fontsize_formats: "8px 10px 12px 14px 18px 24px 36px 72px 96px 140px 280px",
          autosave_interval: "20s",
          image_advtab: true,
          table_default_styles: {
            width: "100%",
            height: "100%",
            borderCollapse: "collapse",
          },
          image_list: this.imgListData,
          setup: function (editor) {
            editor.on("init", function (e) {
              vm.spinShow = false;
            });

            editor.addButton("customImage", {
              text: "Upload Image",
              icon: false,
              onclick: function () {
                document.getElementById("custom-image-input").click();
              },
            });

            editor.on("change", function (e) {
              vm.customEditor = tinymce.get("tinymceEditer").getContent();
            });
          },
        });
      });
    },

    // 提交按钮  生成pdf
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          util.post("/html/pdf", this.editorModel).then((res) => {
            this.$Message.success("Success!");
          });
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    gitData() {
      console.log(this.customEditor);
    },
    imageUploadedSuccessfully(res) {
      // this.imgListData.push({ title: res.url, value: res.originalFilename });
      this.imgListData.push({ value: res.url, title: res.originalFilename });
      console.log(this.imgListData);
    },
  },
  mounted() {
    this.init();
  },
  destroyed() {
    tinymce.get("tinymceEditer").destroy();
  },
};
</script>

<style>
/* Add your styles here */
</style>