vue中引入——富文本编辑器

首先链接

https://github.com/HaoChuan9421/vue-ueditor-wrap

npm i vue-ueditor-wrap -S

main.js

import VueUeditorWrap from "vue-ueditor-wrap";

 

Vue.component("vue-ueditor-wrap", VueUeditorWrap);

 

<template>
  <div class="container body-content">
    
    <div class="plan-edit-box">
      <vue-ueditor-wrap v-model="centerData.content" :config="myConfig"></vue-ueditor-wrap>
    </div>
    <div class="plan-edit-btn">
      <el-button type="primary" @click="sureChangeHandler">确定</el-button>
      <el-button type="danger" @click="resetChangeHandler">重置</el-button>
    </div>
  </div>
</template>
<script>

import { axiosPost } from "../../utils/fetch.js"; //post请求
import { getCookie, loginExpired } from "../../utils/common";
import { baseURL } from "../../constants/fetch.js";//当前环境ip
// ES6 Module

export default {
  data() {
    return {
      
      centerData: {
        content: "",
        type: 1
      },
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        elementPathEnabled: false,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
        // serverUrl: "http://192.168.1.2:8000/controller.php",
        // serverUrl:
        //   "http://192.168.1.3/teacher-development-center/backend/UEditor/php/controller.php",
        serverUrl: `${baseURL}/UEditor/php/controller.php`,
        // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
        UEDITOR_HOME_URL: `${baseURL}/UEditor/`
      }
    };
  },
  
  methods: {
    async getPlanHandler() {
      let data = await axiosPost("admin/article/detail", { type: 1 });
      if (data.body instanceof Array && data.body.length == 0) {
        return;
      }
      this.centerData = data.body;
      //返回值content: "<p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">教师发展中心以“和谐身心，快乐工作”为基本理念，其职能定位为，“教学服务、教师发展”的综合性服务机构。</span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">教师发展中心的主要工作内容有：教师教学培训与咨询、教师职业生涯规划与管理、教师心理健康服务、人才测评服务、教师教学质量评价、教师教学发展研究与改革、示范推广等。</span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="text-indent: 50px; border: 0px none rgb(60, 60, 60); font-family: 微软雅黑, &quot;microsoft yahei&quot;; font-size: 16px; font-stretch: 100%; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 25px; padding: 0px;">1.</span><span style="text-indent: 50px; border: 0px none rgb(60, 60, 60); font-family: 仿宋; font-size: 20px; font-stretch: 100%; font-variant-numeric: normal; font-variant-east-asian: normal; line-height: 25px; padding: 0px;"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">教师的培训与咨询工作。负责教师国内培训进修，做好教师教学能力提升培训、教师岗前培训、教师资格认定和语言文字工作，组建优质稳定的专兼职咨询专家队伍，针对教师等不同类型的教师，构建</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">“</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">点面结合</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">”</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">的立体化教学训练和咨询体系，推进教师教学能力提升的培训与咨询工作常态化、制度化。</span></span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">2.</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">教师职业生涯规划工作。鼓励并引导教师根据学校战略和自身特点，主动的设计自己的职业生涯路径，实现个人发展与学校发展的相互促进，建立健全教师职业生涯规划的工作体系和制度体系，构建长效机制，促进教师个人、学院（部门）与学校的和谐发展。</span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">3.</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">教师心理健康服务工作。关心教师的心理健康工作，做好心理咨询、心理健康服务、心理健康档案的建立与管理等工作，构建教师心理健康规范化、常态化的制度体系和工作体系，为学校实施科学化、人性化管理提供服务和支撑。</span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">4.</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">人才测评服务工作。做好全校引进聘用人才的测评服务工作，为学校选人、用人、育人、留人等人力资源管理和开发工作提供可靠、客观的依据和参考性建议。</span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">5.</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">教师教学质量评价。通过对教与学的主体、课程、环境等进行调查，把握教与学动态，为学生、教师、学校提供合理的信息反馈，构建教师教学多元评价机制。</span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">6.</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">教学发展研究与改革。针对教师教育教学中的实际问题，结合教育教学理论和学科专业特点开展专项研究，进一步为教师的专业发展和实际问题的解决提供理论基础，同时对教师发展活动的总体规划和设计提供理论支持。</span></p><p style="border: 0px none rgb(60, 60, 60);color: rgb(60, 60, 60);font-size: 14px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;margin-bottom: 0px;margin-top: 0px;padding: 0px;text-indent: 40px;white-space: normal"><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">7.</span><span style="border: 0px none rgb(60, 60, 60);font-family: 微软雅黑, &#39;microsoft yahei&#39;;font-size: 16px;font-stretch: 100%;font-variant-numeric: normal;font-variant-east-asian: normal;line-height: 25px;padding: 0px">示范推广。鼓励教师追求教学卓越，整合与开发校内外优质教学资源，促进教师正确合理地使用现代教育技术，积极通过教育技术的更新来改造课程教学，形成系统的可以推广的模式，在校内外进行示范交流。</span></p>"

    },
    sureChangeHandler() {
      if (!this.centerData.content) {
        this.$message("请输入中心介绍内容");
        return;
      }
      // admin/article/edit-article
      let sendData = Object.assign({}, this.centerData);
      sendData["access_token"] = getCookie("access_token");
      axiosPost("admin/article/edit-article", sendData).then(res => {
        if (res.code != 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          return;
        }
        this.$message({
          message: "添加成功！",
          type: "success"
        });
      });
    },
    resetChangeHandler() {
      this.centerData = {
        content: "",
        type: 1
      };
    }
  },
  mounted() {
    this.getPlanHandler();
  }
};
</script>


<style scoped>
.plan-edit-btn {
  padding: 20px 0;
}
.plan-edit-box {
  max-width: 1200px;
}
</style>
 

 

来源：CSDN

作者：saturday-yh

链接：https://blog.csdn.net/qq_42092177/article/details/103236781