title: How add audio(custom) tag in ckeditor5
body: <p>Plugin:</p>
  <pre class="lang-js prettyprint-override"><code>export default class AudioUploader extends Plugin {
  
    static get pluginName() {
      return 'AudioUploader';
    }
  
    static get requires() {
      return [];
    }
  
    init() {
      const editor = this.editor;
      const schema = editor.model.schema;
  
      schema.register('audio', {
        allowIn: ['$root', '$block', 'blockQuote', 'paragraph'],
        isBlock: true,
        allowAttributes: ['controls', 'src'],
      });
  
      editor.conversion.elementToElement({
        model: 'audio',
        view: {
          name: 'audio',
        },
      });
  
      editor.conversion.for( 'dataDowncast' ).elementToElement({
        model: 'audio',
        view: {
          name: 'audio',
        },
      });
  
      editor.conversion.for( 'upcast' ).elementToElement({
        model: 'audio',
        view: {
          name: 'audio',
        },
      });
  
      editor.ui.componentFactory.add('AudioUploader', () =&gt; {
        const view = new FileDialogButtonView();
  
        view.buttonView.set({
          tooltip: 'Добавить аудио',
          icon: MusicIcon,
        });
  
        view.on('done', (evt, files) =&gt; {
          getBase64(Array.from(files)[0], (audio) =&gt; {
            editor.model.change(writer =&gt; {
              const elem = writer.createElement('audio', {
                src: audio,
                controls: true,
              });
  
              editor.model.insertContent(elem, editor.model.document.selection.getFirstPosition());
            });
          });
        });
  
        return view;
      });
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/UT4lw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UT4lw.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/RsyFk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RsyFk.png" alt="enter image description here" /></a></p>
  <p>If you insert just text(<code>writer.insertText('some text', editor.model.document.selection.getFirstPosition());</code>), then everything will be inserted correctly.</p>
  <p>Everything is correct in the ckeditor5 inspector. I don’t understand the philosophy of adding arbitrary tags to the editor.</p>
  <p>Why isn't it showing up in the editor?
  Why is the content not correct in console?</p>