在Vue检查器5上按回车键提交(不作为换行符/隔断行)

hvvq6cgz  于 2022-11-17  发布在  Vue.js
关注(0)|答案(1)|浏览(113)

我在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
}
46qrfjad

46qrfjad1#

我想做一些类似的事情,但更希望执行shiftEnter而不是enter,也许我对这方面的研究会帮助其他人登陆这里。这两个来源的组合回答了我的问题:

实际上,在一个单独的文件中添加如下函数(即来自In ckeditor5, how can I change entermode br instead of p?)...

export function ckEditorEnterBreaks(editor) {
    editor.editing.view.document.on('enter', (evt, data) => {
      //shift + enter creates a br tag
      editor.execute('shiftEnter');
      //cancel enter event to prevent p tag
      data.preventDefault();
      evt.stop();
    });
}

...正在导入它并添加到editorConfig插件:

editorConfig {
  plugins: [ckEditorEnterBreaks]
}

相关问题