Heim > Web-Frontend > HTML-Tutorial > 在 VS2013的ASPNET网站开发中用 xheditor v1.1.13 作为HTML编辑器_html/css_WEB-ITnose

在 VS2013的ASPNET网站开发中用 xheditor v1.1.13 作为HTML编辑器_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:48:05
Original
1324 Leute haben es durchsucht

要用vs2013开发一个博客网站,.net   framework  4,需要一个HTML编辑器作为写文章的工具。经多方试用,排除了dotnettextbox、kceditor。觉得xheditor 不错,现将使用方法记录如下:

1.到http://download.csdn.net/download/chenhaoying/4274663下载,会得到一个名为:“xheditor-1.1.13在asp.net中使用.rar”的文件。

2.用vs2013新建一个网站,网站名任何,此例为Test4hxEditor.如下图。


3.将xheditor-1.1.13在asp.net中使用.rar 文件中的xheditor_emot、xheditor_skin两个文件夹及xheditor-1.1.13-zh-cn.min.js、jquery-1.4.4.min.js两个文件解压到上网站所在的文件夹“d:\快盘\Test4hxEditor”内。

4.在vs2013内为TestfhxEditor添加一个Web窗体,此例中名为Default。

5.在vs2013内打开Default.aspx文件,修改如下,其中粗体显示的为修改增加的内容。如下所示:

<pre name="code" class="plain"><meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title></title>    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>    <script type="text/javascript" src="xheditor-1.1.13-zh-cn.min.js"></script>    <script type="text/javascript">        $(document).ready(function () {            $('#elm1').xheditor({ tools: 'GStart,Fontface,FontSize,Blocktag,Bold,Italic,Underline,Strikethrough,FontColor,BackColor,Removeformat,Separator,Align,List,Outdent,Indent,Separator,Cut,Copy,Paste,Pastetext,Separator,Link,Unlink,Img,Emot,Table,Separator,About,GEnd', skin: 'default', showBlocktag: false, internalScript: false, internalStyle: false, width: 600, height: 300, loadCSS: 'http://xheditor.com/test.css', fullscreen: false, sourceMode: false, forcePtag: true, upImgUrl: "pictures", upImgExt: "jpg,jpeg,gif,png" });        });    </script>     
Nach dem Login kopieren


6.将Default.aspx设计视图下,双击其中的"Button"按钮,进入Default.aspx.cs文件的编辑界面,并将其编辑为如下所示:

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = elm1.Value;
    }
}



<span style="font-family: Arial, Helvetica, sans-serif;">7.在vs2013内打开Web.config文件,在<system.web></system.web>内增加如下内容:<httpruntime requestvalidationmode="2.0"></httpruntime>。如下所示。</span>
Nach dem Login kopieren
<span style="font-family: Arial, Helvetica, sans-serif;">    <system.web>      <compilation debug="true" targetframework="4.0"></compilation>      <httpruntime requestvalidationmode="2.0"></httpruntime>    </system.web></span>
Nach dem Login kopieren

8.运行网站。出现一个编辑器,在其中输入内容并编辑,完成后单击按"Button"按钮,可将所编辑的内容传给label1。如下图所示。

Nach dem Login kopieren

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"><img src="http://img.blog.csdn.net/20150317150808512?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvamh5Y2poeWM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"    style="max-width:90%" alt=""></span>
Nach dem Login kopieren
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span>
Nach dem Login kopieren
Nach dem Login kopieren
<span style="font-family:Arial, Helvetica, sans-serif;"><span style="background-color: rgb(255, 255, 255);">至此,xheditor 已基本可用,至于图片上传的功能,另文详述.</span></span>
Nach dem Login kopieren
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span>
Nach dem Login kopieren
Nach dem Login kopieren



Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage