parent
9f2336b918
commit
be160644ff
@ -0,0 +1,10 @@
|
||||
ckeditor5-build-classic/node_modules/
|
||||
./vscode
|
||||
GinSkeleton/.vscode
|
||||
GinSkeleton/.idea/
|
||||
.idea/
|
||||
.idea
|
||||
GinSkeleton/storage/
|
||||
GinSkeleton/storage/
|
||||
|
||||
ckeditor5/node_modules/*
|
||||
@ -1,6 +0,0 @@
|
||||
/.idea/
|
||||
.idea/
|
||||
.idea
|
||||
/storage/logs/*
|
||||
/storage/uploaded/*
|
||||
/public/storage
|
||||
|
Before Width: | Height: | Size: 146 KiB |
@ -1,14 +0,0 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
||||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
*/
|
||||
|
||||
/* eslint-env node */
|
||||
|
||||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
rules: {
|
||||
'ckeditor5-rules/ckeditor-imports': 'off'
|
||||
}
|
||||
};
|
||||
@ -1,40 +0,0 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
||||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
*/
|
||||
import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
|
||||
import { Essentials } from '@ckeditor/ckeditor5-essentials';
|
||||
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
|
||||
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
|
||||
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
|
||||
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
|
||||
import { CKBox } from '@ckeditor/ckeditor5-ckbox';
|
||||
import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
|
||||
import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
|
||||
import { Heading } from '@ckeditor/ckeditor5-heading';
|
||||
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
|
||||
import { Indent } from '@ckeditor/ckeditor5-indent';
|
||||
import { Link } from '@ckeditor/ckeditor5-link';
|
||||
import { List } from '@ckeditor/ckeditor5-list';
|
||||
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
|
||||
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
|
||||
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
|
||||
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
|
||||
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
|
||||
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
|
||||
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
|
||||
export default class ClassicEditor extends ClassicEditorBase {
|
||||
static builtinPlugins: (typeof Essentials | typeof CKFinderUploadAdapter | typeof Autoformat | typeof Bold | typeof Italic | typeof BlockQuote | typeof CKBox | typeof CKFinder | typeof CloudServices | typeof EasyImage | typeof Heading | typeof Image | typeof ImageCaption | typeof ImageStyle | typeof ImageToolbar | typeof ImageUpload | typeof Indent | typeof Link | typeof List | typeof MediaEmbed | typeof Paragraph | typeof PasteFromOffice | typeof PictureEditing | typeof Table | typeof TableToolbar | typeof TextTransformation | typeof Alignment)[];
|
||||
static defaultConfig: {
|
||||
toolbar: {
|
||||
items: string[];
|
||||
};
|
||||
image: {
|
||||
toolbar: string[];
|
||||
};
|
||||
table: {
|
||||
contentToolbar: string[];
|
||||
};
|
||||
language: string;
|
||||
};
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@ -1,94 +0,0 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
||||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
*/
|
||||
|
||||
// The editor creator to use.
|
||||
import { ClassicEditor as ClassicEditorBase } from '@ckeditor/ckeditor5-editor-classic';
|
||||
|
||||
import { Essentials } from '@ckeditor/ckeditor5-essentials';
|
||||
import { CKFinderUploadAdapter } from '@ckeditor/ckeditor5-adapter-ckfinder';
|
||||
import { Autoformat } from '@ckeditor/ckeditor5-autoformat';
|
||||
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
|
||||
import { BlockQuote } from '@ckeditor/ckeditor5-block-quote';
|
||||
import { CKBox } from '@ckeditor/ckeditor5-ckbox';
|
||||
import { CKFinder } from '@ckeditor/ckeditor5-ckfinder';
|
||||
import { EasyImage } from '@ckeditor/ckeditor5-easy-image';
|
||||
import { Heading } from '@ckeditor/ckeditor5-heading';
|
||||
import { Image, ImageCaption, ImageStyle, ImageToolbar, ImageUpload, PictureEditing } from '@ckeditor/ckeditor5-image';
|
||||
import { Indent } from '@ckeditor/ckeditor5-indent';
|
||||
import { Link } from '@ckeditor/ckeditor5-link';
|
||||
import { List } from '@ckeditor/ckeditor5-list';
|
||||
import { MediaEmbed } from '@ckeditor/ckeditor5-media-embed';
|
||||
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
|
||||
import { PasteFromOffice } from '@ckeditor/ckeditor5-paste-from-office';
|
||||
import { Table, TableToolbar } from '@ckeditor/ckeditor5-table';
|
||||
import { TextTransformation } from '@ckeditor/ckeditor5-typing';
|
||||
import { CloudServices } from '@ckeditor/ckeditor5-cloud-services';
|
||||
|
||||
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment'; // <--- 新加的插件
|
||||
|
||||
export default class ClassicEditor extends ClassicEditorBase {
|
||||
public static override builtinPlugins = [
|
||||
Essentials,
|
||||
CKFinderUploadAdapter,
|
||||
Autoformat,
|
||||
Bold,
|
||||
Italic,
|
||||
BlockQuote,
|
||||
CKBox,
|
||||
CKFinder,
|
||||
CloudServices,
|
||||
EasyImage,
|
||||
Heading,
|
||||
Image,
|
||||
ImageCaption,
|
||||
ImageStyle,
|
||||
ImageToolbar,
|
||||
ImageUpload,
|
||||
Indent,
|
||||
Link,
|
||||
List,
|
||||
MediaEmbed,
|
||||
Paragraph,
|
||||
PasteFromOffice,
|
||||
PictureEditing,
|
||||
Table,
|
||||
TableToolbar,
|
||||
TextTransformation,
|
||||
|
||||
Alignment // <--- 新加的插件
|
||||
];
|
||||
|
||||
public static override defaultConfig = {
|
||||
toolbar: {
|
||||
items: [
|
||||
'undo', 'redo',
|
||||
'|', 'heading',
|
||||
'|', 'alignment', // <--- 新加的插件
|
||||
'|', 'bold', 'italic',
|
||||
'|', 'link', 'uploadImage', 'insertTable', 'blockQuote', 'mediaEmbed',
|
||||
'|', 'bulletedList', 'numberedList', 'outdent', 'indent'
|
||||
]
|
||||
},
|
||||
image: {
|
||||
toolbar: [
|
||||
'imageStyle:inline',
|
||||
'imageStyle:block',
|
||||
'imageStyle:side',
|
||||
'|',
|
||||
'toggleImageCaption',
|
||||
'imageTextAlternative'
|
||||
]
|
||||
},
|
||||
table: {
|
||||
contentToolbar: [
|
||||
'tableColumn',
|
||||
'tableRow',
|
||||
'mergeTableCells'
|
||||
]
|
||||
},
|
||||
// This value must be kept in sync with the language defined in webpack.config.js.
|
||||
language: 'zh-cn'
|
||||
};
|
||||
}
|
||||
@ -1,237 +0,0 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
||||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
*/
|
||||
|
||||
/* globals document */
|
||||
|
||||
import ClassicEditor from '../src/ckeditor.js';
|
||||
import BaseClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
|
||||
import { describeMemoryUsage, testMemoryUsage } from '@ckeditor/ckeditor5-core/tests/_utils/memory.js';
|
||||
|
||||
describe( 'ClassicEditor build', () => {
|
||||
let editor, editorElement;
|
||||
|
||||
beforeEach( () => {
|
||||
editorElement = document.createElement( 'div' );
|
||||
editorElement.innerHTML = '<p><strong>foo</strong> bar</p>';
|
||||
|
||||
document.body.appendChild( editorElement );
|
||||
} );
|
||||
|
||||
afterEach( () => {
|
||||
editorElement.remove();
|
||||
editor = null;
|
||||
} );
|
||||
|
||||
describe( 'build', () => {
|
||||
it( 'contains plugins', () => {
|
||||
expect( ClassicEditor.builtinPlugins ).to.not.be.empty;
|
||||
} );
|
||||
|
||||
it( 'contains config', () => {
|
||||
expect( ClassicEditor.defaultConfig.toolbar ).to.not.be.empty;
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'create()', () => {
|
||||
beforeEach( () => {
|
||||
return ClassicEditor.create( editorElement )
|
||||
.then( newEditor => {
|
||||
editor = newEditor;
|
||||
} );
|
||||
} );
|
||||
|
||||
afterEach( () => {
|
||||
return editor.destroy();
|
||||
} );
|
||||
|
||||
it( 'creates an instance which inherits from the ClassicEditor', () => {
|
||||
expect( editor ).to.be.instanceof( ClassicEditor );
|
||||
expect( editor ).to.be.instanceof( BaseClassicEditor );
|
||||
} );
|
||||
|
||||
it( 'loads data from the editor element', () => {
|
||||
expect( editor.getData() ).to.equal( '<p><strong>foo</strong> bar</p>' );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'destroy()', () => {
|
||||
beforeEach( () => {
|
||||
return ClassicEditor.create( editorElement )
|
||||
.then( newEditor => {
|
||||
editor = newEditor;
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'clears editor element if config.updateSourceElementOnDestroy flag is not set', () => {
|
||||
editor.setData( '<p>foo</p>' );
|
||||
|
||||
return editor.destroy()
|
||||
.then( () => {
|
||||
expect( editorElement.innerHTML ).to.equal( '' );
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'sets the data back to the editor element if config.updateSourceElementOnDestroy flag is set', () => {
|
||||
editor.setData( '<p>foo</p>' );
|
||||
editor.config.set( 'updateSourceElementOnDestroy', true );
|
||||
|
||||
return editor.destroy()
|
||||
.then( () => {
|
||||
expect( editorElement.innerHTML ).to.equal( '<p>foo</p>' );
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'restores the editor element', () => {
|
||||
expect( editor.sourceElement.style.display ).to.equal( 'none' );
|
||||
|
||||
return editor.destroy()
|
||||
.then( () => {
|
||||
expect( editor.sourceElement.style.display ).to.equal( '' );
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'plugins', () => {
|
||||
beforeEach( () => {
|
||||
return ClassicEditor.create( editorElement )
|
||||
.then( newEditor => {
|
||||
editor = newEditor;
|
||||
} );
|
||||
} );
|
||||
|
||||
afterEach( () => {
|
||||
return editor.destroy();
|
||||
} );
|
||||
|
||||
it( 'paragraph works', () => {
|
||||
const data = '<p>Some text inside a paragraph.</p>';
|
||||
|
||||
editor.setData( data );
|
||||
expect( editor.getData() ).to.equal( data );
|
||||
} );
|
||||
|
||||
it( 'basic-styles work', () => {
|
||||
const data = [
|
||||
'<p>',
|
||||
'<strong>Test:strong</strong>',
|
||||
'<i>Test:i</i>',
|
||||
'</p>'
|
||||
].join( '' );
|
||||
|
||||
editor.setData( data );
|
||||
expect( editor.getData() ).to.equal( data );
|
||||
} );
|
||||
|
||||
it( 'block-quote works', () => {
|
||||
const data = '<blockquote><p>Quote</p></blockquote>';
|
||||
|
||||
editor.setData( data );
|
||||
expect( editor.getData() ).to.equal( data );
|
||||
} );
|
||||
|
||||
it( 'heading works', () => {
|
||||
const data = [
|
||||
'<h2>Heading 1.</h2>',
|
||||
'<h3>Heading 1.1</h3>',
|
||||
'<h4>Heading 1.1.1</h4>',
|
||||
'<h4>Heading 1.1.2</h4>',
|
||||
'<h3>Heading 1.2</h3>',
|
||||
'<h4>Heading 1.2.1</h4>',
|
||||
'<h2>Heading 2</h2>'
|
||||
].join( '' );
|
||||
|
||||
editor.setData( data );
|
||||
expect( editor.getData() ).to.equal( data );
|
||||
} );
|
||||
|
||||
it( 'image works', () => {
|
||||
const data = '<figure class="image"><img src="/assets/sample.png"></figure>';
|
||||
|
||||
editor.setData( data );
|
||||
expect( editor.getData() ).to.equal( data );
|
||||
} );
|
||||
|
||||
it( 'list works', () => {
|
||||
const data = [
|
||||
'<ul>',
|
||||
'<li>Item 1.</li>',
|
||||
'<li>Item 2.</li>',
|
||||
'</ul>',
|
||||
'<ol>',
|
||||
'<li>Item 1.</li>',
|
||||
'<li>Item 2.</li>',
|
||||
'</ol>'
|
||||
].join( '' );
|
||||
|
||||
editor.setData( data );
|
||||
expect( editor.getData() ).to.equal( data );
|
||||
} );
|
||||
|
||||
it( 'link works', () => {
|
||||
const data = '<p><a href="//ckeditor.com">CKEditor.com</a></p>';
|
||||
|
||||
editor.setData( data );
|
||||
expect( editor.getData() ).to.equal( data );
|
||||
} );
|
||||
} );
|
||||
|
||||
describe( 'config', () => {
|
||||
afterEach( () => {
|
||||
return editor.destroy();
|
||||
} );
|
||||
|
||||
// https://github.com/ckeditor/ckeditor5/issues/572
|
||||
it( 'allows configuring toolbar items through config.toolbar', () => {
|
||||
return ClassicEditor
|
||||
.create( editorElement, {
|
||||
toolbar: [ 'bold' ]
|
||||
} )
|
||||
.then( newEditor => {
|
||||
editor = newEditor;
|
||||
|
||||
expect( editor.ui.view.toolbar.items.length ).to.equal( 1 );
|
||||
} );
|
||||
} );
|
||||
|
||||
// https://github.com/ckeditor/ckeditor5/issues/572
|
||||
it( 'allows configuring toolbar offset without overriding toolbar items', () => {
|
||||
return ClassicEditor
|
||||
.create( editorElement, {
|
||||
ui: {
|
||||
viewportOffset: {
|
||||
top: 42
|
||||
}
|
||||
}
|
||||
} )
|
||||
.then( newEditor => {
|
||||
editor = newEditor;
|
||||
|
||||
expect( editor.ui.view.toolbar.items.length ).to.equal( 18 );
|
||||
expect( editor.ui.view.stickyPanel.viewportTopOffset ).to.equal( 42 );
|
||||
} );
|
||||
} );
|
||||
|
||||
it( 'allows removing built-in toolbar items', () => {
|
||||
return ClassicEditor
|
||||
.create( editorElement, {
|
||||
toolbar: {
|
||||
removeItems: [ 'italic' ]
|
||||
}
|
||||
} )
|
||||
.then( newEditor => {
|
||||
editor = newEditor;
|
||||
|
||||
expect( editor.ui.view.toolbar.items.length ).to.equal( 17 );
|
||||
expect( editor.ui.view.toolbar.items.find( item => item.label === 'Italic' ) ).to.be.undefined;
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
describeMemoryUsage( () => {
|
||||
testMemoryUsage(
|
||||
'should not grow on multiple create/destroy',
|
||||
() => ClassicEditor.create( document.querySelector( '#mem-editor' ) ) );
|
||||
} );
|
||||
} );
|
||||
@ -1,27 +0,0 @@
|
||||
<div id="editor">
|
||||
<h2>About CKEditor 5</h2>
|
||||
|
||||
<p>This is <a href="https://ckeditor.com">CKEditor 5</a>.</p>
|
||||
|
||||
<figure class="image">
|
||||
<img src="./sample.jpg" alt="Autumn fields" />
|
||||
</figure>
|
||||
|
||||
<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets, we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
|
||||
|
||||
<p>We explained this design choice in <a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">“CKEditor 5: The future of rich text editing“</a>:</p>
|
||||
|
||||
<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be developing several out-of-the-box solutions based on it, which will be available to use in many different contexts. It will be a real “one size fits all” approach, from little requirements, to super advanced full featured applications.</p></blockquote>
|
||||
|
||||
<h3>Notes</h3>
|
||||
|
||||
<p><a href="https://ckeditor.com">CKEditor 5</a> is <i>under heavy development</i> and this demo is not production-ready software. For example:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
|
||||
<li>Firefox requires enabling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">“dom.select_events.enabled”</a> option.</li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a> is under development (content filtering is unstable).</li>
|
||||
</ul>
|
||||
|
||||
<p>It has <em>bugs</em> that we are aware of — and that we will be working on in the next few iterations of the project. Stay tuned for some updates soon!</p>
|
||||
</div>
|
||||
@ -1,17 +0,0 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
||||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
*/
|
||||
|
||||
/* eslint-env commonjs */
|
||||
/* globals window, document, console */
|
||||
|
||||
const ClassicEditor = require( '../../build/ckeditor' );
|
||||
|
||||
ClassicEditor.create( document.querySelector( '#editor' ) )
|
||||
.then( editor => {
|
||||
window.editor = editor;
|
||||
} )
|
||||
.catch( error => {
|
||||
console.error( 'There was a problem initializing the editor.', error );
|
||||
} );
|
||||
@ -1,27 +0,0 @@
|
||||
<div id="editor">
|
||||
<h2>About CKEditor 5</h2>
|
||||
|
||||
<p>This is <a href="https://ckeditor.com">CKEditor 5</a>.</p>
|
||||
|
||||
<figure class="image">
|
||||
<img src="./sample.jpg" alt="Autumn fields" />
|
||||
</figure>
|
||||
|
||||
<p>After more than 2 years of building the next generation editor from scratch and closing over 980 tickets, we created a highly <strong>extensible and flexible architecture</strong> which consists of an <strong>amazing editing framework</strong> and <strong>editing solutions</strong> that will be built on top of it.</p>
|
||||
|
||||
<p>We explained this design choice in <a href="https://medium.com/content-uneditable/ckeditor-5-the-future-of-rich-text-editing-2b9300f9df2c">“CKEditor 5: The future of rich text editing“</a>:</p>
|
||||
|
||||
<blockquote><p>(…) we are changing our approach with CKEditor 5. We will no longer have only two solutions available, instead CKEditor will be seen as a framework for editing solutions. At the same time, we will be developing several out-of-the-box solutions based on it, which will be available to use in many different contexts. It will be a real “one size fits all” approach, from little requirements, to super advanced full featured applications.</p></blockquote>
|
||||
|
||||
<h3>Notes</h3>
|
||||
|
||||
<p><a href="https://ckeditor.com">CKEditor 5</a> is <i>under heavy development</i> and this demo is not production-ready software. For example:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Only Chrome, Opera and Safari are supported</strong>.</li>
|
||||
<li>Firefox requires enabling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/onselectionchange">“dom.select_events.enabled”</a> option.</li>
|
||||
<li><a href="https://github.com/ckeditor/ckeditor5/issues/342">Support for pasting</a> is under development (content filtering is unstable).</li>
|
||||
</ul>
|
||||
|
||||
<p>It has <em>bugs</em> that we are aware of — and that we will be working on in the next few iterations of the project. Stay tuned for some updates soon!</p>
|
||||
</div>
|
||||
@ -1,16 +0,0 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
||||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
*/
|
||||
|
||||
/* globals window, document, console */
|
||||
|
||||
import ClassicEditor from '../../build/ckeditor.js';
|
||||
|
||||
ClassicEditor.create( document.querySelector( '#editor' ) )
|
||||
.then( editor => {
|
||||
window.editor = editor;
|
||||
} )
|
||||
.catch( error => {
|
||||
console.error( 'There was a problem initializing the editor.', error );
|
||||
} );
|
||||
|
Before Width: | Height: | Size: 112 KiB |
@ -1,7 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig_master.json",
|
||||
"include": [
|
||||
"src",
|
||||
"../../typings"
|
||||
]
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
{
|
||||
"extends": "./tsconfig_master.json",
|
||||
"compilerOptions": {
|
||||
"declaration": true,
|
||||
"emitDeclarationOnly": true,
|
||||
"declarationDir": "build",
|
||||
"stripInternal": true
|
||||
},
|
||||
"include": [
|
||||
"src",
|
||||
"../../typings"
|
||||
]
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
/*
|
||||
* The base configuration used by all other configuration.
|
||||
*
|
||||
* Be careful when updating this file. It may affect building docs, preparing DLLs, executing tests, or impacts the release process.
|
||||
*/
|
||||
{
|
||||
"compilerOptions": {
|
||||
/**
|
||||
* TypeScript automagically loads typings from all "@types/*" packages if the "compilerOptions.types" array is not defined in
|
||||
* this file. However, if some dependencies have "@types/*" packages as their dependencies, they'll also be loaded as well.
|
||||
* As a result, TypeScript loaded "@types/node" which we don't want to use, because it allows using Node.js specific APIs that
|
||||
* are not available in the browsers.
|
||||
*
|
||||
* To avoid such issues, we defined this empty "types" to disable automatic inclusion of the "@types/*" packages.
|
||||
*/
|
||||
"types": [],
|
||||
"lib": [
|
||||
"ES2019", // Must match the "target"
|
||||
"ES2020.String",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitOverride": true,
|
||||
"strict": true,
|
||||
"module": "es6",
|
||||
"target": "es2019",
|
||||
"sourceMap": true,
|
||||
"allowJs": true,
|
||||
"moduleResolution": "node",
|
||||
"skipLibCheck": true,
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": [
|
||||
"./typings/"
|
||||
]
|
||||
}
|
||||
@ -1,82 +0,0 @@
|
||||
/**
|
||||
* @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
||||
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||||
*/
|
||||
|
||||
/* eslint-env node */
|
||||
|
||||
import path from 'path';
|
||||
import module from 'module';
|
||||
import { fileURLToPath } from 'url';
|
||||
import webpack from 'webpack';
|
||||
import { bundler, loaders } from '@ckeditor/ckeditor5-dev-utils';
|
||||
import { CKEditorTranslationsPlugin } from '@ckeditor/ckeditor5-dev-translations';
|
||||
import TerserPlugin from 'terser-webpack-plugin';
|
||||
|
||||
|
||||
const require = module.createRequire( import.meta.url );
|
||||
const __filename = fileURLToPath( import.meta.url );
|
||||
const __dirname = path.dirname( __filename );
|
||||
|
||||
export default {
|
||||
devtool: 'source-map',
|
||||
performance: { hints: false },
|
||||
|
||||
entry: path.resolve( __dirname, 'src', 'ckeditor.ts' ),
|
||||
|
||||
output: {
|
||||
// The name under which the editor will be exported.
|
||||
library: 'ClassicEditor',
|
||||
|
||||
path: path.resolve( __dirname, 'build' ),
|
||||
filename: 'ckeditor.js',
|
||||
libraryTarget: 'umd',
|
||||
libraryExport: 'default'
|
||||
},
|
||||
|
||||
optimization: {
|
||||
minimizer: [
|
||||
new TerserPlugin( {
|
||||
terserOptions: {
|
||||
output: {
|
||||
// Preserve CKEditor 5 license comments.
|
||||
comments: /^!/
|
||||
}
|
||||
},
|
||||
extractComments: false
|
||||
} )
|
||||
]
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new CKEditorTranslationsPlugin( {
|
||||
// UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
|
||||
// When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
|
||||
language: 'zh-cn',
|
||||
additionalLanguages: 'all'
|
||||
} ),
|
||||
new webpack.BannerPlugin( {
|
||||
banner: bundler.getLicenseBanner(),
|
||||
raw: true
|
||||
} )
|
||||
],
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
loaders.getIconsLoader( { matchExtensionOnly: true } ),
|
||||
loaders.getStylesLoader( {
|
||||
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
|
||||
minify: true
|
||||
} ),
|
||||
loaders.getTypeScriptLoader()
|
||||
]
|
||||
},
|
||||
|
||||
resolve: {
|
||||
extensions: [ '.ts', '.js', '.json' ],
|
||||
extensionAlias: {
|
||||
'.js': [ '.js', '.ts' ]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@ -0,0 +1,30 @@
|
||||
# myproject
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
|
||||
|
||||
|
||||
npm install ckeditor5
|
||||
npm install @ckeditor/ckeditor5-vue
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,48 @@
|
||||
{
|
||||
"name": "myproject",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@ckeditor/ckeditor5-vue": "^7.2.0",
|
||||
|
||||
"ckeditor5": "^43.2.0",
|
||||
"core-js": "^3.8.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"html-docx-js-typescript": "^0.1.5",
|
||||
"vue": "^3.2.13"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"parserOptions": {
|
||||
"parser": "@babel/eslint-parser"
|
||||
},
|
||||
"rules": {}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead",
|
||||
"not ie 11"
|
||||
]
|
||||
}
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,17 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,210 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Oswald&family=PT+Serif:ital,wght@0,400;0,700;1,400&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');
|
||||
|
||||
@media print {
|
||||
body {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.main-container {
|
||||
--ckeditor5-preview-height: 700px;
|
||||
font-family: 'Lato';
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ck-content {
|
||||
font-family: 'Lato';
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.editor-container__editor-wrapper {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.editor-container_document-editor {
|
||||
border: 1px solid var(--ck-color-base-border);
|
||||
}
|
||||
|
||||
.editor-container_document-editor .editor-container__toolbar {
|
||||
display: flex;
|
||||
position: relative;
|
||||
box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
|
||||
}
|
||||
|
||||
.editor-container_document-editor .editor-container__toolbar > .ck.ck-toolbar {
|
||||
flex-grow: 1;
|
||||
width: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.editor-container_document-editor .editor-container__menu-bar > .ck.ck-menu-bar {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.editor-container_document-editor .editor-container__editor-wrapper {
|
||||
max-height: var(--ckeditor5-preview-height);
|
||||
min-height: var(--ckeditor5-preview-height);
|
||||
overflow-y: scroll;
|
||||
background: var(--ck-color-base-foreground);
|
||||
}
|
||||
|
||||
.editor-container_document-editor .editor-container__editor {
|
||||
margin-top: 28px;
|
||||
margin-bottom: 28px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor-container_document-editor .editor-container__editor .ck.ck-editor__editable {
|
||||
box-sizing: border-box;
|
||||
min-width: calc(210mm + 2px);
|
||||
max-width: calc(210mm + 2px);
|
||||
min-height: 297mm;
|
||||
height: fit-content;
|
||||
padding: 20mm 12mm;
|
||||
border: 1px hsl(0, 0%, 82.7%) solid;
|
||||
background: hsl(0, 0%, 100%);
|
||||
box-shadow: 0 2px 3px hsla(0, 0%, 0%, 0.078);
|
||||
flex: 1 1 auto;
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
}
|
||||
|
||||
.ck-content h3.category {
|
||||
font-family: 'Oswald';
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
letter-spacing: 10px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ck-content h2.document-title {
|
||||
font-family: 'Oswald';
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.ck-content h3.document-subtitle {
|
||||
font-family: 'Oswald';
|
||||
font-size: 20px;
|
||||
color: #555;
|
||||
margin: 0 0 1em;
|
||||
font-weight: bold;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ck-content p.info-box {
|
||||
--background-size: 30px;
|
||||
--background-color: #e91e63;
|
||||
padding: 1.2em 2em;
|
||||
border: 1px solid var(--background-color);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--background-color) 0%,
|
||||
var(--background-color) var(--background-size),
|
||||
transparent var(--background-size)
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent calc(100% - var(--background-size)),
|
||||
var(--background-color) calc(100% - var(--background-size)),
|
||||
var(--background-color)
|
||||
);
|
||||
border-radius: 10px;
|
||||
margin: 1.5em 2em;
|
||||
box-shadow: 5px 5px 0 #ffe6ef;
|
||||
}
|
||||
|
||||
.ck-content blockquote.side-quote {
|
||||
font-family: 'Oswald';
|
||||
font-style: normal;
|
||||
float: right;
|
||||
width: 35%;
|
||||
position: relative;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
z-index: 1;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.ck-content blockquote.side-quote::before {
|
||||
content: '“';
|
||||
position: absolute;
|
||||
top: -37px;
|
||||
left: -10px;
|
||||
display: block;
|
||||
font-size: 200px;
|
||||
color: #e7e7e7;
|
||||
z-index: -1;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ck-content blockquote.side-quote p {
|
||||
font-size: 2em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.ck-content blockquote.side-quote p:last-child:not(:first-child) {
|
||||
font-size: 1.3em;
|
||||
text-align: right;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.ck-content span.marker {
|
||||
background: yellow;
|
||||
}
|
||||
|
||||
.ck-content span.spoiler {
|
||||
background: #000;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.ck-content span.spoiler:hover {
|
||||
background: #000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.ck-content pre.fancy-code {
|
||||
border: 0;
|
||||
margin-left: 2em;
|
||||
margin-right: 2em;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.ck-content pre.fancy-code::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 13px;
|
||||
background: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NCAxMyI+CiAgPGNpcmNsZSBjeD0iNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGMzZCNUMiLz4KICA8Y2lyY2xlIGN4PSIyNi41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiNGOUJFNEQiLz4KICA8Y2lyY2xlIGN4PSI0Ny41IiBjeT0iNi41IiByPSI2LjUiIGZpbGw9IiM1NkM0NTMiLz4KPC9zdmc+Cg==);
|
||||
margin-bottom: 8px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ck-content pre.fancy-code-dark {
|
||||
background: #272822;
|
||||
color: #fff;
|
||||
box-shadow: 5px 5px 0 #0000001f;
|
||||
}
|
||||
|
||||
.ck-content pre.fancy-code-bright {
|
||||
background: #dddfe0;
|
||||
color: #000;
|
||||
box-shadow: 5px 5px 0 #b3b3b3;
|
||||
}
|
||||
@ -0,0 +1,427 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="main-container">
|
||||
<div class="editor-container editor-container_document-editor editor-container_include-style" ref="editorContainerElement">
|
||||
<div class="editor-container__menu-bar" ref="editorMenuBarElement"></div>
|
||||
<div class="editor-container__toolbar" ref="editorToolbarElement"></div>
|
||||
<div class="editor-container__editor-wrapper">
|
||||
<div class="editor-container__editor">
|
||||
<div ref="editorElement">
|
||||
<ckeditor v-if="isLayoutReady" v-model="config.initialData" :editor="editor" :config="config" @ready="onReady" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
DecoupledEditor,
|
||||
AccessibilityHelp,
|
||||
Alignment,
|
||||
Autoformat,
|
||||
AutoImage,
|
||||
AutoLink,
|
||||
Autosave,
|
||||
BalloonToolbar,
|
||||
Base64UploadAdapter,
|
||||
Bold,
|
||||
Code,
|
||||
CodeBlock,
|
||||
Essentials,
|
||||
FindAndReplace,
|
||||
FontBackgroundColor,
|
||||
FontColor,
|
||||
FontFamily,
|
||||
FontSize,
|
||||
GeneralHtmlSupport,
|
||||
Heading,
|
||||
Highlight,
|
||||
HorizontalLine,
|
||||
ImageBlock,
|
||||
ImageCaption,
|
||||
ImageInline,
|
||||
ImageInsert,
|
||||
ImageInsertViaUrl,
|
||||
ImageResize,
|
||||
ImageStyle,
|
||||
ImageTextAlternative,
|
||||
ImageToolbar,
|
||||
ImageUpload,
|
||||
Indent,
|
||||
IndentBlock,
|
||||
Italic,
|
||||
Link,
|
||||
LinkImage,
|
||||
List,
|
||||
ListProperties,
|
||||
Markdown,
|
||||
MediaEmbed,
|
||||
Mention,
|
||||
PageBreak,
|
||||
Paragraph,
|
||||
PasteFromMarkdownExperimental,
|
||||
PasteFromOffice,
|
||||
RemoveFormat,
|
||||
SelectAll,
|
||||
SpecialCharacters,
|
||||
SpecialCharactersArrows,
|
||||
SpecialCharactersCurrency,
|
||||
SpecialCharactersEssentials,
|
||||
SpecialCharactersLatin,
|
||||
SpecialCharactersMathematical,
|
||||
SpecialCharactersText,
|
||||
Strikethrough,
|
||||
Style,
|
||||
Subscript,
|
||||
Superscript,
|
||||
Table,
|
||||
TableCaption,
|
||||
TableCellProperties,
|
||||
TableColumnResize,
|
||||
TableProperties,
|
||||
TableToolbar,
|
||||
TextTransformation,
|
||||
TodoList,
|
||||
Underline,
|
||||
Undo,
|
||||
// 插件必须
|
||||
Plugin,
|
||||
ButtonView
|
||||
} from 'ckeditor5';
|
||||
|
||||
import translations from 'ckeditor5/translations/zh-cn.js';
|
||||
import 'ckeditor5/ckeditor5.css';
|
||||
|
||||
import { asBlob } from 'html-docx-js-typescript'
|
||||
import { saveAs } from 'file-saver';
|
||||
|
||||
class Export2Word extends Plugin {
|
||||
init() {
|
||||
const editor = this.editor;
|
||||
|
||||
editor.ui.componentFactory.add( 'export2word', () => {
|
||||
// The button will be an instance of ButtonView.
|
||||
const button = new ButtonView();
|
||||
|
||||
button.set( {
|
||||
label: 'Export2Word',
|
||||
// withText: true
|
||||
tooltip: true,
|
||||
// 图标 直接插入svg文件
|
||||
icon:'<svg t="1715062605726" class="icon" style="width: 1em;height: 1em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5479"><path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.477333 170.666667 170.666667 323.477333 170.666667 512s152.810667 341.333333 341.333333 341.333333 341.333333-152.810667 341.333333-341.333333S700.522667 170.666667 512 170.666667z m0 106.666666a21.333333 21.333333 0 0 1 21.333333 21.333334v234.666666h170.666667a21.333333 21.333333 0 0 1 21.333333 21.333334v42.666666a21.333333 21.333333 0 0 1-21.333333 21.333334H469.333333a21.333333 21.333333 0 0 1-21.333333-21.333334V298.666667a21.333333 21.333333 0 0 1 21.333333-21.333334h42.666667z" fill="#222429" p-id="5480"></path></svg>'
|
||||
|
||||
} );
|
||||
|
||||
// Execute a callback function when the button is clicked
|
||||
button.on( 'execute', () => {
|
||||
|
||||
const pageContent = document.querySelector("#app > div > div > div > div.editor-container__editor-wrapper > div > div > div").innerHTML;
|
||||
const page = '<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>'+pageContent+'</body></html>'
|
||||
asBlob(page).then(data => {
|
||||
saveAs(data, 'file.docx') // save as docx file
|
||||
}); // asBlob() return Promise<Blob|Buffer>
|
||||
} );
|
||||
|
||||
return button;
|
||||
} );
|
||||
}
|
||||
}
|
||||
export default {
|
||||
name: 'app',
|
||||
data() {
|
||||
return {
|
||||
isLayoutReady: false,
|
||||
config: null, // CKEditor needs the DOM tree before calculating the configuration.
|
||||
editor: DecoupledEditor
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.config = {
|
||||
toolbar: {
|
||||
items: [
|
||||
'undo',
|
||||
'redo',
|
||||
'|',
|
||||
'heading',
|
||||
'style',
|
||||
'|',
|
||||
'fontSize',
|
||||
'fontFamily',
|
||||
'fontColor',
|
||||
'fontBackgroundColor',
|
||||
'|',
|
||||
'bold',
|
||||
'italic',
|
||||
'underline',
|
||||
'|',
|
||||
'link',
|
||||
'insertImage',
|
||||
'insertTable',
|
||||
'highlight',
|
||||
'codeBlock',
|
||||
'|',
|
||||
'alignment',
|
||||
'|',
|
||||
'bulletedList',
|
||||
'numberedList',
|
||||
'todoList',
|
||||
'outdent',
|
||||
'indent',
|
||||
'|','export2word'
|
||||
],
|
||||
shouldNotGroupWhenFull: false
|
||||
},
|
||||
plugins: [
|
||||
AccessibilityHelp,
|
||||
Alignment,
|
||||
Autoformat,
|
||||
AutoImage,
|
||||
AutoLink,
|
||||
Autosave,
|
||||
BalloonToolbar,
|
||||
Base64UploadAdapter,
|
||||
Bold,
|
||||
Code,
|
||||
CodeBlock,
|
||||
Essentials,
|
||||
FindAndReplace,
|
||||
FontBackgroundColor,
|
||||
FontColor,
|
||||
FontFamily,
|
||||
FontSize,
|
||||
GeneralHtmlSupport,
|
||||
Heading,
|
||||
Highlight,
|
||||
HorizontalLine,
|
||||
ImageBlock,
|
||||
ImageCaption,
|
||||
ImageInline,
|
||||
ImageInsert,
|
||||
ImageInsertViaUrl,
|
||||
ImageResize,
|
||||
ImageStyle,
|
||||
ImageTextAlternative,
|
||||
ImageToolbar,
|
||||
ImageUpload,
|
||||
Indent,
|
||||
IndentBlock,
|
||||
Italic,
|
||||
Link,
|
||||
LinkImage,
|
||||
List,
|
||||
ListProperties,
|
||||
Markdown,
|
||||
MediaEmbed,
|
||||
Mention,
|
||||
PageBreak,
|
||||
Paragraph,
|
||||
PasteFromMarkdownExperimental,
|
||||
PasteFromOffice,
|
||||
RemoveFormat,
|
||||
SelectAll,
|
||||
SpecialCharacters,
|
||||
SpecialCharactersArrows,
|
||||
SpecialCharactersCurrency,
|
||||
SpecialCharactersEssentials,
|
||||
SpecialCharactersLatin,
|
||||
SpecialCharactersMathematical,
|
||||
SpecialCharactersText,
|
||||
Strikethrough,
|
||||
Style,
|
||||
Subscript,
|
||||
Superscript,
|
||||
Table,
|
||||
TableCaption,
|
||||
TableCellProperties,
|
||||
TableColumnResize,
|
||||
TableProperties,
|
||||
TableToolbar,
|
||||
TextTransformation,
|
||||
TodoList,
|
||||
Underline,
|
||||
Undo,
|
||||
Export2Word
|
||||
],
|
||||
balloonToolbar: ['bold', 'italic', '|', 'link', 'insertImage', '|', 'bulletedList', 'numberedList'],
|
||||
fontFamily: {
|
||||
supportAllValues: true
|
||||
},
|
||||
fontSize: {
|
||||
options: [10, 12, 14, 'default', 18, 20, 22],
|
||||
supportAllValues: true
|
||||
},
|
||||
heading: {
|
||||
options: [
|
||||
{
|
||||
model: 'paragraph',
|
||||
title: 'Paragraph',
|
||||
class: 'ck-heading_paragraph'
|
||||
},
|
||||
{
|
||||
model: 'heading1',
|
||||
view: 'h1',
|
||||
title: 'Heading 1',
|
||||
class: 'ck-heading_heading1'
|
||||
},
|
||||
{
|
||||
model: 'heading2',
|
||||
view: 'h2',
|
||||
title: 'Heading 2',
|
||||
class: 'ck-heading_heading2'
|
||||
},
|
||||
{
|
||||
model: 'heading3',
|
||||
view: 'h3',
|
||||
title: 'Heading 3',
|
||||
class: 'ck-heading_heading3'
|
||||
},
|
||||
{
|
||||
model: 'heading4',
|
||||
view: 'h4',
|
||||
title: 'Heading 4',
|
||||
class: 'ck-heading_heading4'
|
||||
},
|
||||
{
|
||||
model: 'heading5',
|
||||
view: 'h5',
|
||||
title: 'Heading 5',
|
||||
class: 'ck-heading_heading5'
|
||||
},
|
||||
{
|
||||
model: 'heading6',
|
||||
view: 'h6',
|
||||
title: 'Heading 6',
|
||||
class: 'ck-heading_heading6'
|
||||
}
|
||||
]
|
||||
},
|
||||
htmlSupport: {
|
||||
allow: [
|
||||
{
|
||||
name: /^.*$/,
|
||||
styles: true,
|
||||
attributes: true,
|
||||
classes: true
|
||||
}
|
||||
]
|
||||
},
|
||||
image: {
|
||||
toolbar: [
|
||||
'toggleImageCaption',
|
||||
'imageTextAlternative',
|
||||
'|',
|
||||
'imageStyle:inline',
|
||||
'imageStyle:wrapText',
|
||||
'imageStyle:breakText',
|
||||
'|',
|
||||
'resizeImage'
|
||||
]
|
||||
},
|
||||
initialData:
|
||||
'<h2>Congratulations on setting up CKEditor 5! 🎉</h2>\n<p>\n You\'ve successfully created a CKEditor 5 project. This powerful text editor will enhance your application, enabling rich text editing\n capabilities that are customizable and easy to use.\n</p>\n<h3>What\'s next?</h3>\n<ol>\n <li>\n <strong>Integrate into your app</strong>: time to bring the editing into your application. Take the code you created and add to your\n application.\n </li>\n <li>\n <strong>Explore features:</strong> Experiment with different plugins and toolbar options to discover what works best for your needs.\n </li>\n <li>\n <strong>Customize your editor:</strong> Tailor the editor\'s configuration to match your application\'s style and requirements. Or even\n write your plugin!\n </li>\n</ol>\n<p>\n Keep experimenting, and don\'t hesitate to push the boundaries of what you can achieve with CKEditor 5. Your feedback is invaluable to us\n as we strive to improve and evolve. Happy editing!\n</p>\n<h3>Helpful resources</h3>\n<ul>\n <li>📝 <a href="https://orders.ckeditor.com/trial/premium-features">Trial sign up</a>,</li>\n <li>📕 <a href="https://ckeditor.com/docs/ckeditor5/latest/installation/index.html">Documentation</a>,</li>\n <li>⭐️ <a href="https://github.com/ckeditor/ckeditor5">GitHub</a> (star us if you can!),</li>\n <li>🏠 <a href="https://ckeditor.com">CKEditor Homepage</a>,</li>\n <li>🧑💻 <a href="https://ckeditor.com/ckeditor-5/demo/">CKEditor 5 Demos</a>,</li>\n</ul>\n<h3>Need help?</h3>\n<p>\n See this text, but the editor is not starting up? Check the browser\'s console for clues and guidance. It may be related to an incorrect\n license key if you use premium features or another feature-related requirement. If you cannot make it work, file a GitHub issue, and we\n will help as soon as possible!\n</p>\n',
|
||||
language: 'zh-cn',
|
||||
link: {
|
||||
addTargetToExternalLinks: true,
|
||||
defaultProtocol: 'https://',
|
||||
decorators: {
|
||||
toggleDownloadable: {
|
||||
mode: 'manual',
|
||||
label: 'Downloadable',
|
||||
attributes: {
|
||||
download: 'file'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
list: {
|
||||
properties: {
|
||||
styles: true,
|
||||
startIndex: true,
|
||||
reversed: true
|
||||
}
|
||||
},
|
||||
mention: {
|
||||
feeds: [
|
||||
{
|
||||
marker: '@',
|
||||
feed: [
|
||||
/* See: https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html */
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
menuBar: {
|
||||
isVisible: true
|
||||
},
|
||||
placeholder: 'Type or paste your content here!',
|
||||
style: {
|
||||
definitions: [
|
||||
{
|
||||
name: 'Article category',
|
||||
element: 'h3',
|
||||
classes: ['category']
|
||||
},
|
||||
{
|
||||
name: 'Title',
|
||||
element: 'h2',
|
||||
classes: ['document-title']
|
||||
},
|
||||
{
|
||||
name: 'Subtitle',
|
||||
element: 'h3',
|
||||
classes: ['document-subtitle']
|
||||
},
|
||||
{
|
||||
name: 'Info box',
|
||||
element: 'p',
|
||||
classes: ['info-box']
|
||||
},
|
||||
{
|
||||
name: 'Side quote',
|
||||
element: 'blockquote',
|
||||
classes: ['side-quote']
|
||||
},
|
||||
{
|
||||
name: 'Marker',
|
||||
element: 'span',
|
||||
classes: ['marker']
|
||||
},
|
||||
{
|
||||
name: 'Spoiler',
|
||||
element: 'span',
|
||||
classes: ['spoiler']
|
||||
},
|
||||
{
|
||||
name: 'Code (dark)',
|
||||
element: 'pre',
|
||||
classes: ['fancy-code', 'fancy-code-dark']
|
||||
},
|
||||
{
|
||||
name: 'Code (bright)',
|
||||
element: 'pre',
|
||||
classes: ['fancy-code', 'fancy-code-bright']
|
||||
}
|
||||
]
|
||||
},
|
||||
table: {
|
||||
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
|
||||
},
|
||||
translations: [translations]
|
||||
};
|
||||
|
||||
this.isLayoutReady = true;
|
||||
},
|
||||
methods: {
|
||||
onReady(editor) {
|
||||
Array.from(this.$refs.editorToolbarElement.children).forEach(child => child.remove());
|
||||
Array.from(this.$refs.editorMenuBarElement.children).forEach(child => child.remove());
|
||||
|
||||
this.$refs.editorToolbarElement.appendChild(editor.ui.view.toolbar.element);
|
||||
this.$refs.editorMenuBarElement.appendChild(editor.ui.view.menuBarView.element);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,12 @@
|
||||
// import { createApp } from 'vue'
|
||||
// import App from './App.vue'
|
||||
|
||||
// createApp(App).mount('#app')
|
||||
|
||||
|
||||
import { createApp } from 'vue';
|
||||
import '../public/style.css';
|
||||
import App from './App.vue';
|
||||
import { CkeditorPlugin } from '@ckeditor/ckeditor5-vue';
|
||||
|
||||
createApp(App).use(CkeditorPlugin).mount('#app');
|
||||
@ -0,0 +1,4 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
Loading…
Reference in new issue