Magento 1 – Fixing WYSIWYG Editor Image Display Issue

I created a form on backend and inserted an image into the editor. The image displays properly in the editor. However, the image cannot be displayed on frontend and 404 error is shown on the console. How to solve it? Thank you in advance.

Image tag generated by Magento:

<img alt="" src="{{media url=" wysiwyg="" screen_shot_2015-09-23_at_2.43.13_am.jpg"}}"="">

Error Message:

http://127.0.0.1/magento/index.php/%7B%7Bmedia%20url= Failed to load resource: the server responded with a status of 404 (Not Found)

Update (06-10-2015 12:33):

It seems that the cause of the problem may be wysiwyg configuration.

In the php file where the wysiwyg editor is added, if I change the wysiwyg configuration to the following:

$fieldset->addField('content', 'editor', array(
        ......
        'config'    => Mage::getSingleton('cms/wysiwyg_config')->getConfig()
    ));

The admin panel even cannot find the image insert page and the image inserted before also disappears from the editor. Besides that, the content from WYSIWYG is output by PHP. Will it be the cause?

This is my current wysiwyg configuration:

$wysiwygConfig = Mage::getSingleton('cms/wysiwyg_config')->getConfig();
$wysiwygConfig->addData(array(
        'add_variables'             => false,
        'plugins'                   => array(),
        'widget_window_url'         => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/widget/index'),
        'directives_url'            => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive'),
        'directives_url_quoted'     => preg_quote(Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg/directive')),
        'files_browser_window_url'  => Mage::getSingleton('adminhtml/url')->getUrl('adminhtml/cms_wysiwyg_images/index'),
    ));