【前端】vue引入tinymce富文字編輯器上傳影片自動轉img問題

三岁6發表於2024-11-26
前端Vue

近期遇到了一個問題，前端專案引入tinymce富文字編輯器後有一個上傳影片的需求，可是放入了影片以後，在預覽時發現，影片標籤未能正確展示，被替換為了img標籤

找了很多解決辦法，都沒有解決這個問題，最後找到了一個辦法， 特此記錄。
解決辦法：

1. 找到node_modules下tinymce外掛裡面的media檔案下的plugin.js(node_modules/tinymce/media/plugin.js) 這個檔案
2. 新增全域性變數

var videoSource="";

3. 找到 createPreviewIframeNode 方法將方法程式碼替換為以下程式碼（可以將原來程式碼註釋掉，方便恢復）

var createPreviewIframeNode = function (editor, node) {
  var previewWrapper;
  var previewNode;
  var shimNode;
  var name = node.name;
  previewWrapper = new global$7('span', 1);
  previewWrapper.attr({
	'contentEditable': 'false',
	'style': node.attr('style'),
	'data-mce-object': name,
	'class': 'mce-preview-object mce-object-' + name
  });
  retainAttributesAndInnerHtml(editor, node, previewWrapper);
  previewNode = new global$7(name, 1);
  previewNode.attr({
	src: videoSource || node.attr('src'), // 修改
	controls: 'controls',    // 新增
	allowfullscreen: node.attr('allowfullscreen'),
	style: node.attr('style'),
	class: node.attr('class'),
	width: node.attr('width'),
	height: node.attr('height'),
	frameborder: '0'
  });
  shimNode = new global$7('span', 1);
  shimNode.attr('class', 'mce-shim');
  previewWrapper.append(previewNode);
  previewWrapper.append(shimNode);
  return previewWrapper;
};

4. 找到這個方法 placeHolderConverter ,然後在這個方法中找到以下程式碼塊然後註釋

 if (node.name === 'iframe' && hasLiveEmbeds(editor) && global$8.ceFalse) {
     if (!isWithinEmbedWrapper(node)) {
       node.replace(createPreviewIframeNode(editor, node));
     }
   } else {
     if (!isWithinEmbedWrapper(node)) {
       node.replace(createPlaceholderNode(editor, node));
     }
   }

5. 註釋掉以上程式碼後替換為如下程式碼：

if (node.name === 'video' && hasLiveEmbeds(editor) && global$8.ceFalse) {
	console.log('videoSource===', videoSource)
	videoSource = ''
	if(node.attributes['map'] && node.attributes['map'].src){
	  videoSource = node.attributes['map'].src
	}else{
	  for(var ii=0;ii<node.attributes.length;ii++){
		if(node.attributes[ii].name == "src"){
		  videoSource = node.map.node.attributes[ii].value
		}
	  }
	}
	if(node.firstChild && node.firstChild.value){
	  var elel=node.firstChild && node.firstChild.value
	  var objE = document.createElement("div");
	　　 objE.innerHTML = elel;
	  var dom = objE.getElementsByTagName('source')[0]
	  videoSource = dom.getAttribute('src')
	}
	node.replace(createPreviewIframeNode(editor, node));
}

好了，以上就是解決辦法，最後效果如下：

相關文章