tinymceで純粋なhtmlコードを表示するlaravel

こんにちは私はlaravel5でtinmymceを使用しています。私はコードスニペットを表示する必要があるblogpostsを作成します。たとえば、私はここにコードスニペット<meta http-equiv="X-UA-Compatible" content="IE=edge">とのこのビットを表示するTinyMCEの中で見られるように、私のソースコードです：tinymceで純粋なhtmlコードを表示するlaravel

<pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;</code></pre>

そして、これは、それが私のデータベースに保存される方法です。

<pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;</code></pre>

問題は、同じデータエディタを使用して私のビューで編集するためにそのデータをプルするときです。何も表示されません。私は、ソースコードをチェックすると、すべてが残っている<pre></pre>

はここにあり、私のページを作成します。ここ

@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' => '[email protected]', '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' => '[email protected]']) !!} 
 
       
 
       <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

を私の編集ページには、次のとおりです。

@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' => ['[email protected]', $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' => ['[email protected]', $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' => '[email protected]', '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

と、ここで私が含まれているパーシャルである私のTinyMCEのスクリプトページが作成および編集ページれる：

<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>

私はなどのStackOverflow TinyMCEのフォーラムに投稿されたすべてのものを試してみましたが、どこにでも検索しました私の最後の希望です:)

出典

2016-09-11 Ryan Dhungel

私はそれを解決しようと過ごしました、そして、私はここでは、tinyMCEではなく、textareaとBladeの問題であることを理解しました。あなたは

<textarea calss="js-wysiwyg"> 
{{ $blog->text }} 
</textarea>

ようなものを使用していて、ブログのテキストは<pre>、<input>または<form>のような一部のHTMLタグが含まれている場合は、テキストエリアには、（あなたは非常に奇妙な出力になってしまいます初期化し、それにし、TinyMCEの後に魔法のビットを行いますあなたのケースでは何も出力されず、私のHTML入力が表示されます:)）。だから、あなたは、2つの異なるオプションがあります：あなたが要求してdiv要素の値を渡すためのいくつかのjQueryのソリューションを作成する必要はありませんので、htmlentitiesと

<textarea calss="js-wysiwyg"> 
{{ htmlentities($blog->text) }} 
</textarea>

または

<div contenteditable="true" calss="js-wysiwyg"> 
{{ $blog->text }} 
</div>

バリアントが良いです（divのため'name'属性はありません）これは誰かを助けることを願っています！

出典

2017-07-19 12:32:22 user3529607

tinymceで純粋なhtmlコードを表示するlaravel

答えて

関連する問題