ckeditor5+vue2 实现自定义文件上传插件
功能描述：上传文件，在富文本中自动增加一个可下载的超链接参考官网创建自定义插件：Creating a simple plugin - CKEditor 5 Documentation参考其他博客编辑富文本内容的方法为了省事，用了elementui的上传组件，需要有上传文件的接口也不过多赘述了首先添加一个上传文件的按钮，一开始可以不隐藏。目的是达到点击按钮上传文件后，富文本中添加相应超链接的效果。上
·
功能描述：上传文件，在富文本中自动增加一个可下载的超链接
参考官网创建自定义插件：Creating a simple plugin - CKEditor 5 Documentation
参考其他博客编辑富文本内容的方法
为了省事，用了elementui的上传组件，需要有上传文件的接口也不过多赘述了
首先添加一个上传文件的按钮，一开始可以不隐藏。
目的是达到点击按钮上传文件后，富文本中添加相应超链接的效果。
上传接口、headers等不过多描述，正常上传文件即可。
重点是上传成功的钩子函数。
handleSuccess(response, file, fileList) {
var obj = document.createElement('a')
obj.setAttribute('href',
response.data.fileUrl
)
obj.setAttribute('download', 'file')
obj.setAttribute('rel', 'noopener noreferrer')
obj.innerHTML = '<span style="color:#409eff; text-decoration: underline;">'+response.data.attNewName+'</span>'
const viewFragment = this.myEditor.data.processor.toView(obj.outerHTML);
const modelFragment = this.myEditor.data.toModel(viewFragment);
this.myEditor.model.insertContent(modelFragment, this.myEditor.model.document.selection);
},创建一个a标签，href为文件url，innerHTML为文件名，添加各种属性
↑因为并没有用这种方式实例化editor，没法直接用editor.data.xxxx
所以我在data里声明了myeditor
并在onready方法中，对myeditor进行赋值，以取到editor实例
onReady(editor) {
// 自定义上传图片插件
editor.plugins.get("FileRepository").createUploadAdapter = loader => {
return new MyUploadAdapter(loader, this.uploadParams.bizType);
};
this.myEditor = editor
},进行以上操作后，点击按钮，可以实现上传文件后，富文本中添加对应可下载的超链接
下一步：隐藏按钮，自定义工具栏插件，将插件执行效果替换为按钮点击效果
class InsertFile extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'insertFile', locale => {
const view = new ButtonView( locale );
view.set( {
label: '插入文件',
icon: browseFilesIcon,
tooltip: true,
} );
// Callback executed once the image is clicked.
view.on( 'execute', () => {
$("#uploadButton").click();
} );
return view;
} );
}
}此处的icon:browseFilesIcon为自定义图标，会在下一张讲到
叙述有些乱，文章也是在一定基础上写的，刚接触editor还没把前面的坑踩完的同学可能看不明白，还是希望写下来能对大家多多少少有所帮助
<template>
<div>
<div id="ykEditor">
<ckeditor id="ckeditor"
name="ckeditor"
@ready="onReady"
:editor="editor"
v-model="content"
:config="editorConfig"></ckeditor>
<el-upload
class="upload-demo"
:action="uploadUrl"
:on-preview="handlePreview"
:on-success="handleSuccess"
:headers="headers"
:data="uploadParams"
:limit="3"
:show-file-list="false"
:file-list="fileList">
<el-button id="uploadButton" size="small" type="primary" style="display: none">插入附件</el-button>
</el-upload>
</div>
</div>
</template>
<script>
import {getToken} from '@/utils/auth'
import CKEditor from '@ckeditor/ckeditor5-vue2'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
import axios from 'axios'
import qs from 'qs'
import FileRpository from "@ckeditor/ckeditor5-upload/src/filerepository";
// 必须配置Essentials，否则编辑器无法输入
import Essentials from "@ckeditor/ckeditor5-essentials/src/essentials";
import UploadAdapter from "@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter";
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';
import Base64UploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter";
import Alignment from "@ckeditor/ckeditor5-alignment/src/alignment";
import Autoformat from "@ckeditor/ckeditor5-autoformat/src/autoformat"
import Bold from "@ckeditor/ckeditor5-basic-styles/src/bold"
import Italic from "@ckeditor/ckeditor5-basic-styles/src/italic";
import Underline from "@ckeditor/ckeditor5-basic-styles/src/underline";
import Strikethrough from "@ckeditor/ckeditor5-basic-styles/src/strikethrough";
import Code from "@ckeditor/ckeditor5-basic-styles/src/code";
import CodeBlock from "@ckeditor/ckeditor5-code-block/src/codeblock";
import Font from "@ckeditor/ckeditor5-font/src/font";
import Subscript from "@ckeditor/ckeditor5-basic-styles/src/subscript";
import Superscript from "@ckeditor/ckeditor5-basic-styles/src/superscript";
import Highlight from "@ckeditor/ckeditor5-highlight/src/highlight";
import Heading from "@ckeditor/ckeditor5-heading/src/heading";
import HorizontalLine from "@ckeditor/ckeditor5-horizontal-line/src/horizontalline";
import Image from "@ckeditor/ckeditor5-image/src/image";
import ImageCaption from "@ckeditor/ckeditor5-image/src/imagecaption";
import ImageStyle from "@ckeditor/ckeditor5-image/src/imagestyle";
import ImageToolbar from "@ckeditor/ckeditor5-image/src/imagetoolbar";
import ImageUpload from "@ckeditor/ckeditor5-image/src/imageupload";
import ImageResize from "@ckeditor/ckeditor5-image/src/imageresize";
import Indent from "@ckeditor/ckeditor5-indent/src/indent";
import Link from "@ckeditor/ckeditor5-link/src/link";
import IndentBlock from "@ckeditor/ckeditor5-indent/src/indentblock";
import List from "@ckeditor/ckeditor5-list/src/list";
import MediaEmbed from "@ckeditor/ckeditor5-media-embed/src/mediaembed";
import Paragraph from "@ckeditor/ckeditor5-paragraph/src/paragraph";
import PasteFromOffice from "@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice";
import Title from "@ckeditor/ckeditor5-heading/src/title";
import Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TableProperties from '@ckeditor/ckeditor5-table/src/tableproperties';
import TableCellProperties from '@ckeditor/ckeditor5-table/src/tablecellproperties';
import TextTransformation from "@ckeditor/ckeditor5-typing/src/texttransformation";
import BlockToolbar from "@ckeditor/ckeditor5-ui/src/toolbar/block/blocktoolbar";
import HeadingButtonsUI from "@ckeditor/ckeditor5-heading/src/headingbuttonsui";
import ParagraphButtonUI from "@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui";
// import browseFilesIcon from "@/assets/ckeditor5-upload/theme/icons/browse-files.svg";
import browseFilesIcon from "@/assets/ckeditorIcon/browse-files.svg";
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
class MyUploadAdapter {
constructor(loader,bizType) {
// The file loader instance to use during the upload.
this.loader = loader;
this.bizType = bizType;
}
async upload() {
const data = new FormData();
data.append("file", await this.loader.file);
data.append('bizType', this.bizType)
const res = await axios({
url: process.env.VUE_APP_BASE_API + `/common/upload`,
method: "POST",
headers: {
Authorization: 'Bearer ' + getToken(),
'content-type': 'application/x-www-form-urlencoded'
},
data,
withCredentials: true, // true 为不允许带 token, false 为允许
});
return {
default: res.data.data.fileUrl,
};
}
// Aborts the upload process.
abort() {
// Reject the promise returned from the upload() method.
server.abortUpload();
}
}
class InsertFile extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add( 'insertFile', locale => {
const view = new ButtonView( locale );
view.set( {
label: '插入文件',
icon: browseFilesIcon,
tooltip: true,
} );
// Callback executed once the image is clicked.
view.on( 'execute', () => {
$("#uploadButton").click();
} );
return view;
} );
}
}
export default {
props: {
/* 编辑器的内容 */
value: {
type: String
},
/* 图片大小 */
maxSize: {
type: Number,
default: 4000 //kb
},
bizType: String,
},
components: {
//局部注册方式
ckeditor: CKEditor.component
},
data() {
return {
editor: ClassicEditor,
editorConfig: {
plugins: [
Alignment,
Highlight,
Essentials,
UploadAdapter,
Autoformat,
Bold,
Italic,
Underline,
Strikethrough,
SimpleUploadAdapter,
Code,
CodeBlock,
Font,
Subscript,
Superscript,
Heading,
HorizontalLine,
InsertFile,
Image,
ImageCaption,
ImageStyle,
ImageToolbar,
ImageUpload,
ImageResize,
Indent,
IndentBlock,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
FileRpository,
Table,
TableToolbar,
TableProperties,
TableCellProperties,
TextTransformation,
BlockToolbar,
ParagraphButtonUI,
HeadingButtonsUI
],
//功能模块
toolbar: [
"undo",
"redo",
"|",
"heading",
"Highlight",
"fontSize",
"fontFamily",
"fontColor",
"fontBackgroundColor",
"|",
"imageUpload",
"insertFile",
"insertTable",
"|",
"bold",
"italic",
"underline",
"strikethrough",
"code",
"subscript",
"superscript",
"link",
"bulletedList",
"numberedList",
"alignment",
"horizontalLine",
"indent",
"outdent",
"mediaEmbed",
],
ckfinder: {
uploadUrl: process.env.VUE_APP_BASE_API + `/common/upload`,
options: {
resourceType: "Images",
connectorInfo: 'Authorization=Bearer ' + getToken(),
}
},
//设置字体大小
fontSize: {
options: [
12,
14,
16,
18,
20,
22,
24,
26,
28,
30,
32,
34,
36
]
},
//设置字体颜色
fontColor: {
colors: [
{
color: 'hsl(0, 0%, 0%)',
label: 'hsl(0, 0%, 0%)'
},
{
color: 'hsl(0, 0%, 12.5%)',
label: 'hsl(0, 0%, 12.5%)'
},
{
color: 'hsl(0, 0%, 25%)',
label: 'hsl(0, 0%, 25%)'
},
{
color: 'hsl(0, 0%, 37.5%)',
label: 'hsl(0, 0%, 37.5%)'
},
{
color: 'hsl(0, 0%, 50%)',
label: 'hsl(0, 0%, 50%)'
},
{
color: 'hsl(0, 0%, 62.5%)',
label: 'hsl(0, 0%, 62.5%)'
},
{
color: 'hsl(0, 0%, 75%)',
label: 'hsl(0, 0%, 75%)'
},
{
color: 'hsl(0, 0%, 87.5%)',
label: 'hsl(0, 0%, 87.5%)'
},
{
color: 'hsl(0, 0%, 100%)',
label: 'hsl(0, 0%, 100%)'
},
{
color: 'hsl(0, 100%, 10%)',
label: 'hsl(0, 100%, 10%)'
},
{
color: 'hsl(0, 100%, 20%)',
label: 'hsl(0, 100%, 20%)'
},
{
color: 'hsl(0, 100%, 30%)',
label: 'hsl(0, 100%, 30%)'
},
{
color: 'hsl(0, 100%, 40%)',
label: 'hsl(0, 100%, 40%)'
},
{
color: 'hsl(0, 100%, 50%)',
label: 'hsl(0, 100%, 50%)'
},
{
color: 'hsl(0, 100%, 60%)',
label: 'hsl(0, 100%, 60%)'
},
{
color: 'hsl(0, 100%, 70%)',
label: 'hsl(0, 100%, 70%)'
},
{
color: 'hsl(0, 100%, 80%)',
label: 'hsl(0, 100%, 80%)'
},
{
color: 'hsl(0, 100%, 90%)',
label: 'hsl(0, 100%, 90%)'
},
{
color: 'hsl(30, 100%, 10%)',
label: 'hsl(30, 100%, 10%)'
},
{
color: 'hsl(30, 100%, 20%)',
label: 'hsl(30, 100%, 20%)'
},
{
color: 'hsl(30, 100%, 30%)',
label: 'hsl(30, 100%, 30%)'
},
{
color: 'hsl(30, 100%, 40%)',
label: 'hsl(30, 100%, 40%)'
},
{
color: 'hsl(30, 100%, 50%)',
label: 'hsl(30, 100%, 50%)'
},
{
color: 'hsl(30, 100%, 60%)',
label: 'hsl(30, 100%, 60%)'
},
{
color: 'hsl(30, 100%, 70%)',
label: 'hsl(30, 100%, 70%)'
},
{
color: 'hsl(30, 100%, 80%)',
label: 'hsl(30, 100%, 80%)'
},
{
color: 'hsl(30, 100%, 90%)',
label: 'hsl(30, 100%, 90%)'
},
{
color: 'hsl(60, 100%, 10%)',
label: 'hsl(60, 100%, 10%)'
},
{
color: 'hsl(60, 100%, 20%)',
label: 'hsl(60, 100%, 20%)'
},
{
color: 'hsl(60, 100%, 30%)',
label: 'hsl(60, 100%, 30%)'
},
{
color: 'hsl(60, 100%, 40%)',
label: 'hsl(60, 100%, 40%)'
},
{
color: 'hsl(60, 100%, 50%)',
label: 'hsl(60, 100%, 50%)'
},
{
color: 'hsl(60, 100%, 60%)',
label: 'hsl(60, 100%, 60%)'
},
{
color: 'hsl(60, 100%, 70%)',
label: 'hsl(60, 100%, 70%)'
},
{
color: 'hsl(60, 100%, 80%)',
label: 'hsl(60, 100%, 80%)'
},
{
color: 'hsl(60, 100%, 90%)',
label: 'hsl(60, 100%, 90%)'
},
{
color: 'hsl(90, 100%, 10%)',
label: 'hsl(90, 100%, 10%)'
},
{
color: 'hsl(90, 100%, 20%)',
label: 'hsl(90, 100%, 20%)'
},
{
color: 'hsl(90, 100%, 30%)',
label: 'hsl(90, 100%, 30%)'
},
{
color: 'hsl(90, 100%, 40%)',
label: 'hsl(90, 100%, 40%)'
},
{
color: 'hsl(90, 100%, 50%)',
label: 'hsl(90, 100%, 50%)'
},
{
color: 'hsl(90, 100%, 60%)',
label: 'hsl(90, 100%, 60%)'
},
{
color: 'hsl(90, 100%, 70%)',
label: 'hsl(90, 100%, 70%)'
},
{
color: 'hsl(90, 100%, 80%)',
label: 'hsl(90, 100%, 80%)'
},
{
color: 'hsl(90, 100%, 90%)',
label: 'hsl(90, 100%, 90%)'
},
{
color: 'hsl(120, 100%, 10%)',
label: 'hsl(120, 100%, 10%)'
},
{
color: 'hsl(120, 100%, 20%)',
label: 'hsl(120, 100%, 20%)'
},
{
color: 'hsl(120, 100%, 30%)',
label: 'hsl(120, 100%, 30%)'
},
{
color: 'hsl(120, 100%, 40%)',
label: 'hsl(120, 100%, 40%)'
},
{
color: 'hsl(120, 100%, 50%)',
label: 'hsl(120, 100%, 50%)'
},
{
color: 'hsl(120, 100%, 60%)',
label: 'hsl(120, 100%, 60%)'
},
{
color: 'hsl(120, 100%, 70%)',
label: 'hsl(120, 100%, 70%)'
},
{
color: 'hsl(120, 100%, 80%)',
label: 'hsl(120, 100%, 80%)'
},
{
color: 'hsl(120, 100%, 90%)',
label: 'hsl(120, 100%, 90%)'
},
{
color: 'hsl(150, 100%, 10%)',
label: 'hsl(150, 100%, 10%)'
},
{
color: 'hsl(150, 100%, 20%)',
label: 'hsl(150, 100%, 20%)'
},
{
color: 'hsl(150, 100%, 30%)',
label: 'hsl(150, 100%, 30%)'
},
{
color: 'hsl(150, 100%, 40%)',
label: 'hsl(150, 100%, 40%)'
},
{
color: 'hsl(150, 100%, 50%)',
label: 'hsl(150, 100%, 50%)'
},
{
color: 'hsl(150, 100%, 60%)',
label: 'hsl(150, 100%, 60%)'
},
{
color: 'hsl(150, 100%, 70%)',
label: 'hsl(150, 100%, 70%)'
},
{
color: 'hsl(150, 100%, 80%)',
label: 'hsl(150, 100%, 80%)'
},
{
color: 'hsl(150, 100%, 90%)',
label: 'hsl(150, 100%, 90%)'
},
{
color: 'hsl(180, 100%, 10%)',
label: 'hsl(180, 100%, 10%)'
},
{
color: 'hsl(180, 100%, 20%)',
label: 'hsl(180, 100%, 20%)'
},
{
color: 'hsl(180, 100%, 30%)',
label: 'hsl(180, 100%, 30%)'
},
{
color: 'hsl(180, 100%, 40%)',
label: 'hsl(180, 100%, 40%)'
},
{
color: 'hsl(180, 100%, 50%)',
label: 'hsl(180, 100%, 50%)'
},
{
color: 'hsl(180, 100%, 60%)',
label: 'hsl(180, 100%, 60%)'
},
{
color: 'hsl(180, 100%, 70%)',
label: 'hsl(180, 100%, 70%)'
},
{
color: 'hsl(180, 100%, 80%)',
label: 'hsl(180, 100%, 80%)'
},
{
color: 'hsl(180, 100%, 90%)',
label: 'hsl(180, 100%, 90%)'
},
{
color: 'hsl(210, 100%, 10%)',
label: 'hsl(210, 100%, 10%)'
},
{
color: 'hsl(210, 100%, 20%)',
label: 'hsl(210, 100%, 20%)'
},
{
color: 'hsl(210, 100%, 30%)',
label: 'hsl(210, 100%, 30%)'
},
{
color: 'hsl(210, 100%, 40%)',
label: 'hsl(210, 100%, 40%)'
},
{
color: 'hsl(210, 100%, 50%)',
label: 'hsl(210, 100%, 50%)'
},
{
color: 'hsl(210, 100%, 60%)',
label: 'hsl(210, 100%, 60%)'
},
{
color: 'hsl(210, 100%, 70%)',
label: 'hsl(210, 100%, 70%)'
},
{
color: 'hsl(210, 100%, 80%)',
label: 'hsl(210, 100%, 80%)'
},
{
color: 'hsl(210, 100%, 90%)',
label: 'hsl(210, 100%, 90%)'
},
{
color: 'hsl(240, 100%, 10%)',
label: 'hsl(240, 100%, 10%)'
},
{
color: 'hsl(240, 100%, 20%)',
label: 'hsl(240, 100%, 20%)'
},
{
color: 'hsl(240, 100%, 30%)',
label: 'hsl(240, 100%, 30%)'
},
{
color: 'hsl(240, 100%, 40%)',
label: 'hsl(240, 100%, 40%)'
},
{
color: 'hsl(240, 100%, 50%)',
label: 'hsl(240, 100%, 50%)'
},
{
color: 'hsl(240, 100%, 60%)',
label: 'hsl(240, 100%, 60%)'
},
{
color: 'hsl(240, 100%, 70%)',
label: 'hsl(240, 100%, 70%)'
},
{
color: 'hsl(240, 100%, 80%)',
label: 'hsl(240, 100%, 80%)'
},
{
color: 'hsl(240, 100%, 90%)',
label: 'hsl(240, 100%, 90%)'
},
{
color: 'hsl(270, 100%, 10%)',
label: 'hsl(270, 100%, 10%)'
},
{
color: 'hsl(270, 100%, 20%)',
label: 'hsl(270, 100%, 20%)'
},
{
color: 'hsl(270, 100%, 30%)',
label: 'hsl(270, 100%, 30%)'
},
{
color: 'hsl(270, 100%, 40%)',
label: 'hsl(270, 100%, 40%)'
},
{
color: 'hsl(270, 100%, 50%)',
label: 'hsl(270, 100%, 50%)'
},
{
color: 'hsl(270, 100%, 60%)',
label: 'hsl(270, 100%, 60%)'
},
{
color: 'hsl(270, 100%, 70%)',
label: 'hsl(270, 100%, 70%)'
},
{
color: 'hsl(270, 100%, 80%)',
label: 'hsl(270, 100%, 80%)'
},
{
color: 'hsl(270, 100%, 90%)',
label: 'hsl(270, 100%, 90%)'
},
{
color: 'hsl(300, 100%, 10%)',
label: 'hsl(300, 100%, 10%)'
},
{
color: 'hsl(300, 100%, 20%)',
label: 'hsl(300, 100%, 20%)'
},
{
color: 'hsl(300, 100%, 30%)',
label: 'hsl(300, 100%, 30%)'
},
{
color: 'hsl(300, 100%, 40%)',
label: 'hsl(300, 100%, 40%)'
},
{
color: 'hsl(300, 100%, 50%)',
label: 'hsl(300, 100%, 50%)'
},
{
color: 'hsl(300, 100%, 60%)',
label: 'hsl(300, 100%, 60%)'
},
{
color: 'hsl(300, 100%, 70%)',
label: 'hsl(300, 100%, 70%)'
},
{
color: 'hsl(300, 100%, 80%)',
label: 'hsl(300, 100%, 80%)'
},
{
color: 'hsl(300, 100%, 90%)',
label: 'hsl(300, 100%, 90%)'
},
{
color: 'hsl(330, 100%, 10%)',
label: 'hsl(330, 100%, 10%)'
},
{
color: 'hsl(330, 100%, 20%)',
label: 'hsl(330, 100%, 20%)'
},
{
color: 'hsl(330, 100%, 30%)',
label: 'hsl(330, 100%, 30%)'
},
{
color: 'hsl(330, 100%, 40%)',
label: 'hsl(330, 100%, 40%)'
},
{
color: 'hsl(330, 100%, 50%)',
label: 'hsl(330, 100%, 50%)'
},
{
color: 'hsl(330, 100%, 60%)',
label: 'hsl(330, 100%, 60%)'
},
{
color: 'hsl(330, 100%, 70%)',
label: 'hsl(330, 100%, 70%)'
},
{
color: 'hsl(330, 100%, 80%)',
label: 'hsl(330, 100%, 80%)'
},
{
color: 'hsl(330, 100%, 90%)',
label: 'hsl(330, 100%, 90%)'
},
],
//列
columns: 9,
},
//设置字体背景颜色
fontBackgroundColor: {
colors: [
{
color: 'hsl(0, 0%, 0%)',
label: 'hsl(0, 0%, 0%)'
},
{
color: 'hsl(0, 0%, 12.5%)',
label: 'hsl(0, 0%, 12.5%)'
},
{
color: 'hsl(0, 0%, 25%)',
label: 'hsl(0, 0%, 25%)'
},
{
color: 'hsl(0, 0%, 37.5%)',
label: 'hsl(0, 0%, 37.5%)'
},
{
color: 'hsl(0, 0%, 50%)',
label: 'hsl(0, 0%, 50%)'
},
{
color: 'hsl(0, 0%, 62.5%)',
label: 'hsl(0, 0%, 62.5%)'
},
{
color: 'hsl(0, 0%, 75%)',
label: 'hsl(0, 0%, 75%)'
},
{
color: 'hsl(0, 0%, 87.5%)',
label: 'hsl(0, 0%, 87.5%)'
},
{
color: 'hsl(0, 0%, 100%)',
label: 'hsl(0, 0%, 100%)'
},
{
color: 'hsl(0, 100%, 10%)',
label: 'hsl(0, 100%, 10%)'
},
{
color: 'hsl(0, 100%, 20%)',
label: 'hsl(0, 100%, 20%)'
},
{
color: 'hsl(0, 100%, 30%)',
label: 'hsl(0, 100%, 30%)'
},
{
color: 'hsl(0, 100%, 40%)',
label: 'hsl(0, 100%, 40%)'
},
{
color: 'hsl(0, 100%, 50%)',
label: 'hsl(0, 100%, 50%)'
},
{
color: 'hsl(0, 100%, 60%)',
label: 'hsl(0, 100%, 60%)'
},
{
color: 'hsl(0, 100%, 70%)',
label: 'hsl(0, 100%, 70%)'
},
{
color: 'hsl(0, 100%, 80%)',
label: 'hsl(0, 100%, 80%)'
},
{
color: 'hsl(0, 100%, 90%)',
label: 'hsl(0, 100%, 90%)'
},
{
color: 'hsl(30, 100%, 10%)',
label: 'hsl(30, 100%, 10%)'
},
{
color: 'hsl(30, 100%, 20%)',
label: 'hsl(30, 100%, 20%)'
},
{
color: 'hsl(30, 100%, 30%)',
label: 'hsl(30, 100%, 30%)'
},
{
color: 'hsl(30, 100%, 40%)',
label: 'hsl(30, 100%, 40%)'
},
{
color: 'hsl(30, 100%, 50%)',
label: 'hsl(30, 100%, 50%)'
},
{
color: 'hsl(30, 100%, 60%)',
label: 'hsl(30, 100%, 60%)'
},
{
color: 'hsl(30, 100%, 70%)',
label: 'hsl(30, 100%, 70%)'
},
{
color: 'hsl(30, 100%, 80%)',
label: 'hsl(30, 100%, 80%)'
},
{
color: 'hsl(30, 100%, 90%)',
label: 'hsl(30, 100%, 90%)'
},
{
color: 'hsl(60, 100%, 10%)',
label: 'hsl(60, 100%, 10%)'
},
{
color: 'hsl(60, 100%, 20%)',
label: 'hsl(60, 100%, 20%)'
},
{
color: 'hsl(60, 100%, 30%)',
label: 'hsl(60, 100%, 30%)'
},
{
color: 'hsl(60, 100%, 40%)',
label: 'hsl(60, 100%, 40%)'
},
{
color: 'hsl(60, 100%, 50%)',
label: 'hsl(60, 100%, 50%)'
},
{
color: 'hsl(60, 100%, 60%)',
label: 'hsl(60, 100%, 60%)'
},
{
color: 'hsl(60, 100%, 70%)',
label: 'hsl(60, 100%, 70%)'
},
{
color: 'hsl(60, 100%, 80%)',
label: 'hsl(60, 100%, 80%)'
},
{
color: 'hsl(60, 100%, 90%)',
label: 'hsl(60, 100%, 90%)'
},
{
color: 'hsl(90, 100%, 10%)',
label: 'hsl(90, 100%, 10%)'
},
{
color: 'hsl(90, 100%, 20%)',
label: 'hsl(90, 100%, 20%)'
},
{
color: 'hsl(90, 100%, 30%)',
label: 'hsl(90, 100%, 30%)'
},
{
color: 'hsl(90, 100%, 40%)',
label: 'hsl(90, 100%, 40%)'
},
{
color: 'hsl(90, 100%, 50%)',
label: 'hsl(90, 100%, 50%)'
},
{
color: 'hsl(90, 100%, 60%)',
label: 'hsl(90, 100%, 60%)'
},
{
color: 'hsl(90, 100%, 70%)',
label: 'hsl(90, 100%, 70%)'
},
{
color: 'hsl(90, 100%, 80%)',
label: 'hsl(90, 100%, 80%)'
},
{
color: 'hsl(90, 100%, 90%)',
label: 'hsl(90, 100%, 90%)'
},
{
color: 'hsl(120, 100%, 10%)',
label: 'hsl(120, 100%, 10%)'
},
{
color: 'hsl(120, 100%, 20%)',
label: 'hsl(120, 100%, 20%)'
},
{
color: 'hsl(120, 100%, 30%)',
label: 'hsl(120, 100%, 30%)'
},
{
color: 'hsl(120, 100%, 40%)',
label: 'hsl(120, 100%, 40%)'
},
{
color: 'hsl(120, 100%, 50%)',
label: 'hsl(120, 100%, 50%)'
},
{
color: 'hsl(120, 100%, 60%)',
label: 'hsl(120, 100%, 60%)'
},
{
color: 'hsl(120, 100%, 70%)',
label: 'hsl(120, 100%, 70%)'
},
{
color: 'hsl(120, 100%, 80%)',
label: 'hsl(120, 100%, 80%)'
},
{
color: 'hsl(120, 100%, 90%)',
label: 'hsl(120, 100%, 90%)'
},
{
color: 'hsl(150, 100%, 10%)',
label: 'hsl(150, 100%, 10%)'
},
{
color: 'hsl(150, 100%, 20%)',
label: 'hsl(150, 100%, 20%)'
},
{
color: 'hsl(150, 100%, 30%)',
label: 'hsl(150, 100%, 30%)'
},
{
color: 'hsl(150, 100%, 40%)',
label: 'hsl(150, 100%, 40%)'
},
{
color: 'hsl(150, 100%, 50%)',
label: 'hsl(150, 100%, 50%)'
},
{
color: 'hsl(150, 100%, 60%)',
label: 'hsl(150, 100%, 60%)'
},
{
color: 'hsl(150, 100%, 70%)',
label: 'hsl(150, 100%, 70%)'
},
{
color: 'hsl(150, 100%, 80%)',
label: 'hsl(150, 100%, 80%)'
},
{
color: 'hsl(150, 100%, 90%)',
label: 'hsl(150, 100%, 90%)'
},
{
color: 'hsl(180, 100%, 10%)',
label: 'hsl(180, 100%, 10%)'
},
{
color: 'hsl(180, 100%, 20%)',
label: 'hsl(180, 100%, 20%)'
},
{
color: 'hsl(180, 100%, 30%)',
label: 'hsl(180, 100%, 30%)'
},
{
color: 'hsl(180, 100%, 40%)',
label: 'hsl(180, 100%, 40%)'
},
{
color: 'hsl(180, 100%, 50%)',
label: 'hsl(180, 100%, 50%)'
},
{
color: 'hsl(180, 100%, 60%)',
label: 'hsl(180, 100%, 60%)'
},
{
color: 'hsl(180, 100%, 70%)',
label: 'hsl(180, 100%, 70%)'
},
{
color: 'hsl(180, 100%, 80%)',
label: 'hsl(180, 100%, 80%)'
},
{
color: 'hsl(180, 100%, 90%)',
label: 'hsl(180, 100%, 90%)'
},
{
color: 'hsl(210, 100%, 10%)',
label: 'hsl(210, 100%, 10%)'
},
{
color: 'hsl(210, 100%, 20%)',
label: 'hsl(210, 100%, 20%)'
},
{
color: 'hsl(210, 100%, 30%)',
label: 'hsl(210, 100%, 30%)'
},
{
color: 'hsl(210, 100%, 40%)',
label: 'hsl(210, 100%, 40%)'
},
{
color: 'hsl(210, 100%, 50%)',
label: 'hsl(210, 100%, 50%)'
},
{
color: 'hsl(210, 100%, 60%)',
label: 'hsl(210, 100%, 60%)'
},
{
color: 'hsl(210, 100%, 70%)',
label: 'hsl(210, 100%, 70%)'
},
{
color: 'hsl(210, 100%, 80%)',
label: 'hsl(210, 100%, 80%)'
},
{
color: 'hsl(210, 100%, 90%)',
label: 'hsl(210, 100%, 90%)'
},
{
color: 'hsl(240, 100%, 10%)',
label: 'hsl(240, 100%, 10%)'
},
{
color: 'hsl(240, 100%, 20%)',
label: 'hsl(240, 100%, 20%)'
},
{
color: 'hsl(240, 100%, 30%)',
label: 'hsl(240, 100%, 30%)'
},
{
color: 'hsl(240, 100%, 40%)',
label: 'hsl(240, 100%, 40%)'
},
{
color: 'hsl(240, 100%, 50%)',
label: 'hsl(240, 100%, 50%)'
},
{
color: 'hsl(240, 100%, 60%)',
label: 'hsl(240, 100%, 60%)'
},
{
color: 'hsl(240, 100%, 70%)',
label: 'hsl(240, 100%, 70%)'
},
{
color: 'hsl(240, 100%, 80%)',
label: 'hsl(240, 100%, 80%)'
},
{
color: 'hsl(240, 100%, 90%)',
label: 'hsl(240, 100%, 90%)'
},
{
color: 'hsl(270, 100%, 10%)',
label: 'hsl(270, 100%, 10%)'
},
{
color: 'hsl(270, 100%, 20%)',
label: 'hsl(270, 100%, 20%)'
},
{
color: 'hsl(270, 100%, 30%)',
label: 'hsl(270, 100%, 30%)'
},
{
color: 'hsl(270, 100%, 40%)',
label: 'hsl(270, 100%, 40%)'
},
{
color: 'hsl(270, 100%, 50%)',
label: 'hsl(270, 100%, 50%)'
},
{
color: 'hsl(270, 100%, 60%)',
label: 'hsl(270, 100%, 60%)'
},
{
color: 'hsl(270, 100%, 70%)',
label: 'hsl(270, 100%, 70%)'
},
{
color: 'hsl(270, 100%, 80%)',
label: 'hsl(270, 100%, 80%)'
},
{
color: 'hsl(270, 100%, 90%)',
label: 'hsl(270, 100%, 90%)'
},
{
color: 'hsl(300, 100%, 10%)',
label: 'hsl(300, 100%, 10%)'
},
{
color: 'hsl(300, 100%, 20%)',
label: 'hsl(300, 100%, 20%)'
},
{
color: 'hsl(300, 100%, 30%)',
label: 'hsl(300, 100%, 30%)'
},
{
color: 'hsl(300, 100%, 40%)',
label: 'hsl(300, 100%, 40%)'
},
{
color: 'hsl(300, 100%, 50%)',
label: 'hsl(300, 100%, 50%)'
},
{
color: 'hsl(300, 100%, 60%)',
label: 'hsl(300, 100%, 60%)'
},
{
color: 'hsl(300, 100%, 70%)',
label: 'hsl(300, 100%, 70%)'
},
{
color: 'hsl(300, 100%, 80%)',
label: 'hsl(300, 100%, 80%)'
},
{
color: 'hsl(300, 100%, 90%)',
label: 'hsl(300, 100%, 90%)'
},
{
color: 'hsl(330, 100%, 10%)',
label: 'hsl(330, 100%, 10%)'
},
{
color: 'hsl(330, 100%, 20%)',
label: 'hsl(330, 100%, 20%)'
},
{
color: 'hsl(330, 100%, 30%)',
label: 'hsl(330, 100%, 30%)'
},
{
color: 'hsl(330, 100%, 40%)',
label: 'hsl(330, 100%, 40%)'
},
{
color: 'hsl(330, 100%, 50%)',
label: 'hsl(330, 100%, 50%)'
},
{
color: 'hsl(330, 100%, 60%)',
label: 'hsl(330, 100%, 60%)'
},
{
color: 'hsl(330, 100%, 70%)',
label: 'hsl(330, 100%, 70%)'
},
{
color: 'hsl(330, 100%, 80%)',
label: 'hsl(330, 100%, 80%)'
},
{
color: 'hsl(330, 100%, 90%)',
label: 'hsl(330, 100%, 90%)'
},
],
columns: 9,
},
link: {
// Automatically add target="_blank" and rel="noopener noreferrer" to all external links.
addTargetToExternalLinks: true,
decorators: {
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
},
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
},
language: 'zh-cn',
//设置图片位置以及大小
image: {
styles: [
'alignLeft', 'alignCenter', 'alignRight'
],
resizeOptions: [
{
name: 'imageResize:original',
label: '原版',
value: null
},
{
name: 'imageResize:50',
label: '50%',
value: '50'
},
{
name: 'imageResize:75',
label: '75%',
value: '75'
}
],
toolbar: [
'imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight',
'|',
'imageResize',
'|',
'imageTextAlternative'
]
},
//表格配置
table: {
contentToolbar: [
'tableColumn', 'tableRow', 'mergeTableCells',
'tableProperties', 'tableCellProperties'
],
tableProperties: {
// The default styles for tables in the editor.
// They should be synchronized with the content styles.
defaultProperties: {
borderStyle: 'solid',
borderColor: '#666',
borderWidth: '1px',
alignment: 'left',
width: '550px',
height: '100px'
},
// The default styles for table cells in the editor.
// They should be synchronized with the content styles.
tableCellProperties: {
defaultProperties: {
horizontalAlignment: 'center',
verticalAlignment: 'bottom',
padding: '10px',
borderStyle: 'solid',
borderColor: '#666',
borderWidth: '1px',
}
}
}
},
//访问许可证密钥
licenseKey: '',
//ckfinder上传
simpleUpload: {
uploadUrl: process.env.VUE_APP_BASE_API + `/common/upload`,//上传图片的接口
withCredentials: true,
headers: {
Authorization: 'Bearer ' + getToken()
},
data:{
uploadParams: {
bizType: "DoctorRecruit",
},
},
},
// ckfinder: {
// // Upload the images to the server using the CKFinder QuickUpload command.
// uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
// headers: {
// Authorization: 'Bearer ' + getToken()
// },
// data:{
// uploadParams: {
// bizType: "DoctorRecruit",
// },
// },
// },
//自定义providers,给上传的视频链接设置相应的html，让其可以正常在富文本编辑器中显示
mediaEmbed: {
providers: [
{
name: 'myprovider',
url: [
/^lizzy.*\.com.*\/media\/(\w+)/,
/^www\.lizzy.*/,
/^.*/
],
html: match => {
//获取媒体url
const input = match['input'];
return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
'<video controls="controls" autoplay name="media" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;">'+
`<source src="${input}" type="video/mp4">`+
'</video>'+
'</div>'
);
}
}
]
},
//自定义字体
fontFamily: {
options: [
'default',
'Blackoak Std',
'宋体,SimSun',
'新宋体,NSimSun',
'黑体,SimHei',
'微软雅黑,Microsoft YaHei',
'楷体_GB2312,KaiTi_GB2312',
'隶书,LiSu',
'幼园,YouYuan',
'华文细黑,STXihei',
'细明体,MingLiU',
'新细明体,PMingLiU'
]
},
},
content: this.value,
uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
headers: {
Authorization: 'Bearer ' + getToken()
},
uploadParams: {
bizType: "DoctorRecruit",
},
myEditor:null,
fileList:[]
};
},
watch: {
value: function () {
this.content = this.value;
},
content: function () {
this.$emit("input", this.content);
}
},
mounted() {
// this.addQuillTitle()
this.uploadParams.bizType = this.bizType
},
methods: {
onReady(editor) {
// 自定义上传图片插件
editor.plugins.get("FileRepository").createUploadAdapter = loader => {
return new MyUploadAdapter(loader, this.uploadParams.bizType);
};
this.myEditor = editor
},
handlePreview(file) {
console.log(file);
},
handleSuccess(response, file, fileList) {
var obj = document.createElement('a')
obj.setAttribute('href',
response.data.fileUrl
)
obj.setAttribute('download', 'file')
obj.setAttribute('rel', 'noopener noreferrer')
obj.innerHTML = '<span style="color:#409eff; text-decoration: underline;">'+response.data.attNewName+'</span>'
const viewFragment = this.myEditor.data.processor.toView(obj.outerHTML);
const modelFragment = this.myEditor.data.toModel(viewFragment);
this.myEditor.model.insertContent(modelFragment, this.myEditor.model.document.selection);
},
}
};
</script>
<style>
.ck-editor__editable { min-height: 100px; }
:root {
--ck-z-default: 100;
--ck-z-modal: calc( var(--ck-z-default) + 2999 );
}
.ck-content .table {
float: left;
width: 550px;
height: 100px;
}
.ck-content .table table {
border-style: solid;
border-color: #666;
border-width: 1px;
}
.ck-content .table table td {
text-align: center;
vertical-align: bottom;
padding: 10px;
border-style: solid;
border-color: #666;
border-width: 1px;
}
</style>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)