tiptap-rendering-xiatian v1.2.241-vega.1

tiptap_frontend 迁移插件工程

工程说明：

tiptap_frontend作为研报渲染迁移工程，功能包含研报编辑，保存导出，作者、权限和关键字编辑区域，操作区域大小控制，H5和web多端样式自适应等；

开发环境：

nodejs 16

tiptap迁移插件工程 开发：

1.npm install 安装依赖； 2.npm run serve 工程运行本地开发； 3.npm run package 工程本地打包，本地会在根目录多出/lib文件夹；

在前端主工程（valuesimplex_frontend）引入tiptap迁移插件工程:

tiptap迁移插件工程 是无状态的，数据需要从主工程传入； 例如指标、图片（上传图片服务器）、保存、导出等； 开这种情况下需要将插件工程引入到主工程，通过组件父子传值方式传递数据和事件；

1.拉取代码https://sh.gitlab.cibt/g060l0/valuesimplex_frontend/-/tree/kmp-release-cloud-1.0.3-tiptap-render； 2.npm install 安装依赖； 3.在node_modules 文件夹下找到/Tiptap-Rendering文件夹，将/lib中的文件替换到/Tiptap-Rendering文件夹下相对应的位置； 4.npm run serve 工程运行本地开发，在\src\views\LibraryV3\guangfa\components\WordEditor\cusComponent.vue文件下引用插件WordEditor； 5.父子传值方式传递数据和事件都是在cusComponent.vue完成；

插件使用

RR-Editor 包含工具栏、保存区域、作者和标签编辑区域

<!--  
* @RR-Editor 及以内的组件为可迁移的组件,其中
* RR-Editor：工具栏 
* RR-Header：标题/副标题/标签/作者/时间 
* RR-Intro：导语摘要外层组件
* @RR-Note 导语部分的组件
* @RR-Abstract 摘要部分的组件  RR-AbstractStart 摘要的原因 RR-AbstractMain 摘要论证过程 RR-AbstractConclusion 摘要结论
* RR-Body：正文 
* @preview 预览状态 Blooren（true/false）
* @watermark 水印信息 Object（show:Blooren user:String）
* @system 系统 String (生产中心productCenter/管理中心manageCenter/消费中心consumerCenter)
* @device 设备 PC端web/移动端app
* @editor 当前编辑者
* @addindicatortext 生产中心插入指标
* @meta 右侧权限区域的数据，非必填传入
* @appTheme 移动端样式预览用到的，非必填； object类型，type：iphone或Android；theme：1或2或3或4或5  更改摘要和正文的字号，段落间距，行高
* @annotationsUpdate="annotationsUpdate" 返回选中的批注或修订信息
* getAnnotationsAndRevision() 获取标注和修订信息
* annotationsAndRevisionCommand(command, data) 管理中心调用的批注和修订的命令, @param command 操作命令。editAnnotation-点击修改 批注；deleteAnnotations-点击删除批注；
  acceptRevision-点击接受  修订；refuseRevision-点击拒绝，删除  修订；
  @param data 数据参数，返回批注或修订的originData字段；特殊的，当前editAnnotation传参
    {
      contnet:"", // 更新的修改内容
      from: originData.from, // originData的from字段
      to: originData.to, // originData的to字段
      uuid: "", // 返回数据的uuid
    }
* handleInspectChart 自定义处理图表预览
* @inspectChart 图表预览回调，当前返回echarts的option数据
* chartOption 图表option参数，用于调整echart图表样式调整
  {
    grid: { // 解决移动端图表遮挡问题
      left: 20, // 图表左边距
      right: 20 // 图表右边距
    }
  }
-->
<template>
  <div id="tiptap-app">
    <RR-Editor
      :preview="preview"
      :authData="authData"
      :watermark="watermark"
      @change="handleContentChange"
      :metaData="metaData"
      :appTheme="appTheme"
    >
      <template v-slot:header>
        <RR-Header :data="headerData" @change="handleContentChange"></RR-Header>
      </template>
      <template v-slot:Intro>
        <RR-Intro>
          <RR-Note v-if="userAuthNote" :data="introductionData" @change="handleContentChange"></RR-Note>
          <RR-Abstract v-if="absPremission">
            <RR-AbstractStart v-if="userAuthAbsStart" :data="abstractStartData" @change="handleContentChange"></RR-AbstractStart>
            <RR-AbstractMain v-if="userAuthAbsMain" :data="abstractMainData" @change="handleContentChange"></RR-AbstractMain>
            <RR-AbstractConclusion v-if="userAuthAbsConclusion" :data="abstractConclusionData" @change="handleContentChange"></RR-AbstractConclusion> 
          </RR-Abstract>
       </RR-Intro>
      </template>
      <template v-slot:Body>
        <RR-Body
          v-if="userAuthMain"
          :data="contentMainData"
          @change="handleContentChange"
        ></RR-Body>
      </template>
    </RR-Editor>
  </div>
</template>
<script>
import configAuth from "@/db/auth.json";
import contentMain from "@/db/contentMain.json";
import title from "@/db/title.json";
import subtitle from "@/db/subtitle.json";
import meta from "@/db/meta.json";
import introduction from "@/db/introduction.json";
import abstractStart from "@/db/abstractStart.json";
import abstractProcess from "@/db/abstractProcess.json";
import abstractConclusion from "@/db/abstractConclusion.json";
export default {
  name: "App",
  components: {},
  mixins: [indicatorTextMixin],
  data() {
    return {
      preview: false,
      authData: {
        authors: true,
        keywords: true,
        title: true,
        subtitle: true,
        introduction: true,
        abstractStart: true,
        abstractProcess: true,
        abstractConclusion: true,
        contentMain: false,
        structure: {
          system: "manageCenter",
          device: "web",
          watermark: true,
          metaRegion: true
        }
      },
      user: {
        name: "zhangSan",
        userId: "123456789"
      },
      headerData: {
        title: {},
        subtitle: {}
      },
      introductionData: introduction,
      abstractStartData: abstractStart,
      abstractMainData: abstractProcess,
      abstractConclusionData: abstractConclusion,
      contentMainData: contentMain,
      metaData: {
        data: {
          resourceId: null,
          title: null,
          subTitle: null,
          authors: [],
          createBy: [],
          permissionTags: [],
          keywords: []
        }
      },
      appTheme: {
        type: "Android",
        theme: 1
      }
    };
  },
  created: function() {
    this.initData();
  },
  computed: {
    watermark: function() {
      const _watermark = {
        show: this.authData.structure.watermark,
        user: "ZhangSan"
      };
      return _watermark;
    },
    userAuthNote: function(){
        return this.authData.introduction
    },
    absPremission: function(){
      return this.authData.abstractStart || this.authData.abstractProcess || this.authData.abstractConclusion
    },
    userAuthAbsStart:function(){
       return this.authData.abstractStart
    },
    userAuthAbsMain:function(){
       return this.authData.abstractProcess
    },
    userAuthAbsConclusion:function(){
       return this.authData.abstractConclusion
    },
    userAuthMain: function(){
      return this.authData.contentMain
    }
  },
  methods: {
    initData() {
      // header数据
      this.headerData.title = title;
      this.headerData.subtitle = subtitle;
      this.metaData = meta;
      // 导语、摘要数据
      // 正文数据
      // this.contentMainData = contentMain;
      // 配置权限
      this.authData.authors = configAuth.data.authors;
      this.authData.keywords = configAuth.data.keywords;
      this.authData.title = configAuth.data.title;
      this.authData.subtitle = configAuth.data.subtitle;
      this.authData.introduction = configAuth.data.introduction;
      this.authData.abstractStart = configAuth.data.abstractStart;
      this.authData.abstractProcess = configAuth.data.abstractProcess;
      this.authData.abstractConclusion = configAuth.data.abstractConclusion;
      this.authData.structure.watermark = configAuth.data.structure.watermark;
      this.authData.structure.metaRegion = configAuth.data.structure.metaRegion;
    },
    handleContentChange(contentHtml, contentJson, contentText, name) {
      this.saveReport(contentHtml, contentJson, contentText, name);
    },
    // 保存数据
    saveReport: function(contentHtml, contentJson, contentText, name) {
      //  console.log("save Report", contentJson,contentText, name);
    },
    addCustomImgDialog(editor) {
      console.log(editor, " 打开插入图片弹框");
    },
    changeAppTheme(type, num) {
      this.appTheme.theme = num;
      this.appTheme.type = type;
    },
    /** undo 撤销 redo 重做*/
    undo(){
      document.getElementById("undo").click();
    },
    redo(){
      document.getElementById("redo").click();
    },
    /** 
     * 获取当前选中的标注和修订信息 
     * @returns selectResult 当前选中的批注或修订信息
     */
    annotationsUpdate(selectResult) {
      console.log("标注更新", selectResult);
    },
    /** 获取标注和修订信息 */
    getAnnotationsAndRevision() {
      console.log(this.$refs.rrEditor.getAnnotationsAndRevision());
    },
    // 调用操作命令
    execCommand() {
      this.$refs.rrEditor.annotationsAndRevisionCommand("deleteAnnotations", this.$refs.rrEditor.getAnnotationsAndRevision()[0].originData)
    }
  }
};
</script>

组件之间传值：

EventBus 'ACTIVE_EDITOR' 当前编辑器

注释：

1. 参考主工程的研报渲染代码，添加必要，无用代码不要填加；
2. 此工程为组件工程，无状态，不需要AXIOS请求，需要的数据从外部传入；