Laravel 8에서 TinyMCE 편집기를 통합하는 방법
64635 단어 tinymcephpwysiwygeditortutorial
이전 게시물에서 고급 구성으로 TinyMCE를 설치하는 방법을 공유했습니다. 이전 블로그에서 검색하면 배울 수 있습니다. 이 게시물에서는 Laravel 8에서 TinyMCE Editor를 통합하거나 구현하는 방법을 공유할 것입니다. Laravel 애플리케이션에 WYSIWYG 편집기를 콘텐츠 관리에 추가하면 웹 페이지에서 HTML 보기 및 표시 형식을 쉽게 지정할 수 있습니다.
이제 TinyMCE를 사용하여 콘텐츠 생성, 보기 및 업데이트를 공유할 이 예제의 기본 사항을 수행하겠습니다. TinyMCE는 많은 응용 프로그램에서 TinyMCE를 사용하는 최고의 무료 WYSIWYG 강력한 편집기 중 하나라는 것을 알고 있습니다.
좋아, 계속하자. Laravel을 이미 설치했다고 가정합니다.
1단계: 테이블 설정
게시물 테이블 마이그레이션을 만들어 봅시다. 아래 예는 다음과 같습니다.
먼저 아래 명령을 실행하여 마이그레이션을 생성합니다.
php artisan make:migration create_posts_table
그런 다음 생성된 마이그레이션의 up() 메서드 내부에 다음 코드를 추가합니다.
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('user_id');
$table->string('title', 70);
$table->string('description', 320);
$table->text('body');
$table->timestamps();
$table->foreign('user_id')
->references('id')
->on('users')
->onDelete('cascade');
});
보시다시피 저는 이미 게시물의 작성자로 user_id를 추가했습니다. 따라서 구현하려는 경우 귀하에게 달려 있습니다.
다음으로 다음 명령을 실행합니다.
php artisan migrate
2단계: 경로 설정
다음으로 게시물 경로를 설정합니다. 경로 파일에 다음 코드를 추가합니다.
/**
* Posts Routes
*/
Route::group(['prefix' => 'posts'], function() {
Route::get('/', 'PostsController@index')->name('posts.index');
Route::get('/create', 'PostsController@create')->name('posts.create');
Route::post('/create', 'PostsController@store')->name('posts.store');
Route::get('/{post}/show', 'PostsController@show')->name('posts.show');
Route::get('/{post}/edit', 'PostsController@edit')->name('posts.edit');
Route::patch('/{post}/update', 'PostsController@update')->name('posts.update');
Route::delete('/{post}/delete', 'PostsController@destroy')->name('posts.destroy');
});
3단계: Laravel 애플리케이션에 TinyMCE 편집기 다운로드 및 설치
이제 TinyMCE Editor를 다운로드하여 Laravel 애플리케이션에 설치해 보겠습니다.
첫 번째: 방문 TinyMCE here .
그런 다음 "Self-Hosted 다운로드"를 선택하고 클릭한 다음 TinyMCE의 최신 버전인 "Prod"를 클릭합니다.
둘째: 일단 다운로드했습니다. zip 파일을 추출한 다음 폴더 이름을 tinymce_{version}에서 TinyMCE로 바꾸고 자산이 아직 존재하지 않는 경우 "public/assets"폴더에 복사한 다음 폴더를 만듭니다.
완료되면 tinymce 폴더 안에 js 폴더가 표시됩니다.
Laravel TinyMCE를 설치하려면 다음 스크립트를 Laravel 블레이드 태그에 넣기만 하면 됩니다.
<script src="{!! url('assets/tinymce/js/tinymce.min.js') !!}"></script>
basic installation of TinyMCE.에 대한 이전 블로그를 확인하십시오.
4단계: Laravel TinyMCE용 블레이드 파일 생성
다음은 블레이드 코드 예제가 포함된 파일입니다.
app-master.blade.php<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.87.0">
<title>Fixed top navbar example · Bootstrap v5.1</title>
<!-- Bootstrap core CSS -->
<link href="{!! url('assets/bootstrap/css/bootstrap.min.css') !!}" rel="stylesheet">
<script src="{!! url('assets/tinymce/js/tinymce.min.js') !!}"></script>
<style>
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
.float-right {
float: right;
}
</style>
<!-- Custom styles for this template -->
<link href="{!! url('assets/css/app.css') !!}" rel="stylesheet">
</head>
<body>
@include('layouts.partials.navbar')
<main class="container mt-5">
@yield('content')
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{!! url('assets/bootstrap/js/bootstrap.bundle.min.js') !!}"></script>
@section("scripts")
@show
</body>
</html>
index.blade.php@extends('layouts.app-master')
@section('content')
<h1 class="mb-3">How To Integrate TinyMCE Editor in Laravel 8?</h1>
<div class="bg-light p-4 rounded">
<h2>Posts</h2>
<div class="lead">
Manage your posts here.
<a href="{{ route('posts.create') }}" class="btn btn-primary btn-sm float-right">Add post</a>
</div>
<div class="mt-2">
@include('layouts.partials.messages')
</div>
<table class="table table-bordered">
<tr>
<th width="1%">No</th>
<th>Name</th>
<th width="3%" colspan="3">Action</th>
</tr>
@foreach ($posts as $key => $post)
<tr>
<td>{{ $post->id }}</td>
<td>{{ $post->title }}</td>
<td>
<a class="btn btn-info btn-sm" href="{{ route('posts.show', $post->id) }}">Show</a>
</td>
<td>
<a class="btn btn-primary btn-sm" href="{{ route('posts.edit', $post->id) }}">Edit</a>
</td>
<td>
{!! Form::open(['method' => 'DELETE','route' => ['posts.destroy', $post->id],'style'=>'display:inline']) !!}
{!! Form::submit('Delete', ['class' => 'btn btn-danger btn-sm']) !!}
{!! Form::close() !!}
</td>
</tr>
@endforeach
</table>
<div class="d-flex">
{!! $posts->links() !!}
</div>
</div>
@endsection
create.blade.php@extends('layouts.app-master')
@section('content')
<div class="bg-light p-4 rounded">
<h2>Add new post</h2>
<div class="lead">
Add new post.
</div>
<div class="container mt-4">
<form method="POST" id="save-content-form" data-action="{{ route('posts.store') }}">
@csrf
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input value="{{ old('title') }}"
type="text"
class="form-control"
name="title"
placeholder="Title" required>
@if ($errors->has('title'))
<span class="text-danger text-left">{{ $errors->first('title') }}</span>
@endif
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<input value="{{ old('description') }}"
type="text"
class="form-control"
name="description"
placeholder="Description" required>
@if ($errors->has('description'))
<span class="text-danger text-left">{{ $errors->first('description') }}</span>
@endif
</div>
<div class="mb-3">
<label for="body" class="form-label">Body</label>
<textarea class="form-control"
id="tinymce">{{ old('body') }}</textarea>
@if ($errors->has('body'))
<span class="text-danger text-left">{{ $errors->first('body') }}</span>
@endif
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
<a href="{{ route('posts.index') }}" class="btn btn-default">Back</a>
</form>
</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
tinymce.init({
selector: 'textarea#tinymce',
height: 600
});
$(document).ready(function() {
var formId = '#save-content-form';
$(formId).on('submit', function(e) {
e.preventDefault();
var data = $(formId).serializeArray();
data.push({name: 'body', value: tinyMCE.get('tinymce').getContent()});
$.ajax({
type: 'POST',
url: $(formId).attr('data-action'),
data: data,
success: function (response, textStatus, xhr) {
window.location=response.redirectTo;
},
complete: function (xhr) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var response = XMLHttpRequest;
}
});
});
});
</script>
@endsection
show.blade.php@extends('layouts.app-master')
@section('content')
<div class="bg-light p-4 rounded">
<h2>Show post</h2>
<div class="lead">
</div>
<div class="container mt-4">
<div>
Title: {{ $post->title }}
</div>
<div>
Description: {{ $post->description }}
</div>
<div>
Body: {!! $post->body !!}
</div>
</div>
</div>
<div class="mt-4">
<a href="{{ route('posts.edit', $post->id) }}" class="btn btn-info">Edit</a>
<a href="{{ route('posts.index') }}" class="btn btn-default">Back</a>
</div>
@endsection
edit.blade.php@extends('layouts.app-master')
@section('content')
<div class="bg-light p-4 rounded">
<h2>Update post</h2>
<div class="lead">
Edit post.
</div>
<div class="container mt-4">
<form method="POST" id="update-content-form" data-action="{{ route('posts.update', $post->id) }}">
@method('patch')
@csrf
<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input value="{{ $post->title }}"
type="text"
class="form-control"
name="title"
placeholder="Title" required>
@if ($errors->has('title'))
<span class="text-danger text-left">{{ $errors->first('title') }}</span>
@endif
</div>
<div class="mb-3">
<label for="description" class="form-label">Description</label>
<input value="{{ $post->description }}"
type="text"
class="form-control"
name="description"
placeholder="Description" required>
@if ($errors->has('description'))
<span class="text-danger text-left">{{ $errors->first('description') }}</span>
@endif
</div>
<div class="mb-3">
<label for="body" class="form-label">Body</label>
<textarea
type="text"
class="form-control"
id="tinymce" required>{{ $post->body }}</textarea>
@if ($errors->has('body'))
<span class="text-danger text-left">{{ $errors->first('body') }}</span>
@endif
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
<a href="{{ route('posts.index') }}" class="btn btn-default">Back</a>
</form>
</div>
</div>
@endsection
@section('scripts')
<script type="text/javascript">
tinymce.init({
selector: 'textarea#tinymce',
height: 600
});
$(document).ready(function() {
var formId = '#update-content-form';
$(formId).on('submit', function(e) {
e.preventDefault();
var data = $(formId).serializeArray();
data.push({name: 'body', value: tinyMCE.get('tinymce').getContent()});
$.ajax({
type: 'POST',
url: $(formId).attr('data-action'),
data: data,
success: function (response, textStatus, xhr) {
window.location=response.redirectTo;
},
complete: function (xhr) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var response = XMLHttpRequest;
}
});
});
});
</script>
@endsection
5단계: 컨트롤러 설정
이제 컨트롤러를 설정해 보겠습니다. 전체 코드는 아래를 참조하십시오.
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class PostsController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$posts = Post::latest()->paginate(10);
return view('posts.index', compact('posts'));
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('posts.create');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
Post::create(array_merge($request->only('title', 'description', 'body'),[
'user_id' => auth()->id()
]));
return response()->json(['redirectTo' => '/posts']);
}
/**
* Display the specified resource.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function show(Post $post)
{
return view('posts.show', [
'post' => $post
]);
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function edit(Post $post)
{
return view('posts.edit', [
'post' => $post
]);
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Post $post)
{
$post->update($request->only('title', 'description', 'body'));
return response()->json(['redirectTo' => '/posts']);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Models\Post $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
$post->delete();
return redirect()->route('posts.index')
->withSuccess(__('Post deleted successfully.'));
}
}
6단계: 모델 설정
Post Model의 전체 코드는 아래를 참조하십시오.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $table = 'posts';
protected $fillable = [
'user_id',
'title',
'description',
'body'
];
}
그게 다야. 이제 Laravel 8에 TinyMCE Editor를 통합하는 방법에 대한 아이디어가 이미 있습니다. 이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/laravel/how-to-integrate-tinymce-editor-in-laravel-8를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(Laravel 8에서 TinyMCE 편집기를 통합하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/how-to-integrate-tinymce-editor-in-laravel-8-26mn텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
