0.1.5 • Published 1 year ago
suc_keditor v0.1.5
知识空间文本编辑器
知识空间文本编辑器
KEditor 普通编辑组件
<k-editor ref="editItem"
class="editor-plugin-style k-bottom-edit"
:has-title="true"
:title-value.sync="title"
@editor-ready="switchThen"
@editor-attach="changeFiles"
@to-preview-attachment="previewFromEditor"
@to-download-attachment="downloadFromEditor"
@ck-save="save"
:image-adapter="imageAdapter"
:up-area="params"
:media-adapter="uploadMedia"></k-editor>
editor-plugin-style 为知识管理的默认样式，可以另写
k-bottom-edit 为知识管理的编辑页面样式，可以另写
editor-ready为编辑器初始化完成事件，在此事件后设置初始值
this.$refs.editItem.setMarkdown(string_value)
给编辑器设值可使用(setText为编辑器原始格式数据类似html,setMarkdown为通过turndown转换的数据)this.$refs.editItem.setText()
this.$refs.editItem.setMarkdown()
获取当前内容可使用(getText为编辑器原始格式数据类似html,getMarkdown为通过turndown转换的数据)this.$refs.editItem.getText()
this.$refs.editItem.getMarkdown()
editor-attach为编辑器选择附件事件，会返回一个File参数，上传File后可将附件名称插入段落
this.$refs.editItem.insertAttachment(fileName);
删除附件名称用
this.$refs.editItem.removeAttachment(fileName);
to-preview-attachment和to-download-attachment为点击附件气泡弹窗里的预览和下载按钮事件，请在外部自行实现
上传接口需后台提供，以下上传接口只是个例子
image-adapter和up-area用于实现图片上传，up-area为上传需要的参数,image-adapter请在外部定义一个adapter传入组件
import { SucMessage } from '@suc/ui';
import axios from 'axios';
import {upFile} from "./api"; //当前项目的接口，可自行修改
export default class EditorUploadAdapter {
loader:any;
uploadArea:string;
constructor( loader:any,uploadArea:any ) {
this.loader = loader;
//uploadArea为上传参数，根据接口需要自行处理
let area=``;
if(uploadArea.type==='notice'){
area=`/kms/space/${uploadArea.spaceBm || '0'}/notice/pic`
}else{
area=`/kms/space/${uploadArea.spaceBm || '0'}/base/${uploadArea.baseBm || '0'}/doc/${uploadArea.docBm || '0'}/pic`
}
this.uploadArea = area;
}
async upload() { //编辑器选择图片后自动会调取此方法，内部上传接口与参数可根据实际更改，注意Promise返回结果为{default:imgSrc,url:imgSrc}格式
const data = new FormData();
data.append('alias', "");
data.append('area', this.uploadArea);
data.append('file', await this.loader.file); //this.loader.file为编辑器选择图片后自动返回
data.append('remark', "");
return new Promise((resolve, reject) => {
axios({
url: upFile(),
method: 'post',
data,
headers: {
"Content-Type": "multipart/form-data"
}
}).then((res:any) => {
let resData={
default:res.data.path,
url:res.data.path
};
resolve(resData);
}).catch((error:any) => {
SucMessage.error('图片上传失败！');
});
});
}
}import EditorUploadAdapter from "@suc/kms-component/src/util/adapter";
...
imageAdapter:any=EditorUploadAdapter;media-adapter用于实现播放媒体（如视频）上传,可直接传入一个函数，参数为File类型，返回为Promise类型并resolve视频地址
uploadMedia(file:File){
let loading = SucMessage.loading({
content: '正在上传',
duration: 0
});
let form=new FormData();
form.append("alias","");
form.append("area","/kms/space/media");
form.append("file",file);
form.append("remark","");
//form为接口参数，实际格式与后台对接
return new Promise((resolve, reject) => {
this.$http({
url: upFile(),//接口地址与后台对接
method: "post",
data: form
}).then(({data})=>{
loading();
resolve(data.path); //返回Promise 需resolve上传后返回的视频地址
SucMessage.success('上传成功！');
}).catch(e=>{
loading();
reject();
console.log(e);
SucMessage.error('上传失败！');
});
});
}KMarkdown markdown编辑器
<k-markdown ref="editItem"
class="markdown-plugin-style mk-bottom-edit"
:has-title="true"
:title-value.sync="title"
:image-adapter="mkImageAdapter"
:up-area="params"
@mk-save="saveDraft(true)"></k-markdown>
与keditor不同的是image-adapter需要传一个函数而不是class,注意直接返回imgSrc
import { SucMessage } from '@suc/ui';
import axios from 'axios';
import {upFile} from "./api";
export async function mkImageUpload(file:File,uploadArea:any) {
try{
let area=``;
if(uploadArea.type==='notice'){
area=`/kms/space/${uploadArea.spaceBm || '0'}/notice/pic`
}else{
area=`/kms/space/${uploadArea.spaceBm || '0'}/base/${uploadArea.baseBm || '0'}/doc/${uploadArea.docBm || '0'}/pic`
}
const data = new FormData();
data.append('alias', "");
data.append('area', area);
data.append('file', file);
data.append('remark', "");
let res=await axios({
url: upFile(),
method: 'post',
data,
headers: {
"Content-Type": "multipart/form-data"
}
});
return res.data.path
}catch (e) {
SucMessage.error('图片上传失败！');
console.log(e);
return "";
}
}mk-save为markdown编辑器的保存按钮点击事件，keditor没有保存按钮如需要自己另加
KReader 只显示不编辑
<k-reader ref="docItem"
class="editor-plugin-style k-inset-doc"
:mark-value="item.articleContent"></k-reader>思维导图
可在router里配置
{
name: 'kms-mindmap',
path: '/mindmap/view/:frameId/:mapData?',
component: () => import('@suc/keditor/src/Mindmap.vue')
},
{
name: 'kms-mindmap-edit',
path: '/mindmap/edit/:frameId/:mapData?',
component: () => import('@suc/keditor/src/Mindmap.vue')
},或从https://cowork.sucsoft.com:3443/kms/kms-mindmap.git下载，部一个独立服务，并在项目里配置window.mindPreUrl
相关webpack配置
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin');
const {styles} = require('@ckeditor/ckeditor5-dev-utils');
module.exports = {
transpileDependencies: [
/ckeditor5-[^/\\]+[/\\]src[/\\](?!lib).+\.js$/,
],
chainWebpack: config => {
const svgRule = config.module.rule('svg');
// ./node_modules根据实际路径修改
svgRule.exclude.add(path.join(__dirname, './node_modules', '@ckeditor'));
config.module
.rule('cke-svg')
.test(/ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/)
.use('raw-loader')
.loader('raw-loader');
config.module
.rule('cke-css')
.test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
.use('postcss-loader')
.loader('postcss-loader')
.tap(() => {
return styles.getPostCssConfig({
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark'),
},
minify: true
});
});
},
configureWebpack: {
plugins: [
new CKEditorWebpackPlugin({
language: 'zh-cn',
additionalLanguages: 'all',
})
]
},
};0.1.5
1 year ago