Блог

Как мне получить заголовок и текст отдельно в редакторе Vue CKEditor? (как здесь)

this.editor.getTitle() — этот.editor.getTitle не является функцией

this.editor.getBody() — этот.редактор.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())
 

Кажется, это работает:

     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