0

I am using mce editor for some formatted content. That content is stored in metadata. Now when I render the content it does render the content but the styles for the contents are missing like "aligncenter" etc. Basically, the mce editor or it depended on which actually format the content to look the same as in the editor.

So I need to know the handle of CSS or a way to include that missing CSS so my content can be shown with proper formatting.

I think I am missing this. /wp-includes/js/tinymce/skins/wordpress/wp-content.css

Let me know what can I do.

Edit: I am using this code to generate editor.

wp.editor.initialize(
      editor_id,
      {
        tinymce: {
          wpautop: true,
          plugins : 'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview',
          toolbar1: 'bold italic underline strikethrough | bullist numlist | blockquote hr wp_more | alignleft aligncenter alignright | link unlink | fullscreen | wp_adv',
          toolbar2: 'formatselect alignjustify forecolor | pastetext removeformat charmap | outdent indent | undo redo | wp_help'
        },
        quicktags: true,
        mediaButtons: true,
      }
    );
Improve this question
6
  • there's no code showing how you're using TinyMCE in your question that can be used to debug or write an answer, can you edit your question to include that code? The answer depends on how you created your editor instance, e.g. did you use the wp_editor function? And if so what are its parameters and where is it called? Or did you use javascript?
    – Tom J Nowell ♦
    Aug 21, 2022 at 16:15
  • @TomJNowell it was created using JS (wp editor).
    – MrCoderAndEditor
    Aug 21, 2022 at 17:10
  • can you edit your question to include the code though? There are still multiple possibilities for what you meant based on your last comment, and there are follow up questions that can all be avoided by sharing the code. If you don't want to share the code that's unfortunate but myself and others will keep asking for it if you ignore the request, and it's almost impossible to help you without it
    – Tom J Nowell ♦
    Aug 21, 2022 at 18:25
  • @TomJNowell Hi Tom, I have updated and added the code. But this code is fine I want to "render content (generated by this editor and saved in metafields already) to some other admin page. It does render but it doesn't have tinymce stylesheet which makes classes don't work, hence my text doesn't look or aligned like it was in inside in mceditor".
    – MrCoderAndEditor
    Aug 22, 2022 at 14:15
  • 1
    ah that was not clear when reading your question, the way your question reads is that you have content inside the editor that is missing styling and you want to put that styling back into the editor instance so that the editor looks ok.
    – Tom J Nowell ♦
    Aug 22, 2022 at 15:12

1 Answer 1

Reset to default
1

So I need to know the handle of CSS or a way to include that missing CSS so my content can be shown with proper formatting.

You would need to write and enqueue a new stylesheet that implements this formatting, and enqueue it on the page that requires it. You would enqueue it the same way you would for any other CSS added to WP Admin.

Note that enqueuing the TinyMCE skin file that you mentioned will not accomplish this, and will break a lot of WP Admin styling. You could copy the stylesheets content to create your own, but you would need to modify all the rules so that they are specific to your HTML markup. How you would do that is ultra specific to the HTML you're using to display this content.

Improve this answer
3
  • Yes, that's what I am thinking too. I will copy the TinyMCE stylesheet code to new stylesheet code and edit it rules so it only affect my main render block.
    – MrCoderAndEditor
    Aug 22, 2022 at 22:38
  • Can you tell me please which stylesheets I need to copy to get all the CSS classes used by TinyMCE rendered content?
    – MrCoderAndEditor
    Aug 22, 2022 at 22:39
  • you literally found the stylesheets and named them in your question, I didn't know it existed before you mentioned it
    – Tom J Nowell ♦
    Aug 25, 2022 at 17:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.