tiptap-rendering v1.2.96
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
}
-->
<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' 当前编辑器
注释:
- 参考主工程的研报渲染代码,添加必要,无用代码不要填加;
- 此工程为组件工程,无状态,不需要AXIOS请求,需要的数据从外部传入;
10 months ago
10 months ago
11 months ago
11 months ago
8 months ago
11 months ago
9 months ago
10 months ago
9 months ago
10 months ago
11 months ago
11 months ago
11 months ago
9 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago