서식 있는 텍스트 데이터는 익명 객체이며, JSON 스키마를 따라야 합니다.
다음 코드를 사용하여 지정된 시트 영역에서 지정된 셀의 값을 설정할 수 있습니다.
다음 코드를 사용하여 지정된 시트 영역의 지정된 셀에서 서식 없는 데이터를 가져올 수 있습니다.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1});
initSpread(spread);
setOption(spread);
};
function initSpread(spread) {
var lawOfUniversalGravitation = {
richText: [
{
style: {
font: "normal 24px Calibri"
},
text: "F = (G * M"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "1"
},
{
style: {
font: "normal 24px Calibri"
},
text: " * M"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "2"
},
{
style: {
font: "normal 24px Calibri"
},
text: ") / R"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 1
},
text: "2"
}
]
};
var reaction = {
richText: [
{
style: {
font: "normal 24px Calibri"
},
text: "3 Ba(OH)"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "2"
},
{
style: {
font: "normal 24px Calibri"
},
text: " + 2 H"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "3"
},
{
style: {
font: "normal 24px Calibri"
},
text: "PO"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "4"
},
{
style: {
font: "normal 24px Calibri"
},
text: " → 6 H"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "2"
},
{
style: {
font: "normal 24px Calibri"
},
text: "O + Ba"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "3"
},
{
style: {
font: "normal 24px Calibri"
},
text: "(PO"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "4"
},
{
style: {
font: "normal 24px Calibri"
},
text: ")"
},
{
style: {
font: "normal 24px Calibri",
vertAlign: 2
},
text: "2"
},
{
style: {
font: "normal 24px Calibri"
},
text: "↓"
}
]
};
var google = {
richText: [
{
style: {
font: "bold 36px Calibri",
foreColor: "rgb(78,133,242)"
},
text: "G"
},
{
style: {
font: "bold 36px Calibri",
foreColor: "rgb(228,65,52)"
},
text: "o"
},
{
style: {
font: "bold 36px Calibri",
foreColor: "rgb(247,188,32)"
},
text: "o"
},
{
style: {
font: "bold 36px Calibri",
foreColor: "rgb(78,133,242)"
},
text: "g"
},
{
style: {
font: "bold 36px Calibri",
foreColor: "rgb(65,168,87)"
},
text: "l"
},
{
style: {
font: "bold 36px Calibri",
foreColor: "rgb(228,65,52)"
},
text: "e"
}
]
};
var sheet = spread.sheets[0];
sheet.suspendPaint();
sheet.setColumnWidth(0, 720);
sheet.setValue(0, 0, 'Law of universal gravitation:', 3);
sheet.setValue(1, 0, lawOfUniversalGravitation, 3);
sheet.setRowHeight(1, 40);
sheet.getCell(1, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.setValue(3, 0, 'The reaction of barium hydroxide with phosphoric acid:', 3);
sheet.setValue(4, 0, reaction, 3);
sheet.setRowHeight(4, 40);
sheet.getCell(4, 0).vAlign(GC.Spread.Sheets.VerticalAlign.center);
sheet.setValue(6, 0, google, 3);
sheet.setRowHeight(6, 50);
sheet.name('Basic Usage');
sheet.resumePaint();
spread.options.tabStripRatio = 0.8;
}
function setOption(spread) {
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
var addEventListener = function (parent, type, listener) {
return parent.addEventListener(type, listener);
};
var appendChild = function (parent, child) {
return parent.appendChild(child);
};
var createElement = function (tag) {
return document.createElement(tag);
};
var queryCommandState = function (command) {
return document.queryCommandState(command);
};
var queryCommandValue = function (command) {
return document.queryCommandValue(command);
};
var defaultClasses = {
actionbar: 'rich-editor-actionbar',
button: 'rich-editor-button',
content: 'rich-editor-content',
selected: 'rich-editor-button-selected'
};
var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
var formatBlock = 'formatBlock';
var exec = function (command) {
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
return document.execCommand(command, false, value);
};
// font element limitation, only support font size from 1~7
var convertFontSize = function (value) {
if (value <= 10) {
return 1;
} else if (value <= 13) {
return 2;
} else if (value <= 16) {
return 3;
} else if (value <= 18) {
return 4;
} else if (value <= 24) {
return 5;
} else if (value <= 32) {
return 6;
} else {
return 7;
}
};
var fontSizeDict = [0, 10, 13, 16, 18, 24, 32, 48];
var _stopBubble = function (e) {
if (e && e.stopPropagation) {
e.stopPropagation();
} else {
window.event.cancelBubble = true;
}
};
var _colorRGB2Hex = function (color) {
var rgb = color.split(',');
var r = parseInt(rgb[0].split('(')[1]);
var g = parseInt(rgb[1]);
var b = parseInt(rgb[2].split(')')[0]);
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
};
var createRichTextElement = function (tag, value) {
var elem;
switch (tag) {
case 'subscript':
elem = createElement('sub');
break;
case 'superscript':
elem = createElement('sup');
break;
case 'underline':
elem = createElement('u');
break;
case 'strikeThrough':
elem = createElement('strike');
break;
case 'foreColor':
elem = createElement('font');
elem.color = _colorRGB2Hex(value);
break;
case 'fontName':
elem = createElement('font');
elem.face = value;
break;
case 'fontSize':
elem = createElement('font');
elem.size = convertFontSize(value);
break;
case 'bold':
elem = createElement('b');
break;
case 'italic':
elem = createElement('i');
break;
default:
elem = createElement('span');
break;
}
return elem;
};
var addFonts = function (container) {
var defaultFonts = {
ff1: {name: "Arial", text: "Arial"},
ff2: {name: "Arial Black", text: "Arial Black"},
ff3: {name: "Calibri", text: "Calibri"},
ff4: {name: "Cambria", text: "Cambria"},
ff5: {name: "Candara", text: "Candara"},
ff6: {name: "Century", text: "Century"},
ff7: {name: "Courier New", text: "Courier New"},
ff8: {name: "Comic Sans MS", text: "Comic Sans MS"},
ff9: {name: "Garamond", text: "Garamond"},
ff10: {name: "Georgia", text: "Georgia"},
ff11: {name: "Malgun Gothic", text: "Malgun Gothic"},
ff12: {name: "Mangal", text: "Mangal"},
ff13: {name: "Meiryo", text: "Meiryo"},
ff14: {name: "MS Gothic", text: "MS Gothic"},
ff15: {name: "MS Mincho", text: "MS Mincho"},
ff16: {name: "MS PGothic", text: "MS PGothic"},
ff17: {name: "MS PMincho", text: "MS PMincho"},
ff18: {name: "Tahoma", text: "Tahoma"},
ff19: {name: "Times", text: "Times"},
ff20: {name: "Times New Roman", text: "Times New Roman"},
ff21: {name: "Trebuchet MS", text: "Trebuchet MS"},
ff22: {name: "Verdana", text: "Verdana"},
ff23: {name: "Wingdings", text: "Wingdings"}
};
var $ul = container;
var fontItems = [];
var prefix = 'ff', i = 1, id = prefix + i;
while (defaultFonts[id]) {
fontItems.push(('<li class="fontfamily-item">' +
defaultFonts[id].name +
'</li>'));
// .replace(/\{id\}/g, id));
i++;
id = prefix + i;
}
$ul.innerHTML += fontItems.join('');
};
var defaultActions = {
fontFamily: {
icon: '<span id="fontFamilyValue">Calibri</span>' +
'<span class="drop-down-arrow"></span>',
title: 'Bold',
type: 'drop-down',
specialStyle: {
width: '150px'
},
dropDownListId: 'fontFamilyList',
queryValue: function () {
var value = queryCommandValue('fontName').replace(/"/g, '');
if (value.length > 15) { // if fontFamily string is too long,
value = value.substring(0, 15) + '...';
}
document.getElementById('fontFamilyValue').innerText = value;
},
result: function (e) {
e.currentTarget.style.display = 'none';
_stopBubble(e);
var result = e.target.nodeName.toUpperCase() === 'LI' ? e.target.innerText : null;
if (result) {
document.getElementById('fontFamilyValue').innerText = result;
exec('fontName', result);
return true;
} else {
return false;
}
}
},
fontSize: {
icon: '<span id="fontSizeValue">13</span>' +
'<span class="drop-down-arrow"></span>',
title: 'Bold',
type: 'drop-down',
specialStyle: {
width: '40px'
},
dropDownListId: 'fontSizeList',
queryValue: function () {
var fontSizeMap = [0, 10, 13, 16, 18, 24, 32, 48];
var value = queryCommandValue('fontSize');
document.getElementById('fontSizeValue').innerText = fontSizeMap[value] ? fontSizeMap[value] : document.getElementById('fontSizeValue').innerText;
},
result: function (e) {
e.currentTarget.style.display = 'none';
_stopBubble(e);
var result = e.target.nodeName.toUpperCase() === 'LI' ? parseInt(e.target.value) : null;
if (result !== null) {
document.getElementById('fontSizeValue').innerText = fontSizeDict[result];
exec('fontSize', result);
return true;
} else {
return false;
}
}
},
bold: {
icon: '<b>B</b>',
title: 'Bold',
state: function () {
return queryCommandState('bold');
},
result: function () {
return exec('bold');
}
},
italic: {
icon: '<i>I</i>',
title: 'Italic',
state: function () {
return queryCommandState('italic');
},
result: function () {
return exec('italic');
}
},
underline: {
icon: '<u>U</u>',
title: 'Underline',
state: function () {
return queryCommandState('underline');
},
result: function () {
return exec('underline');
}
},
strikethrough: {
icon: '<strike>S</strike>',
title: 'Strike-through',
state: function () {
return queryCommandState('strikeThrough');
},
result: function () {
return exec('strikeThrough');
}
},
colorPicker: {
icon: '<span id="foreColorValue" class="color_picker_result"> A </span>' +
'<span class="drop-down-arrow"></span>',
title: 'colorPicker',
type: 'drop-down',
specialStyle: {
width: '40px'
},
dropDownListId: 'colorPicker',
queryValue: function () {
var value = queryCommandValue('foreColor');
document.getElementById('foreColorValue').style.borderBottomColor = value;
},
result: function result(e) {
e.currentTarget.style.display = 'none';
_stopBubble(e);
return e.target.nodeName.toUpperCase() === 'LI' ? exec('foreColor', _colorRGB2Hex(e.target.style.backgroundColor)) : false;
}
},
superScript: {
icon: 'X<sup>2</sup>',
title: 'SuperScript',
state: function () {
return queryCommandState('superscript');
},
result: function () {
return exec('superscript');
}
},
subScript: {
icon: 'X<sub>2</sub>',
title: 'SubScript',
state: function () {
return queryCommandState('subscript');
},
result: function () {
return exec('subscript');
}
}
};
function _getRichText() {
var iterator = document.createNodeIterator(document.getElementsByClassName('rich-editor-content')[0], NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, false);
var root = iterator.nextNode();// root
var richText = [];
var style = {};
var text = '';
var node = iterator.nextNode();
var underlineNode = null, lineThroughNode = null, pNode = null;
while (node !== null) {
if (node.nodeType === 3/*TextNode*/) {
text = node.nodeValue;
style = document.defaultView.getComputedStyle(node.parentElement, null);
if (underlineNode && underlineNode.contains(node) === false) {
underlineNode = null;
}
if (lineThroughNode && lineThroughNode.contains(node) === false) {
lineThroughNode = null;
}
if (pNode && _getLastTextNode(pNode) === node && _getLastTextNode(root) !== node) {
text = text + '\r\n';
pNode = null;
}
var richTextStyle = _getRichStyle(style, underlineNode, lineThroughNode);
_handleSuperAndSubScript(root, node, richTextStyle);
richText.push({
style: richTextStyle,
text: text
});
} else if (node.nodeName.toLowerCase() === 'p') {
pNode = node;
} else if (node.nodeName.toLowerCase() === 'u') {
underlineNode = node;
} else if (node.nodeName.toLowerCase() === 'strike') {
lineThroughNode = node;
}
node = iterator.nextNode();
}
return richText;
};
function _handleSuperAndSubScript(root, node, style) {
if (root === node) {
return;
}
while (node.parentNode !== root) {
if (node.nodeName.toLowerCase() === 'sub') {
style.vertAlign = 2;
break;
}
if (node.nodeName.toLowerCase() === 'sup') {
style.vertAlign = 1;
break;
}
node = node.parentNode;
}
};
function _getRichStyle(style, isUnderlineNode, isLineThroughNode) {// getComputedStyle can't get inherit textDecoration
return {
font: (style.fontWeight === '700' ? 'bold ' : '') + (style.fontStyle === 'italic' ? 'italic ' : '') + style.fontSize + ' ' + style.fontFamily,
foreColor: style.color,
textDecoration: (isUnderlineNode ? 1 : 0) | (isLineThroughNode ? 2 : 0)
};
};
function _getLastTextNode (root) {
if (root && root.nodeType === 1) {
var child = root.lastChild;
return _getLastTextNode(child);
} else {
return root;
}
};
var _initContent = function(settings) {
var actions = settings.actions ? settings.actions.map(function (action) {
if (typeof action === 'string') {
return defaultActions[action];
}
else if (defaultActions[action.name]) { //NOSONAR
return _extends({}, defaultActions[action.name], action);
}
return action;
}) : Object.keys(defaultActions).map(function (action) {
return defaultActions[action];
});
var classes = _extends({}, defaultClasses, settings.classes);
var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
var actionbar = createElement('div');
actionbar.className = classes.actionbar;
appendChild(settings.element, actionbar);
var content = settings.element.content = createElement('div');
content.contentEditable = true;
content.className = classes.content;
content.oninput = function (_ref) {
var firstChild = _ref.target.firstChild;
if (firstChild && firstChild.nodeType === 3) {
exec(formatBlock, '<' + defaultParagraphSeparator + '>');
} else if (content.innerHTML === '<br>') {//NOSONAR
content.innerHTML = '';
}
};
content.onkeydown = function (event) {
if (event.key === 'Tab') {
event.preventDefault();
} else if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
setTimeout(function () {
return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
}, 0);
}
};
appendChild(settings.element, content);
var contentWrapper = createElement(defaultParagraphSeparator);
appendChild(content, contentWrapper);
if (!this._addedFonts) {
addFonts(document.querySelector("#fontFamilyList"));
this._addedFonts = true;
}
actions.forEach(function (action) {
var button = createElement('button');
button.className = classes.button;
button.innerHTML = action.icon;
// button.title = action.title;
if (action.specialStyle) {
for (var styleProp in action.specialStyle) {
if (action.specialStyle.hasOwnProperty(styleProp)) {
button.style[styleProp] = action.specialStyle[styleProp];
}
}
}
button.setAttribute('type', 'button');
button.onclick = function () {
// should notify each action button to close its drop-down list.
var lists = document.getElementsByClassName('list');
var dropDownList = document.getElementById(action.dropDownListId);
for (var k = 0; k < lists.length; k++) {
if (lists[k] !== dropDownList) {
lists[k].style.display = 'none';
}
}
if (action.type === 'drop-down') {
if (button.contains(dropDownList)) {
dropDownList.style.display === 'none' ? (dropDownList.style.display = 'block') : (dropDownList.style.display = 'none'); //NOSONAR
} else {
var dropDownListClone = dropDownList.cloneNode(true);
if (action.queryValue) {
addEventListener(dropDownListClone, 'click', action.queryValue);
}
button.appendChild(dropDownListClone);
var hostOffsetHeight = button.offsetHeight;
dropDownListClone.style.top = hostOffsetHeight + 'px';
dropDownListClone.style.display = 'block';
dropDownListClone.onclick = function (e) {
return action.result(e) && content.focus();
};
}
} else if (action.type === 'designer-gcui-widget') {
document.querySelector(action.widgetId).toggle();
} else {
return action.result() && content.focus();
}
};
var handler;
if (action.state) {
handler = function () {
return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
};
addEventListener(content, 'keyup', handler);
addEventListener(content, 'mouseup', handler);
addEventListener(button, 'click', handler);
}
if (action.queryValue) {
handler = action.queryValue;
addEventListener(content, 'keyup', handler);
addEventListener(content, 'mouseup', handler);
addEventListener(button, 'click', handler);
}
appendChild(actionbar, button);
});
if (settings.styleWithCSS) {
exec('styleWithCSS');
}
exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
return settings.element;
}
var richEditor = {exec: exec, init: _initContent};
spread.bind(GC.Spread.Sheets.Events.EnterCell, onSpreadEnterCell);
function onSpreadEnterCell(){
var sheet = spread.getActiveSheet();
var contentWrapper = document.querySelector('.rich-editor-content');
contentWrapper.innerHTML="";
var contentText = sheet.getValue(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), 3/* sheetArea */, 1/* richText */);
if (contentText && contentText.richText) {
for (var i = 0; i < contentText.richText.length; i++) {
var elemAttr = [];
if (contentText.richText[i].style && contentText.richText[i].text) {
for (var styleProperty in contentText.richText[i].style) {
if (contentText.richText[i].style.hasOwnProperty(styleProperty)) {
switch (styleProperty) {
case 'vertAlign':
if (contentText.richText[i].style[styleProperty] === 2) {
elemAttr.push('subscript');
} else if (contentText.richText[i].style[styleProperty] === 1) {
elemAttr.push('superscript');
}
break;
case 'textDecoration':
if ((contentText.richText[i].style[styleProperty] & 1) === 1) {
elemAttr.push('underline');
}
if ((contentText.richText[i].style[styleProperty] & 2) === 2) {
elemAttr.push('strikeThrough');
}
break;
case 'foreColor':
elemAttr.push({
name: 'foreColor',
value: contentText.richText[i].style[styleProperty]
});
break;
case 'font':
var spanElem = createElement('div');
spanElem.style.font = contentText.richText[i].style[styleProperty];
if (spanElem.style.fontFamily) {
elemAttr.push({
name: 'fontName',
value: spanElem.style.fontFamily
});
}
if (spanElem.style.fontSize) {
elemAttr.push({
name: 'fontSize',
value: parseInt(spanElem.style.fontSize)
});
}
if (spanElem.style.fontWeight === 'bold') {
elemAttr.push('bold');
}
if (spanElem.style.fontStyle === 'italic') {
elemAttr.push('italic');
}
break;
}
}
}
}
var parentElem = contentWrapper;
for (var j = 0; j < elemAttr.length; j++) {
var richTextElem;
if (typeof elemAttr[j] === 'string') {
richTextElem = createRichTextElement(elemAttr[j]);
} else if (typeof elemAttr[j] === 'object' && elemAttr[j]) {
richTextElem = createRichTextElement(elemAttr[j].name, elemAttr[j].value);
}
appendChild(parentElem, richTextElem);
parentElem = richTextElem;
if (j === elemAttr.length - 1 && richTextElem) {
richTextElem.innerHTML = contentText.richText[i].text;
}
}
}
} else {
contentWrapper.innerHTML = contentText;
}
}
richEditor.init({
element: document.getElementById('richEditor'),
defaultParagraphSeparator: 'p',
styleWithCSS: false,
});
document.getElementById("setRichText").addEventListener("click", function () {
var spread =GC.Spread.Sheets.findControl("ss");
var sheet = spread.getActiveSheet();
var richText = _getRichText();
if (richText.length > 0) {
sheet.setValue(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex(), {
richText: richText
});
}
});
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<div class="sp-demo-childBlock">
<div class="sp-demo-Header">
<strong class="sp-demo-HeaderTitle">Settings</strong>
</div>
<div id="settingsDiv">
<div id="richEditor" class="rich-editor"></div>
<ul id="fontSizeList" class="list">
<li class="fontsize-item" value='1'>10</li>
<li class="fontsize-item" value='2'>13</li>
<li class="fontsize-item" value='3'>16</li>
<li class="fontsize-item" value='4'>18</li>
<li class="fontsize-item" value='5'>24</li>
<li class="fontsize-item" value='6'>32</li>
<li class="fontsize-item" value='7'>48</li>
</ul>
<ul id="fontFamilyList" class="list fontfamily-list">
<li class="fontfamily-item">Segoe UI</li>
<li class="fontfamily-item">Arial</li>
<li class="fontfamily-item">Calibri</li>
<li class="fontfamily-item">Courier New</li>
<li class="fontfamily-item">Comic Sans MS</li>
<li class="fontfamily-item">Microsoft YaHei</li>
<li class="fontfamily-item">Times New Roman</li>
</ul>
<ul id="colorPicker" class="list">
<li class="colorpicker-item" style="background-color:#FFFFFF;"></li>
<li class="colorpicker-item" style="background-color: #C00000;"></li>
<li class="colorpicker-item" style="background-color: #FF0000;"></li>
<li class="colorpicker-item" style="background-color: #FFC003;"></li>
<li class="colorpicker-item" style="background-color: #FFFF00;"></li>
<li class="colorpicker-item" style="background-color: #94D051;"></li>
<li class="colorpicker-item" style="background-color: #00B050;"></li>
<li class="colorpicker-item" style="background-color: #00AFF0;"></li>
<li class="colorpicker-item" style="background-color: #006EC3;"></li>
<li class="colorpicker-item" style="background-color: #001E6E;"></li>
<li class="colorpicker-item" style="background-color: #6E32A0;"></li>
<li class="colorpicker-item" style="background-color: #000000;"></li>
</ul>
<button id="setRichText" value="Set Rich Text">Set Rich Text</button>
</div>
</div>
</div>
</div></body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
* {
margin: 0;
padding: 0;
}
.list {
list-style: none;
display: none;
position: absolute;
box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, .15);
background-color: white;
}
.fontfamily-list{
overflow: scroll;
height: 200px;
}
.rich-editor {
border: 1px solid rgba(10, 10, 10, 0.1);
box-sizing: border-box;
background-color: white;
}
.rich-editor-content {
box-sizing: border-box;
height: 270px;
outline: 0;
overflow-y: auto;
padding: 10px;
}
#setRichText {
display: inline-block;
background-color: white;
border: none;
width: 120px;
height: 30px;
line-height: 30px;
margin-top: 5px;
box-shadow: 1px 2px 5px 2px rgba(51, 51, 51, .15);
}
.rich-editor-actionbar {
background-color: #FFF;
border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
.rich-editor-button {
background-color: transparent;
border: none;
cursor: pointer;
height: 30px;
line-height: 30px;
outline: 0;
width: 30px;
display: inline-block;
margin: 0 3px;
padding:0 2px;
}
.drop-down-arrow {
display: inline-block;
height: 30px;
line-height: 30px;
}
.drop-down-arrow:before {
display: block;
content: '';
width: 0;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
margin-top: 23px;
margin-left: 2px;
}
.rich-editor-button-selected {
background-color: #F0F0F0;
}
.color_picker_result {
border-bottom: 5px solid black;
}
#fontSizeList {
width: 40px;
}
#fontFamilyList {
width: 140px;
}
#colorPicker {
width: 70px;
}
.fontsize-item {
width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.fontfamily-item {
width: 128px;
height: 30px;
line-height: 30px;
text-align: left;
padding-left: 13px;
cursor: pointer;
}
.colorpicker-item {
width: 16px;
height: 16px;
margin: 1px;
padding: 1px;
border: 1px solid transparent;
background-clip: content-box;
float: left;
display: inline-block;
}
.fontsize-item:hover {
background-color: #DDDDDDAA;
}
.fontfamily-item:hover {
background-color: #DDDDDDAA;
}
.colorpicker-item:hover {
box-shadow: 1px 1px 1px 1px rgba(51, 51, 51, .15);
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}