Change {{media url=”wysiwyg/image.jpg”}} in Frontend in Custom Module – Magento2

magento2wysiwyg

I'm building a custom module, a very simple blog.
I already have everything working. The last thing I added, was de WYSIWYG image upload capability.

In the Admin, everything works fine. But in the fronted, I see the raw source code and the <img> tags are filled with: {{media url="wysiwyg/some_image.jpg"}}

If I navigate to /pub/media/wysiwyg/some_image.jpg, the jpg exists. But I can't figure out how to change this via some helper or function to get it right in the front end.

Best Answer

You can filter its using filter() function,

$content = 'This is test demo imgage, {{media url="wysiwyg/some_image.jpg"}}';
$om = \Magento\Framework\App\ObjectManager::getInstance();
$filterManager = $om->get('Magento\Cms\Model\Template\FilterProvider')->getPageFilter()->filter($content);
echo $filterManager;

Related Solutions

Magento – wysiwyg in custom module, image links are incorrect

This is not a browser issue. More than that, it's not a bug, it's a feature. You have the Media Storage set to Database. If you change that to File System you should see the image src like {{media url="wysiwyg/Untitled-1.png"}}.
You can change this setting from System->Configuration->System->Storage Configuration for Media

Magento – How to add wysiwyg editor to custom frontend form of custom module in Magento1.9

In html

<input type="text" id="custom_wysiwyg" />

Script

<script type="text/javascript">
window.onload=function()
{
   tinyMCE.init({
    mode : "exact",
    elements: "custom_wysiwyg",
    theme : "advanced",
    plugins : "inlinepopups,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
    theme_advanced_buttons1 : "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
    theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,|,visualchars,nonbreaking",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_path_location : "bottom",
    extended_valid_elements : "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
    theme_advanced_resize_horizontal : 'true',
    theme_advanced_resizing : 'true',
    apply_source_formatting : 'true',
    convert_urls : 'false',
    force_br_newlines : 'true',
    doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'

  });
};
</script>

Hope this helps..

Best Answer

Related Solutions

Magento – wysiwyg in custom module, image links are incorrect

Magento – How to add wysiwyg editor to custom frontend form of custom module in Magento1.9

Related Topic