Permalink
Browse files

working on text editor, added rangy.js support and can clean HTML aft…

…er text is edited
  • Loading branch information...
markentingh committed May 10, 2017
1 parent 39ecbc5 commit e217ac35da50d6f22ef1b9ab33d8a8270980f56e
View
@@ -25,9 +25,7 @@
}
.right-side{position:absolute; right:0;}
.save-page{
padding:3px 5px 0 0;
&.nosave{opacity:0.5;}
a{text-align:left; width:25px; position:relative; padding:0 7px 7px 0; top:7px;}
}
.keyframes(save-svg;{
@@ -40,7 +38,7 @@
});
.save-page.saved svg{position:absolute;.animation(save-svg 2s linear);}
.btn-close{position:relative; top:-2px;}
.btn-close{position:relative; top:4px;}
}
> .temp{
@@ -134,7 +132,7 @@
/* disable text selection on certain elements */
.editor .toolbar{
-webkit-touch-callout: none;
-webkit-user-select: none;
-webkit-user-select: none;s
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -165,7 +163,11 @@
/* component specific */
.component.c-textbox{word-break: break-word;}
.text-toolbar{position:absolute; width:330px; z-index:3001;}
.text-toolbar{position:absolute; z-index:3001;
& > div{width:340px; padding:5px;}
}
#textedit_fontfamily{width:100px;}
#textedit_fontsize{width:50px;}
.text-editor{position:absolute !important; z-index:1001;}
@media(max-width:1920px){
@@ -1,4 +1,5 @@
using System;
using System.Collections.Generic;
namespace Websilk.Components
{
@@ -104,7 +105,49 @@ public override void Load()
if (Page.isEditable)
{
menuTypes = new string[] { "all", "!props", "texteditor" };
AddHtmlToEditor("texteditor", S.Server.LoadFileFromCache("/components/textbox/texteditor.html"), new Func<Component, bool>(
var texteditor = new Scaffold(S, "/components/textbox/texteditor.html");
//set up font sizes
var fontSizes = new int[]
{
8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68,
70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98,
100, 120, 140, 160, 180, 200, 250
};
var html = "";
foreach(var s in fontSizes)
{
html += "<option value=\"" + s + "\">" + s + "</option>\n";
}
texteditor.Data["font-size"] = html;
//set up font family
html = "";
var fontFamilies = new List<string>()
{
"Arial, Helvetica, sans-serif",
"\"Arial Black\", Gadget, sans-serif",
"Impact, Charcoal, sans-serif",
"\"Lucida Sans Unicode\", \"Lucida Grande\", sans-serif",
"Tahoma, Geneva, sans-serif",
"\"Trebuchet MS\", Helvetica, sans-serif",
"Verdana, Geneva, sans-serif",
"Georgia, serif",
"\"Palatino Linotype\", \"Book Antiqua\", Palatino, serif",
"\"Times New Roman\", Times, serif",
"\"Courier New\", Courier, monospace",
"\"Lucida Console\", Monaco, monospace"
};
foreach(var f in fontFamilies)
{
html += "<option value=\"" + f.Replace("\"", "&quot;") + "\">" + f + "</option>\n";
}
texteditor.Data["font-family"] = html;
AddHtmlToEditor("texteditor", texteditor.Render(), new Func<Component, bool>(
(c) => {
//text component already exists on the page, so don't add Html
return false;
@@ -1,86 +1,137 @@
<div class="row text-toolbar for-component-select" style="display:none;">
<div class="box">
<div class="row edit-basic">
<div class="col icon small pad-sm">
<div class="col icon small icon-bold pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textbold" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-italic pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textitalic" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-strikethru pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textstrikethru" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-underline pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textunderline" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-bullet pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textbullet" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-numbers pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textnumbers" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-indent pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textindent" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-textleft pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textleft" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-textcenter pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textcenter" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col icon small icon-textright pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textright" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small pad-sm">
<div class="col right icon small icon-more pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textmore" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
</div>
<div class="row edit-advanced pad-sm" style="display:none;">
<div class="row edit-advanced" style="display:none;">
<div class="col icon small icon-color pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textcolor" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small icon-bgcolor pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textbgcolor" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col pad-left-sm">
<select id="textedit_fontfamily">
{{font-family}}
</select>
</div>
<div class="col pad-left-sm">
<select id="textedit_fontsize">
{{font-size}}
</select>
</div>
<div class="col icon small icon-link pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textlink" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small icon-photo pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textphoto" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col icon small icon-source pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textsource" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
<div class="col right icon small icon-less pad-sm">
<a href="javascript:">
<svg viewBox="0 0 32 32">
<use xlink:href="#icon-textmore" x="0" y="0" width="32" height="32"></use>
</svg>
</a>
</div>
</div>
</div>
</div>
Oops, something went wrong.

0 comments on commit e217ac3

Please sign in to comment.