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.646 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 14:30 gewijzigd op 14-02-2022 14:31
Ik heb geen zin om ruim 800 regels door te spitten, maar PHP werkt slecht met editors. Gezien je het van CodePen vandaan haalt, kan je net zo goed daarheen linken :-P


Vaak wordt een < omgezet naar &lt; en dan zie je dus je rauwe PHP-code.

De beste oplossing die bijna altijd wordt gebruikt is het aanmaken van eigen variabelen. Tussen blokhaken bijvoorbeeld: [username] die via een simpele str_replace() vervangen wordt door de gebruikersnaam. Maar PHP gebruiken in een editor: dat is vragen om problemen. Die zijn juist gebouwd voor content, niet voor programmeren.
P Paul Weiss
14-02-2022 14:33
is inderdaad meer code dan ik had gedacht ja. had inderdaad beter kunnen linken naar codepen. Niet aan gedacht inderdaad. Maar bedankt voor je tip. zal er eens naar kijken.
Ivo P
14-02-2022 16:27
je wilt de inhoud van de textarea dus in je database hebben.
Ik denk dat het eenvoudigste gaat door het form te submitten.
Daarvoor moet je je form-tag uitbreiden en een submitknopt toevoegen. En de textarea moet een name hebben.


<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - editor</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>

<div class="content">
<h1>Suneditor Demo</h1>
<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>
</div>
<!-- partial -->
  <script  src="./script.js"></script>
</body>
</html>


in posten.php komt dan iets als

<?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();

}
?>
P Paul Weiss
14-02-2022 17:27 gewijzigd op 14-02-2022 17:27
Bedankt voor je reactie. deze oplossing had ik ook al aan gedacht. echter de content die ik dan heb geplaatst inclusief opmaak wordt dan niet meegenomen. alleen de tekst die er al in staat.
Ik moet op 1 of andere manier de content uit het javascript opvangen en doorsturen naar php. Maar is toch veel lastiger dan ik dacht.

[size=xsmall]Toevoeging op 14/02/2022 17:29:31:[/size]

kan ook werken met conteneditable div natuurlijk, maar dan zou ik niet weten hoe ik deze moet doorsturen naar php.

[size=xsmall]Toevoeging op 14/02/2022 17:30:25:[/size]

Ik kwam bij deze editor uit, omdat deze zo compleet is.
- Ariën -
14-02-2022 18:45 gewijzigd op 14-02-2022 18:49
Met welke reden wil je PHP gaan verwerken in een (uit de kluiten gewassen) textarea?
De kans op fouten is aannemelijk, en de kans dat je die op dezelfde manier recht kan zetten is misschien ook aannemelijk. En ook misbruik is erg eenvoudig.

Gaat het om het wijzigen van een configuratie?
In dat geval kan je een aantal vaste velden maken waarmee je een compleet nieuw configuratiebestand wegschrijft.

Contenteditable kan je ook gebruiken. Met behulp van AJAX achter een submit-knop kan je de data versturen via POST.
P Paul Weiss
14-02-2022 18:49
php wil ik gebruiken om de output in een database te schrijven.
Hierbij even de link naar codepen. Via de button "get content" krijg je de code te zien. Deze moet toch op te vangen zijn in een php variable. Wat zou er dan mis kunnen gaan?

hier nog even de link naar codepen. daar kun je deze even testen. https://codepen.io/Bhavin36/pen/eebaQB
- Ariën -
14-02-2022 18:52 gewijzigd op 14-02-2022 18:53
Als iemand weet dat ze via je eigen admin-panel PHP kunnen uitvoeren hebben ze alle macht over je site.
Ik vind het persoonlijk riskant om op eenvoudige wijze je source open te leggen.

Verder heb je bij programmeren in een eigen editor ook weinig aan eventuele opmaak-knopjes. Dat kan alleen maar fout gaan.
P Paul Weiss
14-02-2022 18:53
het is ook alleen voor mijzelf bedoeld eigenlijk. Maar op welke manier kun je dan een blog schrijven. toch via contenteditable?
- Ariën -
14-02-2022 18:54 gewijzigd op 14-02-2022 18:55
Als je een blog wilt schrijven, dan hoef je toch geen PHP-scripts in te voeren?
De data verwerk je immers gewoon via POST naar je database of waar je het anders maar opslaat.
P Paul Weiss
14-02-2022 18:55
Ik kwam deze editor o.a. tegen die van alles heeft te bieden. Zelf heb ik niet de kennis om dit te maken. welke manier is dan wel "veilig".

[size=xsmall]Toevoeging op 14/02/2022 18:55:53:[/size]

heb toch een php bestand nodig om dat weg te schrijven naar de database.

[size=xsmall]Toevoeging op 14/02/2022 18:56:52:[/size]

ik bedoel ook niet echt een php script, maar wil de data gewoon via post opvangen inderdaad. Dat wil ik ook graag met deze editor zien te bereiken.

[size=xsmall]Toevoeging op 14/02/2022 19:00:16:[/size]

Ik was niet helemaal duidelijk zie ik.

[size=xsmall]Toevoeging op 14/02/2022 19:10:56:[/size]

Ik zie trouwens dat ik de verkeerde link heb gestuurd van codepen.

Reageren

Inloggen om te reageren