TinyMCE 사용자 지정 대화 상자 예
29035 단어 tinymcejavascriptwysiwygphp
이 게시물에서는 TinyMCE WYSIWYG HTML 편집기에서 사용자 지정 대화 상자를 추가하는 방법을 공유하고 있습니다. 대화 상자를 추가하면 TinyMCE를 사용하여 콘텐츠 편집기에 동적 레코드 또는 데이터를 입력할 수 있습니다. 이제 간단한 단계로 수행하는 방법을 보여 드리겠습니다. 더 나아가기 위해 기본how-to install TinyMCE에 대한 자습서가 있습니다. 필요한 경우 방문하세요.
좋아, 계속하자.
TinyMCE에서 editor.ui.registry를 사용하여 지정된 입력이 있는 양식으로 사용자 지정 대화 상자를 추가할 수 있습니다.
TinyMCE 대화 상자 설정
TinyMCE 구성에 아래 코드를 추가하십시오.
setup: function (editor) {
}
TinyMCE 레지스트리 추가
그런 다음 setup 함수 안에 아래 코드를 추가합니다.
editor.ui.registry.addButton('custom_dialog', {
text: 'Open Custom Dialog',
onAction: function() {
// Open a Dialog
editor.windowManager.open({
title: 'Custom dialog box',
body: {
type: 'panel',
items: [{
type: 'input',
name: 'custom_data',
label: 'Custom data',
flex: true
}]
},
onSubmit: function (api) {
// insert markup
editor.insertContent('Inserted custom data: ' + api.getData().custom_data);
// close the dialog
api.close();
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Insert',
type: 'submit',
primary: true,
enabled: false
}
]
});
}
});
위의 코드에서 볼 수 있듯이 대화 상자 이름인 custom_dialog가 있으며 이를 도구 모음 설정에 호출합니다. 아래 예를 참조하십시오.
도구 모음에 사용자 지정 대화 상자 삽입
custom_dialog가 없는 도구 모음 설정:
toolbar:"undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button",
custom_dialog를 사용한 도구 모음 설정:
toolbar: "undo redo | fontselect styleselect fontsizeselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | codesample action section button | custom_dialog",
위에서 볼 수 있듯이 "| custom_dialog"를 추가하면 TinyMCE 편집기 도구 모음에 "사용자 지정 대화 상자 열기"가 표시됩니다.
아래의 전체 설정을 참조하십시오.
setup: function (editor) {
editor.ui.registry.addButton('custom_dialog', {
text: 'Open Custom Dialog',
onAction: function() {
// Open a Dialog
editor.windowManager.open({
title: 'Custom dialog box',
body: {
type: 'panel',
items: [{
type: 'input',
name: 'custom_data',
label: 'Custom data',
flex: true
}]
},
onSubmit: function (api) {
// insert markup
editor.insertContent('Inserted custom data: ' + api.getData().custom_data);
// close the dialog
api.close();
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Insert',
type: 'submit',
primary: true,
enabled: false
}
]
});
}
});
}
완벽한 TinyMCE 구성
아래의 전체 TinyMCE 구성 설정을 참조하십시오.
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_dialog",
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",
height: 600,
setup: function (editor) {
editor.ui.registry.addButton('custom_dialog', {
text: 'Open Custom Dialog',
onAction: function() {
// Open a Dialog
editor.windowManager.open({
title: 'Custom dialog box',
body: {
type: 'panel',
items: [{
type: 'input',
name: 'custom_data',
label: 'Custom data',
flex: true
}]
},
onSubmit: function (api) {
// insert markup
editor.insertContent('Inserted custom data: ' + api.getData().custom_data);
// close the dialog
api.close();
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Insert',
type: 'submit',
primary: true,
enabled: false
}
]
});
}
});
}
});
완전한 TinyMCE 소스 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic on TinyMCE with Custom Dialog Box</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_dialog",
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",
height: 600,
setup: function (editor) {
editor.ui.registry.addButton('custom_dialog', {
text: 'Open Custom Dialog',
onAction: function() {
// Open a Dialog
editor.windowManager.open({
title: 'Custom dialog box',
body: {
type: 'panel',
items: [{
type: 'input',
name: 'custom_data',
label: 'Custom data',
flex: true
}]
},
onSubmit: function (api) {
// insert markup
editor.insertContent('Inserted custom data: ' + api.getData().custom_data);
// close the dialog
api.close();
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Insert',
type: 'submit',
primary: true,
enabled: false
}
]
});
}
});
}
});
</script>
</head>
<body>
<div class="container mt-5">
<form method="post">
<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">Submit</button>
</form>
</div>
</body>
</html>
이제 사용자 지정 대화 상자를 설정하거나 추가하는 방법에 대해 이미 알고 있습니다.
이 튜토리얼이 도움이 되었으면 합니다. 이 코드를 다운로드하려면 여기https://codeanddeploy.com/blog/javascript/tinymce-custom-dialog-box-example를 방문하십시오.
행복한 코딩 :)
Reference
이 문제에 관하여(TinyMCE 사용자 지정 대화 상자 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/codeanddeploy/tinymce-custom-dialog-box-example-4m8f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
