Vue CKEditor 分别获取title和body

Question

如何在Vue CKEditor中分别获取标题和文字？（喜欢here）

this.editor.getTitle() - this.editor.getTitle 不是函数

this.editor.getBody() - this.editor.getBody 不是函数

this.editor.getTitle - 未定义

this.editor.getBody - 未定义

一段代码：

      data() {
    return {
      editor: ClassicEditor,
      editorData: '<p></p>',
      editorConfig: {
        plugins: [
          Image,
          ImageUpload,
          ImageCaption,
          AutoImage,
          Title,
          AutoSave,
          Heading,
          MediaEmbed,
          HtmlEmbed,
          EssentialsPlugin,
          BoldPlugin,
          ItalicPlugin,
          LinkPlugin,
          ParagraphPlugin,
        ],
        extraPlugins: [cuteUploadAdapterPlugin],
        toolbar: {
          items: [
            'Heading',
            'bold',
            'italic',
            'link',
            'undo',
            'redo',
            'ImageUpload',
            'mediaEmbed',
            'htmlEmbed'
          ]
        },
        heading: {
          options: [
            {model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
            {model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
            {model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
          ]
        },
        title: {
          placeholder: 'title'
        },
        placeholder: 'body',
      },
    };
  },
  methods: {
    buttonClick() {
      console.log(this.editor.getTitle())
      console.log(this.editor.getBody())

Answer 1

似乎有效：

    let getTitleAndBody = function () {
    let data = {
      title: '',
      body: '',
    }
    const parser = new DOMParser();
    const doc = parser.parseFromString(editorData, 'text/html');
    const title = doc.getElementsByTagName('h1')[0]
    data.title = title.innerText
    doc.body.removeChild(title)
    data.body = doc.body.innerHTML
    return data;
  }
  let data = getTitleAndBody()
  data.title // get title
  data.body // get body

Answer 2

getTitle() 和 getBody() 函数未在编辑器级别定义，这就是您收到 undefined 作为响应的原因。它在 @ckeditor/ckeditor5-heading.

中定义的插件 Title 上定义

因此，获得 body 和标题的正确方法是

// for getting title
editor.plugins.get('Title').getTitle()

// for getting body of the document
editor.plugins.get('Title').getBody()

Vue CKEditor 分别获取title和body

Vue CKEditor get title and body separately

javascript

ckeditor