UEditor富文本编辑器在VB.net中的部署

  • Post author:
  • Post category:其他


第一步:下载最新UEditor对应的.net版本,下载地址

http://ueditor.baidu.com/website/

第二步:解压压缩包,以下是ueditor1_4_3_3-utf8-net解压的目录结构。


第三步:启动VS2017,新建空网站。

在资源管理器中将上面解压的文件及文件夹拷贝全部到空白网站对应的文件夹内,刷新网站。将net文件夹中的Web.config移动到网站根目录,将net文件夹中的bin及App_Code目录移到网站根目录。

发布网站,在IIS应用服务器添加应用程序“ueditor”,注意物理路径。

到这里就可以调试运行网站了,静态demo页面index.html就可以上传图片了。

在ueditor/net目录中的config.json文件中,可以看到图片访问路径:”/ueditor/net/”, /* 图片访问路径前缀 */。(ueditor与IIS应用程序对应)

/* 上传图片配置项 */
    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */
    "imageFieldName": "upfile", /* 提交的图片表单名称 */
    "imageMaxSize": 2048000, /* 上传大小限制,单位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */
    "imageCompressEnable": true, /* 是否压缩图片,默认是true */
    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */
    "imageInsertAlign": "none", /* 插入的图片浮动方式 */
    "imageUrlPrefix": "/ueditor/net/", /* 图片访问路径前缀 */
    "imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

注:此文件可修改上传文件的默认大小!

由于Ueditor的.net版本是用C语言所写,VB.net不能同时编译两种语言,只能在网站中调用上述应用程序。

具体方法如下:

新建一个网站,在网站根目录添加一个web窗体,命名为Default.aspx。

添加一个textarea控件,运行在服务端,添加一个button和Literal1。通过javascript利用textarea控件构建一个富文布编辑器。

页面代码如下:

<%@ Page Language="VB" ValidateRequest="false" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><!-- 注意:ValidateRequest="false"   不验证字符-->

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Ueditor/ueditor.config.js"></script> 
    <script src="Ueditor/ueditor.all.min.js"></script>
    <script src="Ueditor/lang/zh-cn/zh-cn.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Ueditor富文本.net部署</title>
</head>
<body>
    <form id="form1" runat="server">
       <div style="width:800px"> 
           <script type="text/javascript">
                    var editor = new baidu.editor.ui.Editor();
                    editor.render("myEditor");
          </script><div>

            <textarea id="myEditor" cols="20" rows="2" runat="server" name="S1" ></textarea><br />  <!--注意:添加运行在server --> 
           </div>
      </div>

   
        <div id="">
                   <asp:Button ID="Button1" runat="server" Text="网页显示" />
        </div>
        <p>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </p>
 </form>
</body>
</html>

注:以下三个js对应ueditor应用程序的js。

  <script src="Ueditor/ueditor.config.js"></script> 
    <script src="Ueditor/ueditor.all.min.js"></script>
    <script src="Ueditor/lang/zh-cn/zh-cn.js"></script>

Default.aspx.vb的代码如下:

Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If IsPostBack = False Then
            Me.myEditor.InnerHtml = "<img src='http://dingyue.nosdn.127.net/NbLJ8TpnRLL0FvU6gQdbScyFnfEUA253CtwvqBjXJY3Xe1522196780758compressflag.jpg' />" '赋值 
        End If
    End Sub
    Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
        Dim editData As String = Server.HtmlDecode(myEditor.InnerHtml) '获取值
        '   Server.HtmlEncode(str);
        Literal1.Text = editData
    End Sub
End Class

这个网站需部署在同一IIS下。

注意web.config

  <system.web>      <compilation debug="true" strict="false" explicit="true" targetFramework="4.5.2" />

      <httpRuntime targetFramework="4.5.2" />
    </system.web>

通过以上代码可以实现将从服务器数据库读出的富文本赋值给富文本编辑器,编辑完成再保存到服务器或在客户端显示对应的信息!

(这里面主要是解决图片文件上传及显示的问题)



版权声明:本文为u012743824原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。