如何开启/关闭CKEditor中的HTML格式标记？寻求对应设置或插件

Hey there! Let's figure out how to toggle those HTML format markers (like the H1 and p labels you highlighted in your screenshot) in CKEditor. This feature is called Show Blocks, and the setup varies a bit between CKEditor 4 and 5—here's what you need to know:

CKEditor 5 #

Enabling/Disabling the Feature #

• If you're using a custom build (via the CKEditor 5 Builder):
  • Make sure the ShowBlocks plugin is included during your build process. To turn off the feature entirely, just exclude this plugin from your build.
• If you're using a pre-built package (like Classic Editor):
  • Add or remove ShowBlocks from your editor's plugin list when initializing it:

    ClassicEditor
        .create(document.querySelector('#editor'), {
            plugins: ['ShowBlocks', 'Essentials', 'Heading', 'Paragraph', ...],
            toolbar: ['showBlocks', 'heading', 'bold', 'italic', ...]
        })
        .catch(error => {
            console.error(error);
        });
    

Toggling the Markers On/Off #

• Once enabled, you'll see a "Show Blocks" button in your toolbar—click it to switch between showing and hiding those HTML format markers.
• If you prefer controlling it programmatically instead of using the toolbar button, use the editor API:

  // Assume you've initialized the editor and have a reference to it
  // Turn markers on
  editor.execute('showBlocks');
  // Turn markers off (execute again to toggle)
  editor.execute('showBlocks');
  

CKEditor 4 #

Enabling/Disabling the Feature #

• CKEditor 4 comes with the Show Blocks plugin by default. To control it:

  CKEDITOR.replace('editor', {
      // Keep the feature enabled (default behavior)
      extraPlugins: 'showblocks',
      // To disable it entirely, uncomment this line:
      // removePlugins: 'showblocks'
  });
  

Toggling the Markers On/Off #

• Look for the "Show Blocks" button in your toolbar—clicking it will toggle the visibility of the HTML format markers.
• For programmatic control, use this API call:

  const editor = CKEDITOR.instances.editor;
  // Turn markers on
  editor.execCommand('showblocks');
  // Turn markers off (execute again to toggle)
  editor.execCommand('showblocks');
  

Hope that clears things up and helps you get those markers working exactly how you want!

内容的提问来源于stack exchange，提问作者Kenyeres Laci