Skip to content

Commit

Permalink
working on text editor, added rangy.js support and can clean HTML aft…
Browse files Browse the repository at this point in the history 
…er text is edited
  • Loading branch information
@markentingh
markentingh committed May 10, 2017
1 parent 39ecbc5 commit e217ac3
Show file tree
Hide file tree
Showing 15 changed files with 673 additions and 293 deletions.
12 changes: 7 additions & 5 deletions App/CSS/editor.less
View file
Expand Up @@ -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;{
Expand All @@ -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{
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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){
Expand Down
45 changes: 44 additions & 1 deletion App/Components/Textbox/Component.cs
View file
@@ -1,4 +1,5 @@
using System;
using System.Collections.Generic;

namespace Websilk.Components
{
Expand Down Expand Up @@ -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;
Expand Down
77 changes: 64 additions & 13 deletions App/Components/Textbox/texteditor.html
View file
@@ -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>

0 comments on commit e217ac3

Please sign in to comment.