Ajax를 사용하여 TinyMCE를 PHP 및 MySQL에 통합
36669 단어 phpwysiwygeditortinymcetutorial
이 게시물에서는 ajax를 사용하여 PHP 및 MySQL에서 TinyMCE를 통합하거나 구현하는 방법을 공유하고 있습니다. 이전 튜토리얼에서 TinyMCE에 대한 기본 사항을 공유했습니다. 이제 ajax 요청을 통해 PHP 및 MySQL을 사용하여 데이터베이스에 데이터를 저장하는 방법에 대해 이야기하겠습니다.
TinyMCE 콘텐츠를 PHP 및 MySQL에 저장하고 이를 프로젝트에 통합하는 방법에 대한 단계별 프로세스를 제공합니다.
1단계: 데이터베이스 생성
먼저 원하는 이름으로 데이터베이스를 만들어야 합니다. 명령 프롬프트를 열고 MySQL 명령을 사용하여 프로세스를 수행하면 로컬 호스트에 이미 PHPMyAdmin을 설치한 경우 PHPMyAdmin을 쉽게 사용할 수 있습니다.
2단계: 테이블 만들기
그런 다음 "posts"테이블이라는 SQL을 실행합니다.
CREATE TABLE `posts` (
`id` int(11) NOT NULL,
`title` varchar(150) NOT NULL,
`content` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
ALTER TABLE `posts`
ADD PRIMARY KEY (`id`);
ALTER TABLE `posts`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
COMMIT;
3단계: save.php 파일 생성
이 프로세스는 Ajax 요청을 통해 콘텐츠를 저장합니다. 다음 코드를 참조하십시오.
<?php
$host = 'localhost';
$db = 'demos';
$user = 'root';
$password = '';
$dsn = "mysql:host=$host;dbname=$db;charset=UTF8";
try {
$conn = new PDO($dsn, $user, $password, [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]);
} catch (PDOException $e) {
echo $e->getMessage();
}
$sql = 'INSERT INTO posts(title, content) VALUES(:title, :content)';
$statement = $conn->prepare($sql);
$statement->execute([
':title' => $_REQUEST['title'],
':content' => $_REQUEST['content']
]);
echo "Post saved successfully!";
4단계: TinyMCE 자바스크립트 코드와 ajax로 HTML 파일 만들기
다음은 ajax 요청으로 TinyMCE 콘텐츠를 PHP 및 MySQL에 저장하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Integrate TinyMCE in PHP & MySQL Using Ajax</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/tinymce/js/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: 'textarea#tinymce',
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table paste codesample"
],
toolbar:
"undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button | custom_button",
content_css: [window.location.origin+"/assets/css/custom_css_tinymce.css"],
font_formats:"Segoe UI=Segoe UI;",
fontsize_formats: "8px 9px 10px 11px 12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 42px 44px 46px 48px 50px 52px 54px 56px 58px 60px 62px 64px 66px 68px 70px 72px 74px 76px 78px 80px 82px 84px 86px 88px 90px 92px 94px 94px 96px",
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'Java', value: 'java'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
height: 600,
setup: function (editor) {
editor.ui.registry.addButton('custom_button', {
text: 'Add Button',
onAction: function() {
// Open a Dialog
editor.windowManager.open({
title: 'Add custom button',
body: {
type: 'panel',
items: [{
type: 'input',
name: 'button_label',
label: 'Button label',
flex: true
},{
type: 'input',
name: 'button_href',
label: 'Button href',
flex: true
},{
type: 'selectbox',
name: 'button_target',
label: 'Target',
items: [
{text: 'None', value: ''},
{text: 'New window', value: '_blank'},
{text: 'Self', value: '_self'},
{text: 'Parent', value: '_parent'}
],
flex: true
},{
type: 'selectbox',
name: 'button_rel',
label: 'Rel',
items: [
{text: 'No value', value: ''},
{text: 'Alternate', value: 'alternate'},
{text: 'Help', value: 'help'},
{text: 'Manifest', value: 'manifest'},
{text: 'No follow', value: 'nofollow'},
{text: 'No opener', value: 'noopener'},
{text: 'No referrer', value: 'noreferrer'},
{text: 'Opener', value: 'opener'}
],
flex: true
},{
type: 'selectbox',
name: 'button_style',
label: 'Style',
items: [
{text: 'Success', value: 'success'},
{text: 'Info', value: 'info'},
{text: 'Warning', value: 'warning'},
{text: 'Error', value: 'error'}
],
flex: true
}]
},
onSubmit: function (api) {
var html = '<a href="'+api.getData().button_href+'" class="btn btn-'+api.getData().button_style+'" rel="'+api.getData().button_rel+'" target="'+api.getData().button_target+'">'+api.getData().button_label+'</a>';
// insert markup
editor.insertContent(html);
// close the dialog
api.close();
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Insert',
type: 'submit',
primary: true,
enabled: false
}
]
});
}
});
}
});
$(document).ready(function() {
$('#save-content-form').on('submit', function(e) {
e.preventDefault();
var data = $('#save-content-form').serializeArray();
data.push({name: 'content', value: tinyMCE.get('tinymce').getContent()});
$.ajax({
type: 'POST',
url: window.location.origin+'/save.php',
data: data,
success: function (response, textStatus, xhr) {
console.log(response)
},
complete: function (xhr) {
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var response = XMLHttpRequest;
}
});
});
});
</script>
</head>
<body>
<div class="container mt-5">
<form method="post" id="save-content-form">
<div class="form-group">
<label>Title</label>
<input type="text" name="title" class="form-control">
</div>
<div class="form-group mt-4">
<label>Content</label>
<textarea id="tinymce"></textarea>
</div>
<button class="btn btn-primary mt-4" type="submit">Submit</button>
</form>
</div>
</body>
</html>
이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/php/integrate-tinymce-in-php-mysql-using-ajax를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(Ajax를 사용하여 TinyMCE를 PHP 및 MySQL에 통합), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/integrate-tinymce-in-php-mysql-using-ajax-78g텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
