add custom editor font

This commit is contained in:
Amberstone 2024-09-22 13:51:59 +09:00
parent ae5da1e21e
commit 37c7012270
Signed by: amber
GPG key ID: 094B0E55F98D8BF1
11 changed files with 461 additions and 206 deletions

View file

@ -0,0 +1,21 @@
<?php
include_once './_common.php';
$font_sql = "SELECT * FROM {$g5['font_table']} ORDER BY font_name ASC";
$font_result = sql_query($font_sql);
echo "<style id=\"extra_font\">";
while ($row = sql_fetch_array($font_result)) {
$font_family = $row['font_family'];
$font_url = stripslashes($row['font_url']);
$font_weight = $row['font_weight'];
$font_style = $row['font_style'];
echo "@font-face {\n";
echo " font-family: '{$font_family}';\n";
echo " src: {$font_url};\n";
echo " font-weight: {$font_weight};\n";
echo " font-style: {$font_style};\n";
echo "}\n\n";
}
echo "</style>";

View file

@ -19,7 +19,7 @@ $menu["config"]->getLastAddedMenu()->addSubURL("/theme_preview.php");
$menu["config"]->addChildMenu("config", "디자인 설정", G5_ADMIN_URL . "/design_form.php", true, 4, "\F1D8", 0);
$menu["config"]->getLastAddedMenu()->addSubURL("/design_form_update.php");
$menu["config"]->addChildMenu("config", "폰트 설정", G5_ADMIN_URL . "/editor_font.php", true, 5, "\F3DA", 0);
$menu["config"]->addChildMenu("config", "HTML에디터 폰트 설정", G5_ADMIN_URL . "/editor_font.php", true, 5, "\F3DA", 0);
$menu["config"]->getLastAddedMenu()->addSubURL("/editor_font_update.php");
$menu["config"]->addChildMenu("config", "메뉴 설정", G5_ADMIN_URL . "/menu_list.php", true, 6, "\F478", 0);

View file

@ -182,6 +182,25 @@ body {
padding: 0;
}
.list_confirm {
display: flex;
justify-content: end;
padding: 16px;
}
.list_confirm>* {
background: #d18686;
color: #FFF;
cursor: pointer;
min-width: 64px;
text-align: center;
display: block;
line-height: 1em;
padding: 8px 16px;
box-sizing: border-box;
border: 0;
}
.btn_confirm>* {
display: block;
position: relative;
@ -243,7 +262,7 @@ body {
#gnb>ul>li>a {
display: block;
padding: 10px 20px;
padding: 8px 16px;
color: #9da4b3;
font-size: 15px;
text-decoration: none;
@ -255,7 +274,7 @@ body {
#gnb .gnb_2dli>a {
display: block;
padding: 10px 20px 10px 25px;
padding: 8px 12px;
color: #acaeb2;
font-size: 13px;
}
@ -273,18 +292,6 @@ body {
color: #e76148;
}
#gnb .gnb_2dli.check:after {
font-size: 16px;
content: "\F633";
font-family: 'icon';
display: block;
position: absolute;
top: 0;
right: 10px;
line-height: 39px;
color: #e76148;
}
#gnb .gnb_2dli>a:hover {
color: #fff;
background: #484c58;

View file

@ -1,15 +1,145 @@
<?php
include_once __DIR__ . '/_common.php';
include_once G5_EDITOR_LIB;
if ($is_admin != 'super') {
alert_close('최고관리자만 접근 가능합니다.');
}
$g5['title'] = '에디터 폰트 관리';
// 테이블이 없을 경우 생성
if (!sql_fetch_array(sql_query("DESC {$g5['font_table']}"))) {
$sql = "CREATE TABLE IF NOT EXISTS {$g5['font_table']} (
font_id INT(11) NOT NULL AUTO_INCREMENT,
font_name VARCHAR(255) NOT NULL,
font_family VARCHAR(255) NOT NULL,
font_url TEXT NOT NULL,
font_weight VARCHAR(50) NOT NULL DEFAULT 'normal',
font_style VARCHAR(50) NOT NULL DEFAULT 'normal',
PRIMARY KEY (font_id)
) ENGINE=MyISAM DEFAULT CHARSET=utf8mb3";
sql_query($sql, false);
}
// 목록 출력
$sql = " SELECT * FROM {$g5['font_table']} ORDER BY font_family ASC ";
$result = sql_query($sql);
$g5['title'] = "에디터 폰트 관리";
include_once __DIR__ . '/admin.head.php';
?>
<section>
<h2>폰트 등록</h2>
<form name="ffontform" method="post" action="./editor_font_update.php" onsubmit="return ffontform_submit(this);">
<input type="hidden" name="token" value="">
<input type="hidden" name="w" value="">
<div class="tbl_frm01 tbl_wrap">
<table>
<caption>폰트 입력</caption>
<colgroup>
<col class="grid_4" style="width: 140px">
<col>
</colgroup>
<tbody>
<tr>
<th scope="row"><label for="font_name">폰트 이름<strong class="sound_only">필수</strong></label></th>
<td><input type="text" name="font_name" value="" id="font_name" required class="required frm_input"
size="50"></td>
</tr>
<tr>
<th scope="row"><label for="font_css">@font-face CSS<strong class="sound_only">필수</strong></label></th>
<td>
<span class="frm_info">@font-face CSS를 그대로 붙여넣으세요.</span>
<textarea name="font_css" id="font_css" rows="8" required class="required frm_input" style="width:100%;"
placeholder="@font-face {
font-family: 'FontName';
src: url('https://example.com/font.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
<div class="list_confirm">
<input type="submit" value="등록" class="btn_submit" accesskey="s">
</div>
</form>
</section>
<section>
<h2>등록된 폰트</h2>
<div class="local_ov01 local_ov">
등록된 폰트 <?php echo number_format(sql_num_rows($result)) ?>
</div>
<form name="ffontlist" id="ffontlist" method="post" action="./editor_font_update.php"
onsubmit="return ffontlist_submit(this);">
<input type="hidden" name="token" value="">
<input type="hidden" name="w" value="u">
<div class="tbl_head01 tbl_wrap">
<table>
<caption><?php echo $g5['title']; ?> 목록</caption>
<thead>
<tr>
<th scope="col" style="width: 200px">폰트 이름</th>
<th scope="col" style="width: 200px">Font Family</th>
<th scope="col">Font URL</th>
<th scope="col" style="width: 120px">Font Weight</th>
<th scope="col" style="width: 120px">Font Style</th>
<th scope="col" style="width: 80px">관리</th>
</tr>
</thead>
<tbody>
<?php
for ($i = 0; $row = sql_fetch_array($result); $i++) {
$font_id = $row['font_id'];
?>
<tr>
<td class="td_left"><?php echo get_text($row['font_name']); ?></td>
<td class="td_left"><?php echo get_text($row['font_family']); ?></td>
<td class="td_left"><?php echo get_text($row['font_url']); ?></td>
<td class="td_left"><?php echo get_text($row['font_weight']); ?></td>
<td class="td_left"><?php echo get_text($row['font_style']); ?></td>
<td class="td_mng td_mng_l">
<a href="./editor_font_update.php?w=d&amp;font_id=<?php echo $font_id ?>"
onclick="return delete_confirm(this);" class="btn btn_02">삭제</a>
</td>
</tr>
<?php
}
if ($i == 0) {
echo '<tr><td colspan="6" class="empty_table">등록된 폰트가 없습니다.</td></tr>';
}
?>
</tbody>
</table>
</div>
</form>
</section>
<section>
<?php echo help('폰트 출력을 미리 보기 위한 에디터입니다.') ?>
<?php echo editor_html('preview_content', ""); ?>
</section>
<script>
function ffontform_submit(f) {
if (f.font_css.value.trim() === "") {
alert("@font-face CSS를 입력해주세요.");
f.font_css.focus();
return false;
}
if (f.font_name.value.trim() === "") {
alert("폰트 이름을 입력해주세요.");
f.font_name.focus();
return false;
}
return true;
}
function delete_confirm(el) {
return confirm("선택한 폰트를 정말 삭제하시겠습니까?");
}
</script>
<?php
include_once __DIR__ . '/admin.tail.php';

View file

@ -1,6 +1,61 @@
<?php
include_once __DIR__ . '/_common.php';
include_once './_common.php';
if ($is_admin != 'super') {
alert_close('최고관리자만 접근 가능합니다.');
alert('최고관리자만 접근 가능합니다.');
}
$w = isset($_POST['w']) ? $_POST['w'] : (isset($_GET['w']) ? $_GET['w'] : '');
if ($w == 'd') {
$font_id = isset($_POST['font_id']) ? intval($_POST['font_id']) : isset($_GET['font_id']) ? intval($_GET['font_id']) : 0;
if (!$font_id) {
alert('올바른 요청이 아닙니다.');
}
}
if ($w == '') {
$font_css = isset($_POST['font_css']) ? stripslashes(trim($_POST['font_css'])) : '';
$font_name = isset($_POST['font_name']) ? clean_xss_tags(trim($_POST['font_name'])) : '';
if (empty($font_css) || empty($font_name)) {
alert('@font-face CSS와 폰트 이름은 필수 입력 항목입니다.');
}
preg_match("/font-family:\s*['\"](.*?)['\"]/i", $font_css, $family_matches);
preg_match("/src:\s*(.*?);/i", $font_css, $src_matches);
preg_match("/font-weight:\s*(.*?);/i", $font_css, $weight_matches);
preg_match("/font-style:\s*(.*?);/i", $font_css, $style_matches);
$font_family = isset($family_matches[1]) ? clean_xss_tags(trim($family_matches[1])) : '';
$font_url = isset($src_matches[1]) ? addslashes(trim($src_matches[1])) : '';
$font_weight = isset($weight_matches[1]) ? clean_xss_tags(trim($weight_matches[1])) : 'normal';
$font_style = isset($style_matches[1]) ? clean_xss_tags(trim($style_matches[1])) : 'normal';
if (empty($font_family) || empty($font_url)) {
alert('CSS에서 font-family와 src를 추출할 수 없습니다.');
}
$sql = "INSERT INTO {$g5['font_table']} SET font_name = '{$font_name}',
font_family = '{$font_family}',
font_url = '{$font_url}',
font_weight = '{$font_weight}',
font_style = '{$font_style}'";
sql_query($sql);
$sql_error = sql_error_info();
$msg = '폰트가 추가되었습니다.';
} else if ($w == 'd') {
$sql = " DELETE FROM {$g5['font_table']} WHERE font_id = '{$font_id}' ";
sql_query($sql);
$msg = '폰트가 삭제되었습니다.';
}
if ($msg) {
alert($msg);
}
goto_url('./editor_font.php');

View file

@ -223,6 +223,8 @@ if (file_exists($dbconfig_file)) {
include_once G5_LIB_PATH . '/common.lib.php'; // 공통 라이브러리
include_once G5_LIB_PATH . '/get_data.lib.php';
$g5["font_table"] = G5_TABLE_PREFIX . "editor_fonts";
$connect_db = sql_connect(G5_MYSQL_HOST, G5_MYSQL_USER, G5_MYSQL_PASSWORD) or die('MySQL Connect Error!!!');
$select_db = sql_select_db(G5_MYSQL_DB, $connect_db) or die('MySQL DB Error!!!');

View file

@ -76,6 +76,8 @@ $html_class .= $_COOKIE['header_close'] == 'close' ? " close-header" : "";
href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet">
<?php
include_once __DIR__ . "/_extra_font.php";
if (defined('G5_IS_ADMIN')) {
echo get_embed_file("css", G5_ADMIN_PATH . '/css/admin.css') . PHP_EOL;
echo get_embed_file("css", G5_ADMIN_PATH . '/css/admin.layout.css') . PHP_EOL;

View file

@ -2,26 +2,46 @@
$(document).ready(function () {
$(".smarteditor2").each(function (index) {
var get_id = $(this).attr("id");
if (!get_id || $(this).prop("nodeName") != 'TEXTAREA') return true;
nhn.husky.EZCreator.createInIFrame({
oAppRef: oEditors,
elPlaceHolder: get_id,
sSkinURI: g5_editor_url + "/SmartEditor2Skin.html",
htParams: {
bUseToolbar: true, // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
bUseVerticalResizer: true, // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
bUseModeChanger: true, // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
bSkipXssFilter: true, // client-side xss filter 무시 여부 (true:사용하지 않음 / 그외:사용)
//aAdditionalFontList : aAdditionalFontSet, // 추가 글꼴 목록
bUseToolbar: true,
bUseVerticalResizer: true,
bUseModeChanger: true,
bSkipXssFilter: true,
aAdditionalFontList : editorAdditionalFontList,
fOnBeforeUnload: function () {
//alert("완료!");
// unload
}
}, //boolean
fOnAppLoad: function () {
//예제 코드
//oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
const extraFont = document.head.querySelector('#extra_font');
if (extraFont) {
const fontStyle = extraFont.textContent || extraFont.innerText;
const editorDocument = oEditors.getById[get_id].getWYSIWYGDocument();
const editorHead = editorDocument.getElementsByTagName("head")[0];
const editorStyle = editorDocument.createElement("style");
editorStyle.appendChild(editorDocument.createTextNode(fontStyle));
editorHead.appendChild(editorStyle);
const iframes = document.getElementsByTagName('iframe');
for (let i = 0; i < iframes.length; i++) {
if (iframes[i].src.indexOf('SmartEditor2Skin.html') !== -1) {
const iframeDocument = iframes[i].contentDocument || iframes[i].contentWindow.document;
const iframeHead = iframeDocument.getElementsByTagName("head")[0];
if (!iframeHead.querySelector("#extra_font")) {
const iframeStyle = iframeDocument.createElement("style");
iframeStyle.id = "extra_font";
iframeStyle.appendChild(iframeDocument.createTextNode(fontStyle));
iframeHead.appendChild(iframeStyle);
}
}
}
}
},
fCreator: "createSEditor2"
});

View file

@ -46,7 +46,7 @@ body,#smart_editor2,#smart_editor2 p,#smart_editor2 h1,#smart_editor2 h2,#smart_
/* EDITINGAREA_HTMLSRC */
#smart_editor2 .off .ico_btn,#smart_editor2 .off .se2_more,#smart_editor2 .off .se2_more2,#smart_editor2 .off .se2_font_family,#smart_editor2 .off .se2_font_size,#smart_editor2 .off .se2_bold,#smart_editor2 .off .se2_underline,#smart_editor2 .off .se2_italic,#smart_editor2 .off .se2_tdel,#smart_editor2 .off .se2_fcolor,#smart_editor2 .off .se2_fcolor_more,#smart_editor2 .off .se2_bgcolor,#smart_editor2 .off .se2_bgcolor_more,#smart_editor2 .off .se2_left,#smart_editor2 .off .se2_center,#smart_editor2 .off .se2_right,#smart_editor2 .off .se2_justify,#smart_editor2 .off .se2_ol,#smart_editor2 .off .se2_ul,#smart_editor2 .off .se2_indent,#smart_editor2 .off .se2_outdent,#smart_editor2 .off .se2_lineheight,#smart_editor2 .off .se2_del_style,#smart_editor2 .off .se2_blockquote,#smart_editor2 .off .se2_summary,#smart_editor2 .off .se2_footnote,#smart_editor2 .off .se2_url,#smart_editor2 .off .se2_emoticon,#smart_editor2 .off .se2_character,#smart_editor2 .off .se2_table,#smart_editor2 .off .se2_find,#smart_editor2 .off .se2_spelling,#smart_editor2 .off .se2_sup,#smart_editor2 .off .se2_sub,#smart_editor2 .off .se2_text_tool_more,#smart_editor2 .off .se2_new,#smart_editor2 .off .selected_color,#smart_editor2 .off .se2_lineSticker{-ms-filter:alpha(opacity=50);opacity:.5;cursor:default;filter:alpha(opacity=50)}
/* LAYER */
#smart_editor2 .se2_text_tool .se2_layer{display:none;float:left;position:absolute;top:20px;left:0;z-index:50;margin:0;padding:0;border:1px solid #bcbbbb;background:#fafafa}
#smart_editor2 .se2_text_tool .se2_layer{display:none;float:left;position:absolute;top:20px;left:0;z-index:50;margin:0;padding:0;border:1px solid #bcbbbb;background:#fafafa;max-height:60vh;overflow-y:auto}
#smart_editor2 .se2_text_tool li.active{z-index:50}
#smart_editor2 .se2_text_tool .active .se2_layer{display:block}
#smart_editor2 .se2_text_tool .active li .se2_layer{display:none}

View file

@ -47,7 +47,7 @@ body,#smart_editor2,#smart_editor2 p,#smart_editor2 h1,#smart_editor2 h2,#smart_
/* EDITINGAREA_HTMLSRC */
#smart_editor2 .off .ico_btn,#smart_editor2 .off .se2_more,#smart_editor2 .off .se2_more2,#smart_editor2 .off .se2_font_family,#smart_editor2 .off .se2_font_size,#smart_editor2 .off .se2_bold,#smart_editor2 .off .se2_underline,#smart_editor2 .off .se2_italic,#smart_editor2 .off .se2_tdel,#smart_editor2 .off .se2_fcolor,#smart_editor2 .off .se2_fcolor_more,#smart_editor2 .off .se2_bgcolor,#smart_editor2 .off .se2_bgcolor_more,#smart_editor2 .off .se2_left,#smart_editor2 .off .se2_center,#smart_editor2 .off .se2_right,#smart_editor2 .off .se2_justify,#smart_editor2 .off .se2_ol,#smart_editor2 .off .se2_ul,#smart_editor2 .off .se2_indent,#smart_editor2 .off .se2_outdent,#smart_editor2 .off .se2_lineheight,#smart_editor2 .off .se2_del_style,#smart_editor2 .off .se2_blockquote,#smart_editor2 .off .se2_summary,#smart_editor2 .off .se2_footnote,#smart_editor2 .off .se2_url,#smart_editor2 .off .se2_emoticon,#smart_editor2 .off .se2_character,#smart_editor2 .off .se2_table,#smart_editor2 .off .se2_find,#smart_editor2 .off .se2_spelling,#smart_editor2 .off .se2_sup,#smart_editor2 .off .se2_sub,#smart_editor2 .off .se2_text_tool_more,#smart_editor2 .off .se2_new,#smart_editor2 .off .selected_color,#smart_editor2 .off .se2_lineSticker{-ms-filter:alpha(opacity=50);opacity:.5;cursor:default;filter:alpha(opacity=50)}
/* LAYER */
#smart_editor2 .se2_text_tool .se2_layer{display:none;float:left;position:absolute;top:20px;left:0;z-index:50;margin:0;padding:0;border:1px solid #bcbbbb;background:#fafafa}
#smart_editor2 .se2_text_tool .se2_layer{display:none;float:left;position:absolute;top:20px;left:0;z-index:50;margin:0;padding:0;border:1px solid #bcbbbb;background:#fafafa;max-height:60vh;overflow-y:auto}
#smart_editor2 .se2_text_tool li.active{z-index:50}
#smart_editor2 .se2_text_tool .active .se2_layer{display:block}
#smart_editor2 .se2_text_tool .active li .se2_layer{display:none}

View file

@ -30,7 +30,25 @@ function editor_html($id, $content, $is_dhtml_editor = true)
if ($is_dhtml_editor && $js) {
$html .= "\n<script src=\"{$editor_url}/js/service/HuskyEZCreator.js\"></script>";
$html .= "\n<script>var g5_editor_url = \"{$editor_url}\", oEditors = [], ed_nonce = \"{ft_nonce_create('smarteditor')}\";</script>";
$html .= "\n<script>let g5_editor_url = \"{$editor_url}\", oEditors = [], ed_nonce = \"{ft_nonce_create('smarteditor')}\";let editorAdditionalFontList = [";
$sql = "SELECT * FROM {$g5['font_table']} ORDER BY font_name ASC";
$result = sql_query($sql);
$addFontList = [];
while ($row = sql_fetch_array($result)) {
$font_name = addslashes($row['font_name']);
$font_family = addslashes($row['font_family']);
$addFontList[] = "['{$font_family}', '{$font_name}']";
}
if (count($addFontList) > 0) {
$html .= implode(",", $addFontList);
}
$html .= "];</script>";
$html .= "\n<script src=\"{$editor_url}/config.js\"></script>";
$html .= "\n<script>";
$html .= '