PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
P

Hoe output in php variable krijgen?

Door Paul Weiss op 14-02-2022 14:12 gewijzigd op 14-02-2022 19:24
2.645 views
Hallo. Ik heb onderstaande editor gevonden, die prima werkt. Ik wil deze graag gebruiken om mijn eigen blog te schrijven. Wat ik nu echter graag wil bereiken is de html code van de editpr via een button opslaan in een variabele in php. Dus wanneer je op de button klikt dient er een php bestand te worden geladen waarin de output dus in een variable wordt geplaatst. Vervolgens kan ik deze weer opslaan in de database. .Ik ben niet echt heel bekend met javascript. Weet iemand hoe ik dit kan realiseren? Alvast bedankt voor jullie hulp. Onderstaande de volledige code van zowel html, styling en de bijbehorende javascript. Is even wat veel code, maar dan kan je deze zelf deze ook op je pc uittesten en wellicht heb je er zelf ook wat aan.

Onderstaande de html code:


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - editor</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="content">
<h1>Suneditor Demo</h1>
<form name="frm">
<textarea id="editor" style="width:100%; height:400px;">Hello World!</textarea>
 </form>
</div>
<!-- partial -->
  <script  src="./script.js"></script>
</body>
</html>


Onderstaande de styling:


@CHARSET "UTF-8";

/* ë©”́¸ */
.sun-editor {width:auto; height:auto; border:1px solid #dadada; background-color:#FFF; z-index:10000;}
.sun-editor th, .sun-editor td, .sun-editor input, .sun-editor select, .sun-editor textarea, .sun-editor button {font-size:14px; font-family:sans-serif; line-height:1.5; color:#111;}
.sun-editor body, .sun-editor div, .sun-editor dl, .sun-editor dt, .sun-editor dd, .sun-editor ul, .sun-editor ol, .sun-editor li,
.sun-editor h1, .sun-editor h2, .sun-editor h3, .sun-editor h4, .sun-editor h5, .sun-editor h6, .sun-editor pre, .sun-editor code, .sun-editor form, .sun-editor fieldset,
.sun-editor legend, .sun-editor textarea, .sun-editor p, .sun-editor blockquote, .sun-editor th, .sun-editor td, .sun-editor input, .sun-editor select, .sun-editor textarea, .sun-editor button {margin:0; padding:0; border:0; color:#000 !important;}
.sun-editor dl, .sun-editor ul, .sun-editor ol, .sun-editor menu, .sun-editor li {list-style: none !important;}
.sun-editor hr {margin:6px 0 6px 0 !important;}
.sun-editor textarea {resize:none !important; border:0 !important;}
.sun-editor button {border:0 none; background-color:transparent; touch-action:manipulation; cursor:pointer;}
.sun-editor input, .sun-editor select, .sun-editor textarea, .sun-editor button {vertical-align: middle;}
.sun-editor button .txt {display: block; margin-top: 0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.sun-editor .btn_align .img_editor {display: inline-block; width:14px; height:13px; margin:-1px 10px 0 0; vertical-align:middle; text-indent:-9999px;}
.sun-editor .layer_line .img_editor {display: inline-block; width:138px; height:1px; margin:-1px 10px 0 0; vertical-align:middle; text-indent:-9999px;}
.sun-editor .screen_out {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;}

/* ́»¨í…Œ́´ë„ˆ */
.sun-editor .sun-editor-container {position:relative; width:100%; height:100%;}

/* 툴바 */
.sun-editor .sun-editor-id-toolbar-cover {position:absolute; display:none; font-size:36px; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-color:#fefefe; opacity:.5; filter:alpha(opacity=50); cursor:not-allowed; z-index:9;}
.sun-editor .sun-editor-id-toolbar {overflow:visible; position:relative; height:auto; font-size:0pt; padding:3px 3px 3px 0px; background-color:#fafafa; border-bottom:1px solid #dadada; z-index:9;}

.sun-editor .sun-editor-id-toolbar .tool_module {display:inline-block;}
.sun-editor .sun-editor-id-toolbar .editor_tool {float: left;height: 32px;margin:5px 0 5px 5px;}
.sun-editor .sun-editor-id-toolbar .editor_tool li {position:relative; float:left;}

.sun-editor .sun-editor-id-toolbar .layer_editor {display: none; position:absolute; top:34px; left:1px; z-index:1; border:1px solid #bababa; border-radius:2px; background-color:#fff; -webkit-box-shadow:0 3px 9px rgba(0, 0, 0, .5); box-shadow:0 3px 9px rgba(0, 0, 0, .5); outline:0 none;}
.sun-editor .sun-editor-id-toolbar .layer_editor .write_place .inp_txt {float:left; width:100%; height:23px; margin-top:0; font-size:12px; text-indent:6px; border:0 none; outline:0 none;}
.sun-editor .sun-editor-id-toolbar .layer_editor button {overflow: hidden; width:100%;}
.sun-editor .sun-editor-id-toolbar .layer_editor button:hover, .sun-editor .editor_tool .layer_editor button:focus {background-color:#f4b124; border-color:#ffebc1; outline:0 none;}
.sun-editor .sun-editor-id-toolbar .layer_editor .list_family {left:0; width:156px;}
.sun-editor .sun-editor-id-toolbar .layer_editor .list_family .default {border-bottom:1px solid #CCC;}
.sun-editor .sun-editor-id-toolbar .layer_editor .list_family_add {left:0; width:160px; border-top:1px solid #CCC;}
.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list {left:0; width:180px;}
.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .btn_edit {height:auto; padding:2px 10px 5px; line-height:100%;}
.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .txt_size18 {padding:1px 10px 6px}
.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .txt_size24 {padding:3px 10px 11px; line-height:24px;}
.sun-editor .sun-editor-id-toolbar .layer_editor .font_size_list .txt_size36 {padding:4px 10px 15px; line-height:36px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.layer_list {left:0; width:42px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.layer_line {left:0; width:158px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.write_place {overflow:hidden; float:left; position:relative; height:25px; border:1px solid #dadada;}
.sun-editor .sun-editor-id-toolbar .layer_editor.layer_color {left:0;}
.sun-editor .sun-editor-id-toolbar .layer_editor.pallet_bgcolor {width:196px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor {width:180px; height:126px; padding:10px 6px 0 10px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor li {float:left; position:relative; width:16px; height:16px; margin:0 4px 4px 0;}
.sun-editor .sun-editor-id-toolbar .layer_editor.more_palette {display:none; width:176px; margin:0 10px; padding:8px 0 6px; border-top:1px solid #f3f3f3;}
.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor button {display:block; overflow:hidden; width:16px; height:16px; border-radius:2px; vertical-align:top; text-indent:-9999px;}
.sun-editor .sun-editor-id-toolbar .layer_editor .list_color .bg_check {display:none; position:absolute; top:1px; left:1px; width:12px; height:12px; border:1px solid #fff; border-radius:1px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.list_bgcolor .bg_btnframe {display:none; position:absolute; top:0; left:0; width:14px; height:14px; border:1px solid #000; border-radius:2px; opacity:.2; filter:alpha(opacity=20);}
.sun-editor .sun-editor-id-toolbar .layer_editor.box_codeinp {float:left; height:28px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.more_palette .box_bgcolor {width:24px; margin-right:2px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.view_bgcolor {float:left; width:16px; height:16px; padding:3px; border:1px solid #d7d7d7;}
.sun-editor .sun-editor-id-toolbar .layer_editor.view_bgcolor .inner_bgcolor {width:16px; height:16px;}
.sun-editor .sun-editor-id-toolbar .layer_editor.inner_bgcolor {display:block; overflow:hidden; width:15px; height:15px; margin:0 auto; text-indent:-9999px;}

.sun-editor .sun-editor-id-toolbar .layer_color {display: none;}
.sun-editor .sun-editor-id-toolbar .layer_align {left:9px; width:98px;}

.sun-editor .sun-editor-id-toolbar .list_editor {overflow:hidden; width:100%; padding:6px 0;}
.sun-editor .sun-editor-id-toolbar .list_editor li:first-child {padding-top:0;}
.sun-editor .sun-editor-id-toolbar .list_editor li {padding-top:5px; width:100%;}
.sun-editor .sun-editor-id-toolbar .font_size_list li {padding:0px; width:100%;}

.sun-editor .sun-editor-id-toolbar .btn_editor {overflow:hidden; float:left; width:32px; height:32px; border:1px solid #ccc; margin-left:2px; border-radius:2px; font-size:12px; line-height:27px; background-color:#FFF;}
.sun-editor .sun-editor-id-toolbar .btn_editor.on {border-color:#f4b124; background-color:#ffebc1; -webkit-box-shadow: inset 0 3px 5px #f4b124; box-shadow: inset 0 3px 5px #f4b124;}
.sun-editor .sun-editor-id-toolbar .btn_editor:hover, .sun-editor .sun-editor-id-toolbar .btn_editor:focus {background-color: #ffebc1; border-color: #f4b124; outline: 0 none;}

.sun-editor .sun-editor-id-toolbar .btn_edit {width:100%; height:28px; padding:0 14px; margin-left:0; font-size:12px; line-height:22px; text-indent:0; text-decoration:none; text-align:left;}
.sun-editor .sun-editor-id-toolbar .btn_font {width:80px; text-align:left; text-indent:10px;}
.sun-editor .sun-editor-id-toolbar .btn_size {width:75px; text-align:left; text-indent:7px;}
.sun-editor .sun-editor-id-toolbar .btn_line {padding:0 5px 0 5px;}
.sun-editor .sun-editor-id-toolbar .layer_editor .list_color .btn_color.checked_color .bg_check {display:block;}
.sun-editor .sun-editor-id-toolbar .layer_editor .list_color .btn_color.checked_color {border:1px solid #000;}

.sun-editor .sun-editor-id-toolbar .ico_more {position:absolute; top:14px; right:10px; width:7px; height:7px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/br_down_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_bold {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_bold_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_underline {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_underline_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_italic {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_italic_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_strike {width:16px; height:16px; margin:0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/font_strokethrough_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_fcolor {width:16px; height:16px; margin:0 auto; margin-bottom: 5px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/pencil_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .color_font {overflow: hidden; position:absolute; top:24px; left:9px; width:19px; height:3px; text-indent:-9999px;}
.sun-editor .sun-editor-id-toolbar .ico_fcolor_w {width:16px; height:16px; margin:0 auto; margin-bottom: 5px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/fill_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_align_l {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_left_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_align_r {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_right_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_align_c {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_center_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_align_f {width:17px; height:17px; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/align_just_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_list {display: inline-block; width:17px; height:17px;}
.sun-editor .sun-editor-id-toolbar .ico_list_num {display:block; margin:0 auto;background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/list_num_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_list_square {background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/list_bullets_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_indnet {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/indent_increase_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_outdent {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/indent_decrease_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_indent {background-position:-220px -160px;}
.sun-editor .sun-editor-id-toolbar .ico_line {position:absolute; top:10px; left:9px; width:14px; height:13px; background-position:-190px 0;}
.sun-editor .sun-editor-id-toolbar .ico_table {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/3x3_grid_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_url {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/link_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_picture {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/picture_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_video {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/movie_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_full_screen_e {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/expand_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_full_screen_i {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/import_icon&48.png') no-repeat; background-size:100%;}
.sun-editor .sun-editor-id-toolbar .ico_html {width:17px; height:17px; margin: 0 auto; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/brackets_icon&48.png') no-repeat; background-size:100%;}

.sun-editor .sun-editor-id-toolbar .img_line1 {height:2px; background-position:0 -30px;}
.sun-editor .sun-editor-id-toolbar .img_line2 {height:3px; background-position:0 -35px;}
.sun-editor .sun-editor-id-toolbar .img_line3 {height:6px; background-position:0 -40px;}

.sun-editor .sun-editor-id-toolbar .editor_link {padding:8px 5px 12px 15px;}
.sun-editor .sun-editor-id-toolbar .editor_link .write_place {height:79px; border:0; overflow:hidden; float:left; position:relative;}
.sun-editor .sun-editor-id-toolbar .editor_link .write_place .lab_url {position:absolute;top:0;left:0;width:228px;height:23px;font-size:12px;line-height:24px;color:#999; cursor:text;}
.sun-editor .sun-editor-id-toolbar .editor_link .write_place .inp_txt {height:23px; font-size:12px; font-family:Verdana; line-height:24px; text-indent:0px; margin-top:8px; border:1px solid #CCC}
.sun-editor .sun-editor-id-toolbar .editor_link .btn_apply_url {float:right; width:35px; height:69px;}

.sun-editor .sun-editor-id-toolbar .layer_color .pallet_bgcolor {width:196px;}
.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor {width:100%; height:126px; padding:10px 6px 0 10px;}
.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor li {float:left; position:relative; width:16px; height:16px; margin:0 4px 4px 0;}
.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor button {display:block; overflow:hidden; width:16px; height:16px; border-radius:2px; vertical-align:top; text-indent:-9999px;}
.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor button.color_white {display:block; overflow:hidden; width:16px; height:16px; border:1px solid #d3d3d3; vertical-align:top; text-indent:-9999px;}
.sun-editor .sun-editor-id-toolbar .layer_color .list_bgcolor .bg_btnframe {display:none; position:absolute; top:0; left:0; width:14px; height:14px; border:1px solid #000; border-radius:2px; opacity:.2; filter:alpha(opacity=20);}

.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text {width:156px;}
.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .ex_txtbgcolor {position:relative; z-index:1; width:158px; height:25px; border-radius:2px; border-bottom:0 none; margin: -1px 0 0 -1px;}
.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .ex_txtbgcolor .emph_txtbgcolor {display:block; width:147px; height:25px; padding-left:11px; font-size:12px; line-height:24px; color:#fff; -webkit-transition-property:background-color,color; -webkit-transition-duration:.2s; transition-property:background-color,color; transition-duration:.2s;}
.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .ex_txtbgcolor .bg_frame {position:absolute; top:0; left:0; width:156px; height:24px; border:1px solid #000; border-bottom:0 none; opacity:.1; filter:alpha(opacity=10); -webkit-transition:opacity .2s; -webkit-transition:opacity .2s;}
.sun-editor .sun-editor-id-toolbar .layer_color .pallet_text .list_color {width:140px; height:44px; margin:8px 6px 0 10px; padding:0; border-top:0;}

/* ́—ë””í„° ́˜́—­ */
.sun-editor  .sun-editor-id-editorArea {width:100%;}
.sun-editor  .sun-editor-id-editorArea .input_editor {width:100%; height:100%; background-color:#FFF;}
.sun-editor  .sun-editor-id-editorArea .input_editor.html {/*padding:8px;*/ outline-style:none;}

/* 리́‚¬́´́¦ˆ ë°” */
.sun-editor .sun-editor-id-resizeBar {width:100%; height:10px; border-top:1px solid #dadada; background-color:#fafafa; cursor:ns-resize;}
.sun-editor .sun-editor-id-resize-background {position:absolute; display:none; top:0; left:0; width:100%; height:100%; z-index:10000;}

/* 다́´́–¼ë¡œê·¸ */
.sun-editor .sun-editor-id-dialogBox {position:absolute; display:none; top:0; left:0; width:100%; height:100%; z-index:9999;}
.sun-editor .sun-editor-id-dialogBox label, .sun-editor .sun-editor-id-dialogBox input, .sun-editor .sun-editor-id-dialogBox button {font-size:14px; line-height:1.5; color:#111; margin:0;}
.sun-editor .sun-editor-id-dialogBox .modal-dialog-background {position:absolute; width:100%; height:100%; top:0px; left:0px; background-color:#222; opacity:0.5; z-index:10;}

/* 다́´́–¼ë¡œê·¸ - modal */
.sun-editor .modal-dialog {position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:11;}
.sun-editor .modal-dialog .modal-content {position:relative; width:500px; margin:8px auto; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1px solid #999; border:1px solid rgba(0, 0, 0, .2); border-radius:6px; outline:0; -webkit-box-shadow:0 3px 9px rgba(0, 0, 0, .5); box-shadow:0 3px 9px rgba(0, 0, 0, .5); z-index:11;}
@media screen and (max-width: 509px) {.sun-editor .modal-dialog .modal-content {width:100%;} }
.sun-editor .modal-dialog .modal-header {padding:15px 15px 5px 15px; border-bottom:1px solid #e5e5e5;}
.sun-editor .modal-dialog button.close {-webkit-appearance:none; padding:0; cursor:pointer; background:transparent; border:0;}
.sun-editor .modal-dialog .close {float:right; font-size:21px; font-weight:bold; line-height:1; color:#000; text-shadow:0 1px 0 #fff; filter:alpha(opacity=100); opacity: 1;}
.sun-editor .modal-dialog .close:hover, .sun-editor .modal-dialog .close:focus {color:#f4b124 !important;}
.sun-editor .modal-dialog .modal-body {position:relative; padding:15px;}
.sun-editor .modal-dialog .form-group {margin-bottom:15px;}
.sun-editor .modal-dialog .form-size .size-text {width:100%;}
.sun-editor .modal-dialog .form-size .size-text .size-w {width:70px; text-align:center;}
.sun-editor .modal-dialog .form-size .size-text .size-h {width:70px; text-align:center;}
.sun-editor .modal-dialog .form-size .size-x {margin:0 8px 0 8px;}
.sun-editor .modal-dialog .form-size-control {display:inline-block; width:70px; height:34px; /*padding:6px 12px;*/ font-size:14px; line-height:1.42857143; color:#555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.sun-editor .modal-dialog .modal-content label {display:inline-block; max-width:100%; margin-bottom:5px; font-weight:bold;}
.sun-editor .modal-dialog .form-control {display:block; width:100%; height:34px; /*padding:6px 12px;*/ font-size:14px; line-height:1.42857143; color:#555; background-color:#fff; background-image:none; border:1px solid #ccc; border-radius:4px; -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075); -webkit-transition:border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; -o-transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition:border-color ease-in-out .15s, box-shadow ease-in-out .15s;}
.sun-editor .modal-dialog .modal-footer {padding:10px 15px 0px 15px; text-align:right; border-top:1px solid #e5e5e5;}
.sun-editor .modal-dialog .btn-primary {color:#fff; background-color:#f4b124; border-color:#f4b124;}
.sun-editor .modal-dialog .modal-content .btn {display:inline-block; padding:6px 12px; margin-bottom:0; font-size:14px; font-weight:normal; line-height:1.42857143; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; background-image:none; border:1px solid transparent; border-radius:4px;}
.sun-editor .modal-dialog .modal-content .btn:hover, .sun-editor .modal-dialog .modal-content .btn:focus {background-color: #f4a500;}
.sun-editor .modal-dialog .modal-content input:focus {border-color:#f4b124; outline:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(244, 177, 36, .6); box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(244, 177, 36, .6);}

/* 로딩 ë°•́Š¤ */
.sun-editor .sun-editor-id-loding {position:absolute; display:none; width:100%; height:100%; top:0px; left:0px; background-color:#191f26; background-image:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/loding.jpg'); background-repeat:no-repeat; background-position:center; background-size:auto auto; opacity:.7; filter:alpha(opacity=70); z-index:9999;}
.sun-editor .sun-editor-id-loding .ico-loding {display:none;}

/* í…Œ́´ë¸” ́„ 택 */
.sun-editor .table-content {position:absolute; top:34px; left:1px; z-index:11; padding:5px; float:left; padding:5px 0; margin:2px 0 0; font-size:14px; text-align:left; list-style:none; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1px solid #ccc; border:1px solid rgba(0, 0, 0, .15); border-radius:4px; -webkit-box-shadow:0 6px 12px rgba(0, 0, 0, .175); box-shadow:0 6px 12px rgba(0, 0, 0, .175);}
.sun-editor .table-data-form {font-size:18px; padding:0 5px;}
.sun-editor .table-picker {position:absolute!important; z-index:3; font-size:18px; width:10em; height:10em; cursor:pointer;}
.sun-editor .table-highlighted {position:absolute!important; z-index:2; font-size:18px; width:1em; height:1em; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/pixel_sun.png') repeat;}
.sun-editor .table-unhighlighted {position:relative!important; z-index:1; font-size:18px; width:5em; height:5em; background:url('https://www.cssscript.com/demo/minimal-wysiwyg-editor-pure-javascript-suneditor/suneditor/img/pixel_white.png') repeat;}
.sun-editor .table-display {padding-left:5px;}

/* ́´ë¯¸́§€ 크기 ́¡°́ ˆ */
.sun-editor .modal-image-resize {position:absolute; display:none; background-color:black; opacity:0.3; z-index:8;}
.sun-editor .modal-image-resize .image-resize-dot {position:absolute; width:7px; height:7px; border:1px solid black;}
.sun-editor .modal-image-resize .tl {top:-5px; left:-5px; border-right:0; border-bottom:0;}
.sun-editor .modal-image-resize .tr {top:-5px; right:-5px; border-bottom:0; border-left:none;}
.sun-editor .modal-image-resize .bl {bottom:-5px; left:-5px; border-top:0; border-right:0;}
.sun-editor .modal-image-resize .br-controller {right:-5px; bottom:-5px; background-color:#F00; cursor:se-resize;}
.sun-editor .modal-image-resize .image-size-display {position:absolute;	right:0; bottom:0; padding:5px; margin:5px; font-size:12px; color:white; background-color:black; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; -webkit-opacity:.7; -khtml-opacity:.7; -moz-opacity:.7; opacity:.7;}

/* ́´ë¯¸́§€ 크기 ́¡°́ ˆ 버튼 */
.sun-editor .image-resize-btn {position:absolute; display:none; top:0; left:0; margin-top:-50px !important; z-index:12; display:none; max-width:310px; padding:1px; font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:1.42857143; text-align:left; text-align:start; text-decoration:none; text-shadow:none; text-transform:none; letter-spacing:normal; word-break:normal; word-spacing:normal; word-wrap:normal; white-space:normal; background-color:#fff; -webkit-background-clip:padding-box; background-clip:padding-box; border:1px solid #ccc; border:1px solid rgba(0, 0, 0, .2); border-radius:6px; -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .2); box-shadow:0 5px 10px rgba(0, 0, 0, .2); line-break:auto;}
.sun-editor .image-resize-btn .btn-group {position:relative; display:inline-block; vertical-align:middle; padding:5px 5px 5px 0;}
.sun-editor .image-resize-btn .btn-group button {position:relative; float:left; border-top-right-radius:0; border-bottom-right-radius:0; margin:0 0 0 2px !important; padding:5px 10px !important; font-size:12px !important; line-height:1.5 !important; border:1px solid #222 !important; border-radius:3px !important; color:#333; background-color:#fff !important; border-color:#ccc !important; display:inline-block; font-size:14px !important; font-weight:normal; text-align:center; white-space:nowrap; vertical-align:middle; -ms-touch-action:manipulation; touch-action:manipulation; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
/*.sun-editor .image-resize-btn .btn-group.remove {width:40px; height:33px; padding:0 10px 0 0 !important;}*/
.sun-editor .image-resize-btn .btn-group.remove button {width:100%; height:100%;}
.sun-editor .image-resize-btn .btn-group.remove button .image_remove {font-weight:bold;}
.sun-editor .image-resize-btn button:hover, .sun-editor .image-resize-btn button:focus {background-color:#ffebc1 !important; border-color:#f4b124 !important; outline:0 none !important;}





Onderstaande de javascript code:

[code]
if(typeof window.SUNEDITOR=='undefined') window.SUNEDITOR = {};

/** default language english */
SUNEDITOR.defaultLang = {
toolbar : {
fontFamily : 'Font',
fontFamilyDelete : 'Remove Font Family',
formats : 'Formats',
bold : 'Bold',
underline : 'Underline',
italic : 'Italic',
strike : 'Strike',
fontColor : 'Font Color',
hiliteColor : 'Background Color',
indent : 'Indent',
outdent : 'Outdent',
align : 'Align',
alignLeft : 'Align left',
alignRight : 'Align right',
alignCenter : 'Align center',
justifyFull : 'Justify full',
left : 'Left',
right : 'Right',
center : 'Center',
bothSide : 'Justify full',
list : 'list',
orderList : 'Ordered list',
unorderList : 'Unordered list',
line : 'Line',
table : 'Table',
link : 'Link',
image : 'Picture',
video : 'Video',
fullScreen : 'Full Screen',
htmlEditor : 'Code View'
},
dialogBox : {
linkBox : {
title : 'Insert Link',
url : 'URL to link',
text : 'Text to display'
},
imageBox : {
title : 'Insert Image',
file : 'Select from files',
url : 'Image URL',
resize100 : 'resize 100%',
resize75 : 'resize 75%',
resize50 : 'resize 50%',
resize25 : 'resize 25%',
remove : 'remove image'
},
videoBox : {
title : 'Insert Video',
url : 'Media embed URL, YouTube',
width : 'Width',
height : 'Height'
},
submitButton : 'Submit'
}
};

/**
* wysiwyg web editor
*
* suneditor.js
* Copyright 2017 JiHong Lee.
* MIT license.
*/
(function(){
/**
* utile func
* @type {{returnTrue}}
*/
var func = (function(){
return {
returnTrue : function() {
return true;
}
};
})();

/**
* document func
* @type {{getArrayIndex, nextIdx, prevIdx, isCell, getListChildren, getParentNode, changeTxt, changeClass, addClass, removeClass, toggleClass}}
*/
var dom = (function(){
return {
getArrayIndex : function(array, element) {
var idx = -1;

for(var i=0; i<array.length; i++) {
if(array[i] === element) {
idx = i;
break;
}
}

return idx;
},

nextIdx : function(array, item) {
var idx = this.getArrayIndex(array, item);
if (idx === -1) return -1;

return idx + 1;
},

prevIdx : function(array, item) {
var idx = this.getArrayIndex(array, item);
if (idx === -1) return -1;

return idx - 1;
},

isCell : function(node) {
return node && /^TD$|^TH$/i.test(node.nodeName);
},

getListChildren : function(element, validation) {
var children = [];
validation = validation || func.returnTrue;

(function recursionFunc(current){
if (element !== current && validation(current)) {
children.push(current);
}
for (var i = 0, len = current.children.length; i < len; i++) {
recursionFunc(current.children[i]);
}
})(element);

return children;
},

getParentNode : function(element, tagName) {
var check = new RegExp("^"+tagName+"$", "i");

while(!check.test(element.tagName)) {
element = element.parentNode;
}

return element;
},

changeTxt : function(element, txt) {
element.textContent = txt;
},

changeClass : function(element, className) {
element.className = className;
},

addClass : function(element, className) {
if(!element) return;

var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
if(check.test(element.className)) return;

element.className += " " + className;
},

removeClass : function(element, className) {
if(!element) return;

var check = new RegExp("(\\s|^)" + className + "(\\s|$)");
element.className = element.className.replace(check, " ").trim();
},

toggleClass : function(element, className) {
var check = new RegExp("(\\s|^)" + className + "(\\s|$)");

if (check.test(element.className)) {
element.className = element.className.replace(check, " ").trim();
}
else {
element.className += " " + className;
}
}
};
})();

/**
* SunEditor
* @param context
*/
var core = function(context){
/** ë°°́—´ ê´€ë ¨ */
var list = (function(){
var commandMap = {
'FONT': context.tool.fontFamily,
'B' : context.tool.bold,
'U' : context.tool.underline,
'I' : context.tool.italic,
'STRIKE' : context.tool.strike
};

/** 글꼴 목록 ê°€́ ¸́˜¤ê¸° */
var fontFamilyMap = {};
var list_fontFamily = context.tool.list_fontFamily.children;

list_fontFamily[0].firstChild.getAttribute("data-value");
for(var i=0; i<list_fontFamily.length; i++) {
fontFamilyMap[list_fontFamily[i].firstChild.getAttribute("data-value").replace(/\s*/g,"")] = list_fontFamily[i].firstChild.getAttribute("data-txt");
}

if(context.tool.list_fontFamily_add) {
list_fontFamily = context.tool.list_fontFamily_add.children;
for(var i=0; i<list_fontFamily.length; i++) {
fontFamilyMap[list_fontFamily[i].firstChild.getAttribute("data-value").replace(/\s*/g,"")] = list_fontFamily[i].firstChild.getAttribute("data-txt");
}
}

list_fontFamily = null;

return {
commandMap : commandMap,
fontFamilyMap : fontFamilyMap
}
})();

/** selection ê´€ë ¨ */
var wysiwygSelection = (function(){
return {
focus : function(){
context.element.wysiwygWindow.document.body.focus();
},

isEdgePoint : function(container, offset) {
return (offset === 0) || (offset === container.nodeValue.length);
},

createRange : function() {
return context.element.wysiwygWindow.document.createRange();
},

getSelection : function() {
return context.element.wysiwygWindow.getSelection();
},

getPElementInFocusNode : function() {
var parentElement = context.argument._selectionNode;
while(!/^P$/i.test(parentElement.tagName) && !/^BODY$/i.test(parentElement.tagName)) {
parentElement = parentElement.parentNode;
}

return parentElement;
}
}
})();

/** ́—ë””í„° */
var editor = (function(){
return {
subMenu : null,
originSub : null,
modalForm : null,
tabSize : 4,

pure_execCommand : function(command, showDefaultUI, value) {
context.element.wysiwygWindow.document.execCommand(command, showDefaultUI, value);
},

cancel_table_picker : function() {
context.tool.tableHighlight.style.width = "1em";
context.tool.tableHighlight.style.height = "1em";
context.tool.tableUnHighlight.style.width = "5em";
context.tool.tableUnHighlight.style.height = "5em";
dom.changeTxt(context.tool.tableDisplay, "1 x 1");
},

subOff : function() {
if(this.subMenu) {
this.subMenu.style.display = "none";
this.subMenu = null;
this.cancel_table_picker();
}
if(this.modalForm) {
this.modalForm.style.display = "none";
context.dialog.back.style.display = "none";
context.dialog.modalArea.style.display = "none";
}
if(context.argument._imageElement) {
event.cancel_resize_image();
}

return;
},

toggleFrame : function(){
if(!context.argument._wysiwygActive) {
var ec = {"&amp;":"&","&nbsp;":"\u00A0","&quot;":"\"","&lt;":"<","&gt;":">"};
var source_html = context.element.source.value.replace(/&[a-z]+;/g, function(m){ return (typeof ec[m] === "string")?ec[m]:m; });
context.element.wysiwygWindow.document.body.innerHTML = source_html.trim().length > 0? source_html: "<p>&#65279</p>";
context.element.wysiwygWindow.document.body.scrollTop = 0;
context.element.source.style.display = "none";
context.element.wysiwygElement.style.display = "block";
context.argument._wysiwygActive = true;
}
else {
context.element.source.value = context.element.wysiwygWindow.document.body.innerHTML.trim();
context.element.wysiwygElement.style.display = "none";
context.element.source.style.display = "block";
context.argument._wysiwygActive = false;
}
},

toggleFullScreen : function(element){
if(!context.argument._isFullScreen) {
context.element.topArea.style.position = "fixed";
context.element.topArea.style.top = "0";
context.element.topArea.style.left = "0";
context.element.topArea.style.width = "100%";
context.element.topArea.style.height = "100%";

context.argument._innerHeight_fullScreen = (window.innerHeight - context.tool.bar.offsetHeight);
context.element.editorArea.style.height = context.argument._innerHeight_fullScreen + "px";

dom.removeClass(element.firstElementChild, 'ico_full_screen_e');
dom.addClass(element.firstElementChild, 'ico_full_screen_i');
}
else {
context.element.topArea.style.cssText = context.argument._originCssText;
context.element.editorArea.style.height = context.argument._innerHeight + "px";

dom.removeClass(element.firstElementChild, 'ico_full_screen_i');
dom.addClass(element.firstElementChild, 'ico_full_screen_e');
}

context.argument._isFullScreen = !context.argument._isFullScreen;
},

appendHr : function(value) {
var borderStyle = "";
switch(value) {
case 'hr1':
borderStyle = "black 1px solid";
break;
case 'hr2':
borderStyle = "black 1px dotted";
break;
case 'hr3':
borderStyle = "black 1px dashed";
break;
}

var oHr = document.createElement("HR");
oHr.style.border = "black 0px none";
oHr.style.borderTop = borderStyle;
oHr.style.height = "1px";
context.argument._selectionNode.parentNode.appendChild(oHr);

editor.appendP(oHr);
},

appendTable : function(x, y) {
var oTable = document.createElement("TABLE");

var tableHTML = '<tbody>';
while(y>0) {
tableHTML += '<tr>';
var tdCnt = x;
while(tdCnt>0) {
tableHTML += '<td><p>&#65279</p></td>';
--tdCnt;
}
tableHTML += '</tr>';
--y;
}
tableHTML += '</tbody>';

oTable.innerHTML = tableHTML;

editor.insertNode(oTable);
editor.appendP(oTable);
},

appendP : function(element) {
var oP = document.createElement("P");
oP.innerHTML = '&#65279';
element.parentNode.insertBefore(oP, element.nextElementSibling);
},

openDialog : function(kind) {
var focusText = null;

switch(kind) {
case 'link':
this.modalForm = context.dialog.link;
focusText = context.dialog.linkText;
break;
case 'image':
this.modalForm = context.dialog.image;
focusText = context.dialog.imgInputUrl;
break;
case 'video':
this.modalForm = context.dialog.video;
focusText = context.dialog.videoInputUrl;
break;
}

context.dialog.modalArea.style.display = "block";
context.dialog.back.style.display = "block";
context.dialog.modal.style.display = "block";
this.modalForm.style.display = "block";

this.subMenu = context.dialog.modal;

focusText.focus();
},

showLoding : function() {
context.element.loding.style.display = "block";
},

closeLoding : function() {
context.element.loding.style.display = "none";
},

insertNode : function(oNode) {
var selection = wysiwygSelection.getSelection();
var nativeRng = null;

if(selection.rangeCount > 0) {
nativeRng = selection.getRangeAt(0);
} else {
selection = context.argument._copySelection;

nativeRng = wysiwygSelection.createRange();
nativeRng.setStart(selection.focusNode, selection.anchorOffset);
nativeRng.setEnd(selection.focusNode, selection.focusOffset);
}

var startCon = nativeRng.startContainer;
var startOff = nativeRng.startOffset;
var endCon = nativeRng.endContainer;
var endOff = nativeRng.endOffset;

var pNode = startCon;
if(/^#text$/i.test(startCon.nodeName)) {
pNode = startCon.parentNode;
}

/** ë²”́œ„́„ 택 ́—†́„ë•Œ */
if(startCon === endCon && startOff === endOff) {
if(/^#text$/i.test(selection.focusNode.nodeName)) {
var rightNode = selection.focusNode.splitText(endOff);
pNode.insertBefore(oNode, rightNode);
}
else {
if(/^BR$/i.test(pNode.lastChild.nodeName)) {
pNode.removeChild(pNode.lastChild);
}
pNode.appendChild(oNode);
}
}
/** ë²”́œ„́„ 택 í–ˆ́„ë•Œ */
else {
var removeNode = startCon;
var rightNode = null;
var isSameContainer = startCon === endCon;

if(isSameContainer) {
if(!wysiwygSelection.isEdgePoint(endCon, endOff)) {
rightNode = endCon.splitText(endOff);
}

if(!wysiwygSelection.isEdgePoint(startCon, startOff)) {
removeNode = startCon.splitText(startOff);
}

pNode.removeChild(removeNode);
}
else {
var nodes = [];
var container = startCon;
while(container.nodeType == 3 && !(endCon == container)) {
nodes.push(container);
container = container.nextSibling;
}

nodes.push(container);

for(var i=0; i<nodes.length; i++) {
pNode.removeChild(nodes[i]);
}
}

pNode.insertBefore(oNode, rightNode);
}
}
};
})();

/** ́´ë²¤íŠ¸ */
var event = (function(){
var resize_window = function() {
// if(context.tool.barHeight == context.tool.bar.offsetHeight) return;

if(context.argument._isFullScreen) {
context.argument._innerHeight_fullScreen += ((context.tool.barHeight - context.tool.bar.offsetHeight) + (this.innerHeight - context.argument._windowHeight));
context.element.editorArea.style.height = context.argument._innerHeight_fullScreen + "px";
}

context.tool.barHeight = context.tool.bar.offsetHeight;
context.argument._windowHeight = this.innerHeight;
};

var onClick_toolbar = function(e) {
var targetElement = e.target;
var display = targetElement.getAttribute("data-display");
var command = targetElement.getAttribute("data-command");
var className = targetElement.className;

e.preventDefault();
e.stopPropagation();

wysiwygSelection.focus();

while(!command && !display && !/layer_color|layer_url|editor_tool/.test(className) && !/^BODY$/i.test(targetElement.tagName)){
targetElement = targetElement.parentNode;
command = targetElement.getAttribute("data-command");
display = targetElement.getAttribute("data-display");
className = targetElement.className;
}

var value = targetElement.getAttribute("data-value");
var txt = targetElement.getAttribute("data-txt");

/** ́„œë¸Œë©”뉴 ë³´́´ê¸° */
if(display || /^BODY$/i.test(targetElement.tagName)) {
var nextSibling = editor.subMenu;
editor.subOff();

if(targetElement.nextElementSibling != null && targetElement.nextElementSibling != nextSibling){
editor.subMenu = targetElement.nextElementSibling;
editor.subMenu.style.display = "block";
editor.originSub = editor.subMenu.previousElementSibling;
}
else if(/modal/.test(display)) {
editor.openDialog(command);
}

nextSibling = null;

return;
}

if(/layer_color/.test(className) && /^BUTTON$/i.test(e.target.tagName)) {
value = e.target.textContent;
}

/** ́»¤ë©˜ë“œ ëª…ë ¹́–´ ́‹¤í–‰ */
if(command) {
if(/fontName/.test(command)) {
dom.changeTxt(editor.originSub.firstElementChild, txt);
editor.pure_execCommand(command, false, value);
}
else if(/format/.test(command)) {
editor.pure_execCommand("formatBlock", false, value);
}
else if(/justifyleft|justifyright|justifycenter|justifyfull/.test(command)) {
dom.changeTxt(editor.originSub.firstElementChild, targetElement.title.split(" ")[0]);
// dom.changeClass(editor.originSub.firstElementChild, targetElement.firstElementChild.className);
editor.pure_execCommand(command, false);
}
else if(/foreColor|hiliteColor/.test(command)) {
editor.pure_execCommand(command, false, value);
}
else if(/horizontalRules/.test(command)) {
editor.appendHr(value);
}
else if(/sorceFrame/.test(command)) {
editor.toggleFrame();
dom.toggleClass(targetElement, 'on');
}
else if(/fullScreen/.test(command)) {
editor.toggleFullScreen(targetElement);
dom.toggleClass(targetElement, "on");
}
else if(/indent|outdent/.test(command)) {
editor.pure_execCommand(command, false);
}
else if(/insertTable/.test(command)) {
editor.appendTable(context.argument._tableXY[0], context.argument._tableXY[1]);
}
else {
editor.pure_execCommand(command, false, value);
dom.toggleClass(targetElement, "on");
}

editor.subOff();
}

};

var onMouseDown_wysiwyg = function(e) {
var targetElement = e.target;

editor.subOff();

if(/^IMG$/i.test(targetElement.nodeName)) {
/** ie,firefox image resize handle : false*/
targetElement.setAttribute('unselectable', 'on');
targetElement.contentEditable = false;

var resizeDiv = context.element.imageResizeDiv;
var w = targetElement.offsetWidth;
var h = targetElement.offsetHeight;

var parentElement = targetElement.offsetParent;
var parentT = 1;
var parentL = 1;
while(parentElement) {
parentT += (parentElement.offsetTop + parentElement.clientTop);
parentL += (parentElement.offsetLeft + + parentElement.clientLeft);
parentElement = parentElement.offsetParent;
}
context.argument._imageResize_parent_t = (context.tool.bar.offsetHeight + parentT);
context._imageResize_parent_l = parentL;

var t = (targetElement.offsetTop + context.argument._imageResize_parent_t - context.element.wysiwygWindow.document.body.scrollTop);
var l = (targetElement.offsetLeft + parentL);

resizeDiv.style.top = t + "px";
resizeDiv.style.left = l + "px";
resizeDiv.style.width = w + "px";
resizeDiv.style.height = h + "px";

context.element.imageResizeBtn.style.top = (h + t) + "px";
context.element.imageResizeBtn.style.left = l + "px";

dom.changeTxt(context.element.imageResizeDisplay, w + " x " + h);

context.argument._imageElement = targetElement;
context.argument._imageElement_w = w;
context.argument._imageElement_h = h;
context.argument._imageElement_t = t;
context.argument._imageElement_l = l;

context.element.imageResizeDiv.style.display = "block";
context.element.imageResizeBtn.style.display = "block";
}
else if(/^HTML$/i.test(targetElement.nodeName)){
wysiwygSelection.focus();
}
};

/** selection 객́²´ ë³µ́‚¬́š©(IE...) */
function copyObj(obj) {
var copy = {};
for (var attr in obj) {
copy[attr] = obj[attr];
}
return copy;
}

var onSelectionChange_wysiwyg = function() {
context.argument._copySelection = copyObj(wysiwygSelection.getSelection());
context.argument._selectionNode = wysiwygSelection.getSelection().anchorNode;

var selectionParent = context.argument._selectionNode;
var selectionNodeStr = "";
var fontFamily = context.tool.default_fontFamily;
while(!/^P$|^BODY$|^HTML$/i.test(selectionParent.nodeName)) {
selectionNodeStr += selectionParent.nodeName + "|";
if(/^FONT$/i.test(selectionParent.nodeName) && selectionParent.face.length > 0) {
var selectFont = list.fontFamilyMap[selectionParent.face.replace(/\s*/g,"")];
fontFamily = (selectFont? selectFont: fontFamily);
break;
}
selectionParent = selectionParent.parentNode;
}

if(/^SPAN$/i.test(selectionParent.nodeName)) {
for(var i=0; i<selectionParent.children.length; i++) {
selectionNodeStr += selectionParent.children[i].tagName;
}
}


/** add */
var onNode = selectionNodeStr.split("|");
var map = "B|U|I|STRIKE|FONT|";
for(var i=0; i<onNode.length - 1; i++) {
var nodeName = (/^STRONG$/.test(onNode[i])? 'B': (/^EM/.test(onNode[i])? 'I': onNode[i]));
if(/^FONT$/i.test(nodeName)) {
dom.changeTxt(list.commandMap[nodeName], fontFamily);
}
else {
dom.addClass(list.commandMap[nodeName], "on");
}
map = map.replace(nodeName+"|", "");
}

/** remove */
map = map.split("|");
for(var i=0; i<map.length - 1; i++) {
if(/^FONT$/i.test(map[i])) {
dom.changeTxt(list.commandMap[map[i]], fontFamily);
}
else {
dom.removeClass(list.commandMap[map[i]], "on");
}
}
};

var onKeyDown_wysiwyg = function(e) {
var target = e.target;
var keyCode = e.keyCode;
var shift = e.shiftKey;
var ctrl = e.ctrlKey;
var alt = e.altKey;


switch(keyCode) {
case 8: /**backspace key*/
if(target.childElementCount === 1 && target.children[0].innerHTML === "<br>") {
e.preventDefault();
e.stopPropagation();
return false;
}
break;
case 9: /**tab key*/
e.preventDefault();
e.stopPropagation();

if(ctrl || alt) break;

var currentNode = wysiwygSelection.getPElementInFocusNode().parentNode;

if(currentNode && /^TD$/i.test(currentNode.tagName)) {
var table = dom.getParentNode(currentNode, "table");
var cells = dom.getListChildren(table, dom.isCell);
var idx = shift? dom.prevIdx(cells, currentNode): dom.nextIdx(cells, currentNode);

if(idx === cells.length && !shift) idx = 0;
if(idx === -1 && shift) idx = cells.length - 1;

var moveCell = cells[idx];
if(!moveCell) return false;

var range = wysiwygSelection.createRange();
range.setStart(moveCell, 0);
range.setEnd(moveCell, 0);

var selection = wysiwygSelection.getSelection();
if (selection.rangeCount > 0) {
selection.removeAllRanges();
}
selection.addRange(range);

break;
}

/** P 노드́¼ë•Œ */
if(shift) break;

var tabText = context.element.wysiwygWindow.document.createTextNode(new Array(editor.tabSize + 1).join("\u00A0"));
editor.insertNode(tabText);

var selection = wysiwygSelection.getSelection();
var rng = wysiwygSelection.createRange();

rng.setStart(tabText, editor.tabSize);
rng.setEnd(tabText, editor.tabSize);

if (selection.rangeCount > 0) {
selection.removeAllRanges();
}

selection.addRange(rng);

break;
}
};

var onScroll_wysiwyg = function() {
if(context.argument._imageElement) {
var t = (context.argument._imageElement.offsetTop + context.argument._imageResize_parent_t - context.element.wysiwygWindow.scrollY);

context.element.imageResizeDiv.style.top = t + "px"
context.element.imageResizeBtn.style.top = (t + context.argument._imageElement_h) + "px";
}
};

var onClick_dialog = function(e) {
if(/modal-dialog/.test(e.target.className) || /close/.test(e.target.getAttribute("data-command"))) {
editor.subOff();
}
};

var onChange_imgInput = function() {
try {
if (this.files && this.files[0]) {
editor.showLoding();
editor.subOff();

var reader = new FileReader();

reader.onload = function () {
try {
context.argument._imageFileSrc = reader.result;

var oImg = document.createElement("IMG");
oImg.src = context.dialog.imgInputUrl.value.trim().length > 0 ? context.dialog.imgInputUrl.value : context.argument._imageFileSrc;
oImg.style.width = context.user.imageSize;
// wysiwygSelection.getPElementInFocusNode().appendChild(oImg);
editor.insertNode(oImg);
// editor.appendP(oImg);

context.argument._imageFileSrc = null;
context.dialog.imgInputFile.value = "";
context.dialog.imgInputUrl.value = "";
} finally {
editor.closeLoding();
}
};

reader.readAsDataURL(this.files[0]);
}
} catch(e) {
editor.closeLoding();
}
};

var onClick_imageResizeBtn = function(e) {
var command = e.target.getAttribute("data-command") || e.target.parentNode.getAttribute("data-command");

if(!command) return;

if(/^\d+$/.test(command)) {
context.argument._imageElement.style.height = "";
context.argument._imageElement.style.width = command + "%";
}
else if(/remove/.test(command)){
context.argument._imageElement.remove();
}

editor.subOff();
wysiwygSelection.focus();

e.preventDefault();
e.stopPropagation();
};

var onMouseDown_image_ctrl = function(e) {
e.preventDefault();
e.stopPropagation();

context.element.resizeBackground.style.display = "block";
context.element.imageResizeBtn.style = "none";

document.addEventListener('mousemove', resize_image);
document.addEventListener('mouseup', function(){
document.removeEventListener('mousemove', resize_image);
cancel_resize_image();
});
};

var resize_image = function(e) {
var w = (e.clientX - context.argument._imageElement_l - context.element.topArea.offsetLeft);
var h = ((context.argument._imageElement_h/context.argument._imageElement_w) * w);

context.argument._imageElement.style.width = w + "px";
context.argument._imageElement.style.height = h + "px";

var parentElement = context.argument._imageElement.offsetParent;
var parentL = 1;
while(parentElement) {
parentL += (parentElement.offsetLeft + + parentElement.clientLeft);
parentElement = parentElement.offsetParent;
}

var l = (context.argument._imageElement.offsetLeft + parentL);

context.element.imageResizeDiv.style.left = l + "px";
context.element.imageResizeDiv.style.width = w + "px";
context.element.imageResizeDiv.style.height = h + "px";

dom.changeTxt(context.element.imageResizeDisplay, Math.round(w) + " x " + Math.round(h));
};

var cancel_resize_image = function() {
- Ariën -
14-02-2022 19:11 gewijzigd op 14-02-2022 19:12
Ik had het idee dat je zelf PHP-scripts wou toevoegen via een editor. Blijkbaar is dat dus niet zo.
Dan heb ik je verkeerd begrepen.

Verder moet je inderdaad via PHP de afhandeling regelen.
Ik raad aan om eerst eens te kijken of je die in je $_POST kan opvangen. Je hebt al een textarea, dus je kan eenvoudig zien of de data verstuurd wordt via een POST-request:


<?php
if($_SERVER['REQUEST_METHOD'] == "POST") {
	echo "<pre>".print_r($_POST,true)."</pre>";
}
?>


P Paul Weiss
14-02-2022 19:30
hoi arien. is mijn fout. ik was niet helemaal duidelijk. ivo had al een idee om gebruik te maken van een form en deze dan in een php bestand op te vangen. Dat had ik ook al geprobeerd. Maar werkt niet. alleen het originele gedeelte binnen <textare> wordt dan getoond en ook alleen de tekst en niet de code. zie script hieronder. nu heb ik wel jou php stukje geplaatst en wel: echo "<pre>".print_r($_POST,true)."</pre>";
Maar ook dan krijg ik niet de gewenste output! ik krijg dan dit te zien

"
Array
(
[editor] => Hello World!
)
"


<form name="frm" action="posten.php" method="post">
<textarea id="editor" name="editor" style="width:100%; height:400px;">Hello World!</textarea>
<button type="submit">Opslaan</button>
 </form>



<?php
$content = filter_input(INPUT_POST, 'editor');
if($content) {
    $mysqlconn = new mysqli();
    
    $query = "INSERT INTO jouwtabel (kolomnaam) VALUES (?)";

    /* create a prepared statement */
    $stmt = $mysqli->prepare($query);
    /* bind parameters for markers */
    $stmt->bind_param("s", $content);

    /* execute query */
    $stmt->execute();

}
?>
- Ariën -
14-02-2022 19:31 gewijzigd op 14-02-2022 19:32
Ik zie in de print_r output gewoon "Hello World" staan.
Wat verwacht jij dan?
P Paul Weiss
14-02-2022 19:32 gewijzigd op 14-02-2022 19:34
dus i.p.v.$content = filter_input(INPUT_POST, 'editor'); heb ik even dus als test jouw stukje geplaats:
dus:echo "<pre>".print_r($_POST,true)."</pre>";

[size=xsmall]Toevoeging op 14/02/2022 19:33:44:[/size]

ja klopt, maar dat is het originele stukje tekst dat zich als voorbeeld al in het html bestand bevond. Als ik dat weghaal en andere content plaatst verschijnt toch weer "hello world". Bovendien wil ik ook de hele opmaak hebben.

[size=xsmall]Toevoeging op 14/02/2022 19:37:30:[/size]

hier de juiste link naar codepen:

https://codepen.io/rajshahi/pen/bGGvKNp






[size=xsmall]Toevoeging op 14/02/2022 19:39:40:[/size]

ik wil dus de gehele output inclusief opmaak opvangen via post. dat kan ik dan in een database plaatsen en later weer binnenhalen en via echo $variable tussen de <textarea>. </textarea> plaatsen.
Ivo P
14-02-2022 21:39
vermoedelijk voegt die berg javascript extra html-elementen toe waarin de content daadwerkelijk staat.

Waar zegt de documentatie van die editor daarover?
Lijkt me dat meer mensen daarna iets met de content willen doen.

[size=xsmall]Toevoeging op 14/02/2022 22:04:48:[/size]

ah, ik dacht dit is een variant op tinymce of zo, maar je hebt hier de editor van een site gebruikt.
Een site die eigenlijk draait om deze editor.

Dat zal niet heel erg gedocumenteerd zijn...
P Paul Weiss
14-02-2022 22:30
nee zit geen documentatie bij inderdaad. vind het gewoon een uitgebreide editor zonder dat daarbij gebruik gemaakt wordt van externe scripts en styling. ben al door de javascript aan het spitten waar de content geplaatst wordr. Maar ik heb nog niest gevonden. Javascript is niet echt mijn ding.
- Ariën -
14-02-2022 22:49 gewijzigd op 14-02-2022 22:51
Waarom gebruik je geen bekende editor zoals Ckeditor of TinyMCE? Die heeft een hoop documentatie en is makkelijk te customizen en out-of-the-box krijg je de invoer aangeleverd zoals jij wilt.

Reageren

Inloggen om te reageren