×
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 06:36.
101 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×