如何使用ckeditor5嵌入html

Question

我希望你一切都好。我正在使用 PHP 并使用 CKEditor，没有任何问题。一切都正确加载 - 图像、样式，一切 - 但缺少一些功能，包括我需要包含的 HTML 嵌入。但是，此选项不会出现在工具栏中:/

值得一提的是，我使用的是 WordPress，但我使用纯 PHP 完成所有操作（根据上述要求）。

在我的标题中，我正在使用 CDN：

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

在我的代码中，当我使用它时，我这样做：

   const editors   = {};
    const uploadUrl = '<?= get_template_directory_uri() ?>/panelControl/procesos/ck_upload.php';
    const ruta      = 'publicaciones';

    function MyCustomUploadAdapterPlugin( editor ) {
      editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        return new MyUploadAdapter( loader, uploadUrl, ruta );
      };
    }

    function createEditor( selector ) {
      const element = document.getElementById(selector);
      if ( element ) {
        ClassicEditor.create(element, {
          toolbar: {
            items: ['heading', '|', 'imageUpload', 'bold', 'italic', 'underline', 'fontFamily',
            'fontSize', 'htmlEmbed', 'link','bulletedList', 'numberedList'],
            shouldNotGroupWhenFull: true
          },
          extraPlugins: [ MyCustomUploadAdapterPlugin ],
        })
        .then( editor => {
          editors[ selector ] = editor;
        } )
        .catch(error => {
          console.error('Error initializing CKEditor:', error);
        });
      }
    }

它加载其他所有内容，但以下内容除外：“underline”、“fontFamily”、“fontSize”、“htmlEmbed”。

页面上提供的 CK Builder 只允许下载 React、Angular 或类似版本，而且它工作得很好，但我也无法使用生成的 JavaScript 文件:/

如果有人知道如何解决这个问题，我将非常感激。

致以诚挚的问候，

主要目标是上传Tableau提供的代码片段并能够显示它。如果我在没有嵌入 HTML 的情况下执行此操作，则代码将使用错误的字符保存，如下所示：

<p>&lt;div class=\'tableauPlaceholder\'

我尝试用这个来修复它，但它也不起作用：

$allowed_html = array(
        'iframe' => array(
          'width' => array(),
          'height' => array(),
          'src' => array(),
          'frameborder' => array(),
          'allow' => array(),
          'allowfullscreen' => array(),
          'url' => array(),
        ),
        'figure' => array(
          'class' => array(),
        ),
        'p' => array(),
        'img' => array(
          'src' => array(),
          'alt' => array(),
          'class' => array(),
          'width' => array(),
          'height' => array(),
          'style' => array(),
          'border' => array(),
        ),
        'strong' => array(),
        'em' => array(),
        'i' => array(),
        'a' => array(
          'href' => array(),
          'title' => array(),
          'target' => array(),
        ),
        'ul' => array(),
        'li' => array(),
        'ol' => array(),
        'br' => array(),
        'h1' => array(),
        'h2' => array(),
        'h3' => array(),
        'h4' => array(),
        'h5' => array(),
        'h6' => array(),
        'span' => array(
          'class' => array(),
          'style' => array(),
        ),
        'div' => array(
          'class' => array(),
          'style' => array(),
          'id' => array(),
          'position' => array(),
        ),
        'noscript' => array(),
        'object' => array(
          'class' => array(),
          'style' => array(),
          'type' => array(),
          'data' => array(),
          'width' => array(),
          'height' => array(),
        ),
        'param' => array(
          'name' => array(),
          'value' => array(),
        ),
        'script' => array(
          'type' => array(),
          'src' => array(),
        ),
      );
    
      $descripcion  = wp_kses($descripcion, $allowed_html);

Answer 1

您的代码似乎与文档中显示的有点不同，请尝试像演示一样更改您的代码。

https://ckeditor.com/docs/ckeditor5/latest/features/html/html-embed.html

示例代码：

ClassicEditor.create(element, {
    plugins: [ HtmlEmbed, /* ... */ ],
    toolbar: [ 'htmlEmbed', /* ... */ ],
    htmlEmbed: {
    showPreviews: true,
    sanitizeHtml: ( inputHtml ) => {
        // Strip unsafe elements and attributes, for example:
        // the `<script>` elements and `on*` attributes.
        const outputHtml = sanitize( inputHtml );

        return {
            html: outputHtml,
            // true or false depending on whether the sanitizer stripped anything.
            hasChanged: true
        };
    }
}