×
Namespaces

Variants
Actions

如何创建一个可输入大容量文本的编辑器

From Nokia Developer Wiki
Jump to: navigation, search
WP Metro Icon UI.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata

代码示例
兼容于
文章
renlin 在 03 Jun 2013 创建
最后由 hamishwillee 在 01 Jul 2013 编辑

Contents

Introduction

TextBox 允许输入的最大字符为2000字(好像是),这对于一个博客类或文本类的应用来说,这个数字显然是不符合用户的需求的,在解决这个问题上,Evernote和Wordpress都使用了html 作为一个编辑器,这样可以应付绝对多数情况下的输入要求。 本文将介绍如何使用html作为一个编辑器,并在html 页面和应用之间如何实现通信。

新建应用程序

这个必须都会。

创建一个html 文件

在解决方案上右键添加一个文本之类的,将其后缀名改为.html,本例的 将这样的代码复制到html文件中:

<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<META http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.more{
diplay:block;
height:1px;
width:100%;
border-bottom:1px dotted #ccc;
}
</style>
<script type="text/javascript">
 
function editorLostFocus(){
window.external.notify("DivLostFocus");
var fieldNameElement = document.getElementById("example-one");
fieldNameElement.style.backgroundColor = "LightGray";
fieldNameElement.style.border="none";
 
}
 
function editorGotFocus(){
window.external.notify("DivGotFocus");
var fieldNameElement = document.getElementById("example-one");
fieldNameElement.style.backgroundColor="White";
fieldNameElement.style.border="1px solid LightGray";
 
}
</script>
</head>
<body>
<div style="background-color:LightGray;height:100%; white-space:pre-wrap;" onfocus="editorGotFocus();" onblur="editorLostFocus();" id="example-one"
contenteditable = "true"> test
</div>
</body>
</html>

代码中让HTML内容可编辑的重要属性就是contenteditable = “true”。 在mainpage.xaml 中添加一个browser,并给它一些必要的属性,其中给ScriptNotify一个handler 以响应html中的事件。从本地文件中读取html内容并加载到browser中,如下代码:

 <phone:WebBrowser x:Name="browser" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
IsScriptEnabled="True"
ScriptNotify="browser_ScriptNotify_1"
Margin="15,10,15,10" Height="Auto" Width="Auto">
</phone:WebBrowser>

在mainpage.xaml.cs 的构造函数中添加browser 的load 代理:

 public MainPage()
{
InitializeComponent();
browser.Loaded += browser_Loaded;
}
void browser_Loaded(object sender, RoutedEventArgs e)
{
//throw new NotImplementedException();
string htmlConcat = this.ReadFile("EditContent.html");
if (htmlConcat == null)
{
MessageBox.Show("can't load the document");
}
else
{
browser.NavigateToString(htmlConcat);
}
}
private string ReadFile(string filePath)
{
var streamResourceInfo = Application.GetResourceStream(new Uri(filePath, UriKind.Relative));
if (streamResourceInfo != null)
{
Stream myFileStream = streamResourceInfo.Stream;
if (myFileStream.CanRead)
{
StreamReader myStreamReader = new StreamReader(myFileStream);
//read the content here
return myStreamReader.ReadToEnd();
}
}
return null;
}


html 页面和应用之间的通信

上面已经browser的ScriptNotify事件添加了handler,从html代码中用 window.external.notify("DivLostFocus");这样的方法来通知应用事件的发生,所以在handler中我们可以这样判断事件是否发生,并在发生时做相应的处理。

        private void browser_ScriptNotify_1(object sender, NotifyEventArgs e) 
{
this._hasChanges = true;
 
var action = e.Value;
//Debug.WriteLine(action.ToString());
if (string.IsNullOrEmpty(action))
{
return;
}
var firstSpace = action.IndexOf(" ", StringComparison.InvariantCulture);
if (firstSpace > -1)
{
action = action.Substring(0, firstSpace);
}
 
 
switch (action)
{
case "DivLostFocus":
Debug.WriteLine("Div_Lost focus Notify");
 
break;
case "DivGotFocus":
Debug.WriteLine("Div_Got focus Notify");
break;
 
}
}

至此一个html编辑器就完成了,你可以在你的编辑器中利用HTML特性完成任意想做的事。当然由于Ie9 和IE10 以及 手机浏览器和PC上的浏览器的差异,遇到让你抓狂的事也是常有的哦。 可以参考:File:HtmlEditor.zip

This page was last modified on 1 July 2013, at 09:36.
100 page views in the last 30 days.
×