Как вставить пользовательский тег HTML в ckeditor5 - PullRequest
Новая
       36

Как вставить пользовательский тег HTML в ckeditor5

0 голосов
/ 12 апреля 2020

У меня есть ckeditor и несколько изображений (смайликов), и я хочу вставить html тег кликаемого изображения в ckeditor. Я пробовал решения этой проблемы, но не получил никакого результата. Я знаю, что это не разрешено напрямую от ckeditor и не является безопасным.

Vue. js компонент 

<div class="emoji">
    <img @click="sendEmoji($event)" src="/assets/images/facebook/expressionless-face_1f611.png" alt="emoji">
</div>
<textarea id="comment_editor"></textarea>

    <script>
     export default {
      mounted() {
        ClassicEditor
            .create( document.querySelector( '#comment_editor' ), {
              toolbar: {
                items: [
                  'bold',
                  'italic',
                  'underline',
                  'link',
                  'fontColor',
                  'fontSize',
                  'fontFamily',
                  'codeBlock',
                  'specialCharacters',
                  'superscript',
                  'subscript',
                ]
              },
              language: 'ru',
              licenseKey: '',

            } )
            .then( comment_editor => {
              window.comment_editor = comment_editor;
            } )
            .catch( error => {
              console.error( 'Oops, something gone wrong!' );
              console.error( 'Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:' );
              console.warn( 'Build id: 1elt9gdr81je-u3jmkfuwv026' );
              console.error( error );
            } );
        },
        methods: {
          sendEmoji: function(event){
            let img = event.target.outerHTML;
            console.log(img);
            window.comment_editor.setData(img)
            console.log(window.comment_editor.getData());
          },
        }
    }

1 Ответ

0 голосов
/ 13 апреля 2020

решаемая. Просто нужно добавить плагин Image. Это выглядит некрасиво, но я думаю, что это поправимо.

...