Embedding Media in WYSIWYG Leads to Duplicate Embeds

Having the same issue, anyone have any ideas?

Also experiencing the same issue.
This occurs with any media, Youtube video or uploaded audio.

If new content is created with some leading text followed by media embed and then saved. Editing the content, going to the end of the line showing the media item doing a carriage return and entering text to follow the media item then save content. This causes the media item to be duplicated and the text following the media item to be lost.

However, if when first creating the content if the leading text is followed by the media embed and the following text is added before the first save everything works as expected and the media item is not duplicated.

Furthermore, in the first case disabling rich text editor does not show any obvious error and when a line is entered or the following text is added and then the rich text editor re-enabled all is fine.

I may have found a solution.

Go to the input filters at admin/config/content/formats
and change the filter processing order such that "convert media tags to markup" precedes "Convert line breaks into HTML".

If this is the correct solution then it will need to be changed in the media module code.

Just as a head's up the filter order may give rise to other issues as described in #2357993-15: Linked images from the Media module in WYSIWYG having A tags stripped when rendered to template

I ran into this problem today. Here are the steps:

1. Uploaded an Excel spreadsheet in the body text field of a Basic Page.
2. Pressed the enter key.
3. Added some text.
4. Saved the node.

The link to the Excel file appeared twice.

Then I repeated steps 1 - 3 and immediately disabled rich text. The html appeared as follows in the body field.

<p>[[{"fid":"4622","view_mode":"default","fields":{"format":"default","alignment":""},"type":"media","field_deltas":{"2":{"format":"default","alignment":""}},"link_text":"my sheet.xls","attributes":{"class":"media-element file-default","data-delta":"2"}}]]</p>

<p>[[{"fid":"4622","view_mode":"default","fields":{"format":"default","alignment":""},"type":"media","field_deltas":{"2":{"format":"default","alignment":""}},"link_text":null,"attributes":{"class":"media-element file-default","data-delta":"2"}}]]</p>

Then I saved the node, and saw the duplicate excel links again. I went back to edit the node, disabled rich text, and this time the html appeared as follows:

<p>[[{"fid":"4622","view_mode":"default","fields":{"format":"default","alignment":""},"type":"media","field_deltas":{"2":{"format":"default","alignment":""}},"link_text":"my sheet.xls","attributes":{"class":"media-element file-default","data-delta":"2"}}]]</p>
<p>[[{"fid":"4622","view_mode":"default","fields":{"format":"default","alignment":""},"type":"media","field_deltas":{"2":{"format":"default","alignment":""}},"link_text":"my sheet.xls","attributes":{"class":"media-element file-default","data-delta":"2"}}]]</p>

If you experience this issue, please review your configuration.

The recommended installation instructions are here:
https://www.drupal.org/node/2843391

or, try version 7.x-3.0-alpha8

Hi, I am currently experiencing the same problem thath Ann. Have you found a solution to this problem? I tried to download the Beta version of media. But that didn't change anything. Thank you in advance

Hi, I am currently experiencing the same problem as Ann. Have you found a solution to this problem? I tried to download the Beta version of media. But that didn't change anything. Thank you in advance

alternatively, have a look at the media_dev distribution , install it, the default configuration in media_dev gets you 99% there . see the quick install recipe as well.

https://www.drupal.org/project/media_dev
for 2.x, use the 2.x version.
I will publish a new 4.x version of media_dev soon.

I believe this is a related issue with a patch for review
#2153851-44: When inserted into the WYSIWYG, links to files are duplicated when text surrounding them is manipulated

Thanks for your feedback.

Hi this bug has been fixed:

1) Update the ckeditor library to the latest version supported by the module (4.6.2.20af917)

2) Delete the existing profile and re-create it for "Text Editor" "CKEditor 4.6.2.20af917",

3) When editing the profile check "Ensure that embedded Media tags are not contained in paragraphs" and ensure that the filter is before "Convert Media tags to markup".

Thanks for the followup and for reporting.

Having the same problem as showing in the MP4 video above. This issue is marked as "Closed (fixed)". Tried to follow conversations and solutions here and at When inserted into the WYSIWYG, links to files are duplicated when text surrounding them is manipulated. But the issue is not solved.

This issue here is not about duplicated <span> or links to files, but specific about media data that is not surrounded by a <p></p> tag inside CKEditor textarea.

The core issue is that CKEditor duplicates the media data [[{"fid":"123","view_mode":"default", ... }}]] when it is not wrapped by a <p></p> tag in the textarea.

CKEditor wraps the embedded media inside a <p></p> tag in the textarea. But because the <iframe> of the Viemo and YouTube is surrounded by a <div></div> tag in it's own template and because <div></div> tag is not allowed to live inside <p></p> tag. This results the video data [[{"fid":"123","view_mode":"default", ... }}]] living outside the <p></p> tag. When the video data is not surrounded within a <p></p> tag in the CKEditor textarea, every time user presses Enter, CKEditor just duplicates the video data.

My suggestion (not the core solution) is to create a patch for e.g. media_youtube module, the patch that removes the <div></div> tag from it's template media-youtube-video.tpl.php.

From:

<div class="">
  <iframe class="" width="" height="" title="" src="" frameborder="0" allowfullscreen></iframe>
</div>

To

<iframe class="" width="" height="" title="" src="" frameborder="0" allowfullscreen></iframe>

But doing this, The <iframe> will be wrapped within a <p></p> tag inside the CKEditor textarea. Because it is surrounded by a <p></p> tag, every time user hits Enter, CKEditor will not duplicate the video data. If a <div></div> surrounding the <iframe> is really needed for some reason, just add it when rendering to the browser. Appreciate to see feedback on this solution.