editor5+vue2 实现自定义文件上传插件
作者：互联网
功能描述：上传文件，在富文本中自动增加一个可下载的超链接
参考官网创建自定义插件：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>
标签：插件,50%,自定义,color,100%,editor5,hsl,label,import 来源： https://blog.csdn.net/f826241061/article/details/120976668