Display pure html code in tinymce laravel - unicode

Question

Hi I am using tinmymce in laravel5. I create blogposts where i need to display code snippets.
for example i want to display this bit of code snippet <meta http-equiv="X-UA-Compatible" content="IE=edge"> and here is my source code as seen in tinymce:
<pre><code><meta http-equiv="X-UA-Compatible" content="IE=edge"></code></pre>
And this is how it is saved in my database:
<pre><code><meta http-equiv="X-UA-Compatible" content="IE=edge"></code></pre>
The problem is when i pull that data to edit in my view using the same tinymce editor
I see nothing, its blank. if i check the source code all is left there is <pre></pre>
Here is my create page:
#extends('layouts.app')
#section('content')
<section class="articles-show">
<div class="container">
<div class="row">
<div class="col-sm-10 articles-page">
<h1>Create Article</h1>
{{-- #if (Auth::user()->isAuthor() || Auth::user()->isAdmin()) --}}
{!! Form::open(['method' => 'POST', 'action' => 'ArticlesController#store', 'files' => true]) !!}
#include('partials.error-message')
<div class="form-group">
{!! Form::label("title", "Title:") !!}
{!! Form::text("title", null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label("body", "Body:") !!}
{!! Form::textarea("body", null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('photo_id', 'Featured Image:') !!}
{!! Form::file('photo_id', array('class' => 'form-control')) !!}
</div>
<div class="form-group">
{!! Form::label("category_id", "Category:") !!}
{!! Form::select("category_id[]", $categories, null, ['id' => 'tag_list', 'class' => 'form-control', 'multiple']) !!}
</div>
<div class="form-group">
{!! Form::label("meta_desc", "Meta Description:") !!}
{!! Form::text("meta_desc", null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::submit("Create Article", ['class' => 'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
{{-- #endif --}}
</div>
<div class="col-sm-2 articles-page">
{!! Form::open(['method' => 'POST', 'action' => 'CategoryController#store']) !!}
<br>
<div class="form-group">
{!! Form::label("name", "Category Name:") !!}
{!! Form::text("name", null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::submit("Create Category", ['class' => 'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</section>
#include('partials.select-2-script')
#include('partials.tinymceScript')
#endsection
Here is my edit page:
#extends('layouts.app')
#section('content')
#section('content')
<section class="articles-show">
<div class="container">
<div class="row">
<div class="col-sm-10 articles-page">
<h1>Create Article</h1>
{!! Form::model($article, ['method' => 'PATCH', 'action' => ['ArticlesController#update', $article->id], 'files' => true]) !!}
#include('partials.error-message')
<div class="form-group">
{!! Form::label("title", "Title:") !!}
{!! Form::text("title", null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label("body", "Body:") !!}
{!! Form::textarea("body", null, ['id' => 'mytextarea', 'class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::label('photo_id', 'Featured Image:') !!}
{!! Form::file('photo_id', array('class' => 'form-control')) !!}
</div>
<div class="form-group">
{!! Form::label("category_id", "Category:") !!}
{!! Form::select("category_id[]", $categories, null, ['id' => 'tag_list', 'class' => 'form-control', 'multiple']) !!}
</div>
<div class="form-group">
{!! Form::label("meta_desc", "Meta Description:") !!}
{!! Form::text("meta_desc", null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::submit("Edit Article", ['class' => 'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
{!! Form::open(['method' => 'DELETE', 'action' => ['ArticlesController#destroy', $article->id]]) !!}
<div class="form-group">
{!! Form::submit("Delete Article", ['class' => 'btn btn-danger']) !!}
</div>
{!! Form::close() !!}
</div>
<div class="col-sm-2 articles-page">
{!! Form::open(['method' => 'POST', 'action' => 'CategoryController#store', 'files' => true]) !!}
<br>
<div class="form-group">
{!! Form::label("name", "Category Name:") !!}
{!! Form::text("name", null, ['class' => 'form-control']) !!}
</div>
<div class="form-group">
{!! Form::submit("Create Category", ['class' => 'btn btn-primary']) !!}
</div>
{!! Form::close() !!}
</div>
</div>
</div>
</section>
#include('partials.select-2-script')
#include('partials.tinymceScript')
#endsection
and here is my tinymce script page that is in partials which i have included in create and edit pages:
<script src="http://code.jquery.com/jquery.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
var editor_config = {
path_absolute : "{{ URL::to('/') }}/",
selector: "textarea",
//entities : "60,lt,62,gt,38,amp",
// entity_encoding: "raw",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern spellchecker"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | spellchecker",
menubar: "tools",
relative_urls: false,
file_browser_callback : function(field_name, url, type, win) {
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
if (type == 'image') {
cmsURL = cmsURL + "&type=Images";
} else {
cmsURL = cmsURL + "&type=Files";
}
tinyMCE.activeEditor.windowManager.open({
file : cmsURL,
title : 'Filemanager',
width : x * 0.8,
height : y * 0.8,
resizable : "yes",
close_previous : "no"
});
}
};
tinymce.init(editor_config);
<!-- -->
</script>
I have searched everywhere, tried everything posted in tinymce forums etc. Stackoverflow is my last hope :)

Answer 1

Use :
{!! $varable !!}
this will echo the value for Html engine and Tinymce
Don't use:
{{$variable}}

Answer 2

I've spent half a day trying to solve it and finally I've figured out that here is the problem with textarea and Blade, not with tinyMCE. If you are using something like
<textarea calss="js-wysiwyg">
{{ $blog->text }}
</textarea>
and the blog text contains some html tags like <pre>, <input> or <form>, textarea will do a bit of magic with it and after tinyMCE initializing you will end up with very strange output (nothing outputted in your case and rendered html input in mine :) ). So, you have 2 different options:
<textarea calss="js-wysiwyg">
{{ htmlentities($blog->text) }}
</textarea>
or
<div contenteditable="true" calss="js-wysiwyg">
{{ $blog->text }}
</div>
Variant with htmlentities is better because you don't need to create some jQuery solution for passing value of the div in request (because divs don't have 'name' attributes)
Hope this will help someone!