Add 'textarea' editor skin for simple replacement

This commit is contained in:
Kijin Sung 2017-06-27 15:20:09 +09:00
parent e91c2114ab
commit 9f652e422f
4 changed files with 76 additions and 0 deletions

View file

@ -0,0 +1,19 @@
.rx_editor_wrapper {
clear: both;
}
.rx_editor_wrapper .rx_editor_textarea {
width: 100%;
min-height: 64px;
box-sizing: border-box;
border: 1px solid #b1b1b1;
background: #fff;
padding: 8px 10px;
resize: vertical;
}
.rx_editor_wrapper .rx_editor_textarea.dark {
border-color: #111;
background: #333;
}

View file

@ -0,0 +1,35 @@
<load target="css/textarea.css" />
<div id="textarea_wrapper_{$editor_sequence}" class="rx_editor_wrapper">
<textarea id="textarea_instance_{$editor_sequence}" class="rx_editor_textarea {$colorset}" data-editor-sequence="{$editor_sequence}" data-editor-primary-key-name="{$editor_primary_key_name}" data-editor-content-key-name="{$editor_content_key_name}"></textarea>
<script>
$(function(){
"use strict";
// Set editor styles
var textarea = $("#textarea_instance_{$editor_sequence}");
textarea.css("font-family", {json_encode($content_font ?: null)});
textarea.css("font-size", {json_encode($content_font_size)});
textarea.css("line-height", {json_encode($content_line_height)});
if ({json_encode($content_word_break)} === 'none') {
textarea.css("white-space", "nowrap");
} else {
textarea.css("word-break", {json_encode($content_word_break ?: 'normal')});
textarea.css("word-wrap", "break-word");
}
// Load existing content
var content_key = textarea.data("editor-content-key-name");
var content_input = textarea.parents("form").find("input[name='" + content_key + "']");
if (content_input.size()) {
textarea.val(String(content_input.val()).stripTags().unescape());
}
// Save edited content
textarea.on("change", function() {
content_input.val("<p>" + String($(this).val()).escape().replace(/\r?\n/, "</p>\n<p>") + "</p>");
});
});
</script>
</div>

View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<skin version="0.1">
<title xml:lang="ko">Textarea</title>
<description xml:lang="ko">Textarea</description>
<version>1.0.0</version>
<date>2017-06-27</date>
<colorset>
<color name="light">
<title xml:lang="ko">Light</title>
</color>
<color name="dark">
<title xml:lang="ko">Dark</title>
</color>
</colorset>
</skin>