我在Vue中有这个简单的ckeditor代码(作为聊天组件)。它工作正常,但当我按下“Enter”键时,我想发送聊天。我的目标是在输入时提交文本(如下所示:https://ckeditor.com/old/forums/CKEditor-3.x/Submit-Enter-key)CKeditor正在做的是在按下回车键时提供一个新行。我试着在回车键上运行send函数,但它包括了ckeditor创建的新行。我似乎找不到这个的文档。我试着查看https://ckeditor.com/docs/ckeditor5/latest/api/module_enter_enter-Enter.html,但没有找到我需要的东西。
(在javascript上有一些笨拙方法,但它很旧,不能在vue上实现:(https://ckeditor.com/old/forums/CKEditor-3.x/Disable-Enter-Key)
一些默认代码:
<ckeditor
:editor="editor"
:config="editorConfig"
v-model="comment"
/>
...
<button type="submit">Send</button>
数据类型:
editor: InlineEditor,
editorConfig: {
placeholder: 'Write your message...',
extraPlugins: [uploadImagePlugin],
toolbar: {
shouldNotGroupWhenFull: true,
},
classiceditor.js
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import UploadAdapter from '@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter';
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 Subscript from '@ckeditor/ckeditor5-basic-styles/src/subscript';
import Superscript from '@ckeditor/ckeditor5-basic-styles/src/superscript';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
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 ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import Indent from '@ckeditor/ckeditor5-indent/src/indent';
import Link from '@ckeditor/ckeditor5-link/src/link';
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 Table from '@ckeditor/ckeditor5-table/src/table';
import TableToolbar from '@ckeditor/ckeditor5-table/src/tabletoolbar';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
import ImageResize from '@ckeditor/ckeditor5-image/src/imageresize';
import Anchor from '@ckeditor/ckeditor5-anchor/src/anchor';
import Emoji from '@wwalc/ckeditor5-emoji/src/emoji';
import Video from '@visao/ckeditor5-video/src/video';
import VideoUpload from '@visao/ckeditor5-video/src/videoupload';
import VideoResize from '@visao/ckeditor5-video/src/videoresize';
import VideoToolbar from '@visao/ckeditor5-video/src/videotoolbar';
import VideoStyle from '@visao/ckeditor5-video/src/videostyle';
const plugins = [
FileRepository,
Essentials,
UploadAdapter,
Autoformat,
Bold,
Italic,
Underline,
Strikethrough,
Code,
Subscript,
Superscript,
BlockQuote,
CKFinder,
EasyImage,
Heading,
Image,
ImageStyle,
ImageToolbar,
ImageUpload,
ImageCaption,
ImageResize,
Indent,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
Anchor,
TextTransformation,
Emoji,
Video,
VideoUpload,
VideoResize,
VideoToolbar,
VideoStyle
];
ClassicEditor.builtinPlugins = plugins;
InlineEditor.builtinPlugins = plugins;
const config = {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'code',
'subscript',
'superscript',
'link',
'anchor',
'bulletedList',
'numberedList',
'|',
'indent',
'outdent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'emoji',
'videoUpload'
]
},
image: {
toolbar: [
'imageStyle:alignLeft',
'imageStyle:full',
'imageStyle:alignRight',
'|',
'imageTextAlternative'
],
styles: ['full', 'alignLeft', 'alignRight'],
resizeUnit: 'px'
},
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
},
link: {
addTargetToExternalLinks: true
},
video: {
upload: {
types: ['mp4'],
allowMultipleFiles: false
},
styles: ['alignLeft', 'alignCenter', 'alignRight'],
// Configure the available video resize options.
resizeOptions: [
{
name: 'videoResize:original',
label: 'Original',
icon: 'original'
},
{
name: 'videoResize:50',
label: '50',
icon: 'medium'
},
{
name: 'videoResize:75',
label: '75',
icon: 'large'
}
],
// You need to configure the video toolbar, too, so it shows the new style
// buttons as well as the resize buttons.
toolbar: [
'videoStyle:alignLeft',
'videoStyle:alignCenter',
'videoStyle:alignRight',
'|',
'videoResize:50',
'videoResize:75',
'videoResize:original'
]
}
};
ClassicEditor.defaultConfig = config;
InlineEditor.defaultConfig = config;
export default {
ClassicEditor,
InlineEditor
}
1条答案
按热度按时间46qrfjad1#
我想做一些类似的事情,但更希望执行shiftEnter而不是enter,也许我对这方面的研究会帮助其他人登陆这里。这两个来源的组合回答了我的问题:
实际上,在一个单独的文件中添加如下函数(即来自In ckeditor5, how can I change entermode br instead of p?)...
...正在导入它并添加到editorConfig插件: