1. 程式人生 > >百度文字編輯器在asp.net 中的應用

百度文字編輯器在asp.net 中的應用

第一步:下載百度文字編輯器: ueditor1_4_3_3-gbk-net.zip , 並把它拷貝到網站根目錄下面(可以參考下里面Index.html 裡面的呼叫案例)

第二步:在前臺aspx頁面加入程式碼:

    
     <script type="text/javascript" charset="gbk" src="../ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="gbk" src="../ueditor/ueditor.all.min.js"> </script>
    <!--建議手動加在語言,避免在ie下有時因為載入語言失敗導致編輯器載入失敗-->
    <!--這裡載入的語言檔案會覆蓋你在配置專案裡新增的語言型別,比如你在配置專案裡配置的是英文,這裡載入的中文,那最後就是中文-->
    <script type="text/javascript" charset="gbk" src="../ueditor/lang/zh-cn/zh-cn.js"></script>
    	<script type="text/javascript">
 	        function getContent() {
 	            var temp = UE.getEditor('editor').getContent();
  	            //alert(temp);
 	            document.getElementById("<%=hd_content.ClientID %>").value = temp;
 	            //alert(temp);
 	          
	        }
	    </script>

</head>
<body>
    <form id="form1" runat="server">
   <table style=" width:600px;"  aligin="center" cellpadding="6"  cellspacing="2" >
      <tr>
            <td style=" height:25px;">
                內容:</td>
            <td>
                     <div>
                        <script id="editor" type="text/plain" style="width: 900px; height: 500px;"></script>
                        <script type="text/javascript">
                            UE.getEditor('editor');
                        </script>
                    </div>
                    <asp:HiddenField ID="hd_content" runat="server" Value="" />
                     
            </td>
        </tr> 
                 
        
        <tr>
            
            <td colspan="2" align="center"  style=" height:50px;">
                <asp:ImageButton ID="btnSave" runat="server" OnClientClick="return getContent();"  Text="儲存" ImageUrl="../Images/published_7.jpg" onclick="btnSave_Click" />
                  
                <a href="CompanyList.aspx" style="text-decoration:underline;"  >返回</a>
            </td>
        </tr>
    </table>
 

後臺呼叫:採用C#編寫:

    public bool SaveData()
    {
        try
        {
            StringBuilder strSql = new StringBuilder();
            strSql.Append("update qb_news_content2 set ");         
            strSql.Append("[email protected]");
            strSql.Append(" where [email protected]
"); SqlParameter[] parameters = { new SqlParameter("@Introduction", SqlDbType.NVarChar), new SqlParameter("@EnterpriseID", SqlDbType.Int,4)}; parameters[0].Value = this.hd_content.Value.Trim(); parameters[1].Value = Request.QueryString["NewsID"]; int rows = SNS.Lib.Conn.SNSAccess.ExecuteSql(strSql.ToString(), parameters); if (rows > 0) { return true; } } catch (Exception ex) { Response.Write(ex.Message); } return false; }

同理可得: 資料顯示也用隱藏域來間接呼叫:this.hd_content.Value = row["content"].ToString();

怎樣在前臺顯示資料內容呢?這個才是重點:(參考資料:http://www.cnblogs.com/ben121011/p/4541837.html)

   <script type="text/javascript">
                            var obj  = UE.getEditor('editor');


                            obj.ready(function () {
                                var temp = document.getElementById("<%=hd_content.ClientID %>").value;
                                alert(temp);
                                this.setContent(temp, true);
                            })                        
                           
                            
                        </script>
這樣就OK了

相關推薦

文字編輯asp.net 應用

第一步:下載百度文字編輯器: ueditor1_4_3_3-gbk-net.zip , 並把它拷貝到網站根目錄下面(可以參考下里面Index.html 裡面的呼叫案例) 第二步:在前臺aspx頁面加入程式碼: <script type="text

文字編輯UEditor新增附件管理功能

最近朋友的一個專案需要一個文字編輯器,讓我突然想起那個百度編輯器UEditor,功能比較齊全而且開源,但也有很多bug和不足。 一年前我就曾經關注過,讓我感到最不能容忍的不足就是,新增的附件的地方,如果檔案和伺服器端重名這樣的錯誤如果能夠容忍,但如果上傳錯了,我想刪除

ueditor編輯asp版本地配置成功伺服器上不能上傳圖片提示500錯誤的解決方法

使用百度開源ueditor編輯器不能上傳圖片並報伺服器500錯誤。 初看是 Uploader.Class 的 fs.CreateFolder( path ) 這條語句不能建立目錄,懷疑許可權問題,提供所有許可權後,依然不行。 最後參考百度官方文件將該程式碼內函式 修改A

.Net Core 使用UEditor編輯

緩存配置 fix oid format public 管理器 gui proc cti 一、準備文件 1. 下載UEditor官方版本.刪除其中後端文件。保留後端文件夾中的config.json文件 2. 在NuGet管理器中搜索UEditorNetCore,拿到項目地址

怎樣在UMeditor編輯插入騰訊和愛奇藝網站視訊?

百度UMeditor線上編輯器有插入視訊的功能,但是預設只支援優酷網的視訊智慧分析提取,其它視訊站是不支援的,但是同樣也可以插入。 原理很簡單,就是複製騰訊、愛奇藝等視訊的FLASH地址即可。 在百度UMeditor線上編輯器插入騰訊、愛奇藝等視訊的FLASH地址時,會提

關於Struts2+spring+maven使用UEditor編輯顯示未找到上傳資料的解決方案

首先上個圖,看看你的是不是這個問題:如果是請繼續往下看,不要急,急了就會浪費更多的時間,這是我在解決這個為題中學到的。 解決思路是,重寫struts2中的一個轉換的類,然後配置struts2使用我們重寫的這個類。 我在網上找了一段程式碼 即增加建立一個過濾器,用來過濾ue

頁面插入UEditor編輯

height blog 含義 復制 保留 了解 com mat ext 工作中用到了百度的富文本。以下總結記錄一下,UEditor嵌入網頁的方法。 第一步 到百度UEditor官網下載所需版本:http://ueditor.baidu.com/website 本次下載

Ueditor編輯的Html模式自動替換樣式的解決方法

tor tail classname 功能 lai empty als 包含 emp 百度的Ueditor編輯器出於安全性考慮,用戶在html模式下粘貼進去的html文檔會自動被去除樣式和轉義。雖然安全的,但是非常不方便。 做一下修改把這個功能去掉。 一、打開ueditor

ueditor編輯 自動加P最新解決辦法

自動 有時 過時 天發 ueditor min 朋友 tor 百度ueditor 今天有個客戶提出個需求,不讓百度ueditor編輯器在空白文檔自動添加<p><br/><p>,在網上找了一圈,大部分是解決LI裏自動套P,還有一部分也是碰到

web編輯——UEditor編輯使用教程與使用方法

  我們在做網站的時候,網站後臺系統一般都會用到 web 編輯器,今天筆者就給大家推薦一款百度 UEditor 編輯器。關於這款百度 UEditor 編輯器官網上也有簡單的教程,不過看著比較費勁,今天筆者就跟大家分享一下百度 UE

UEditor編輯的簡單使用方法

百度UEditor編輯器的官方下載地址: ueditor 官方地址:http://ueditor.baidu.com/website/index.html 開發文件地址:http://ueditor.baidu.com/website/document.html 下載地址:

文字編輯在Java使用

一、ckeditor1)下載ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip兩個壓縮檔案2)解壓縮檔案ckeditor_3.6.2.zip和ckeditor-java-core-3.5.3.zip兩個檔案,在ckeditor_3.

ueditor編輯程式碼高亮

百度的ueditor是國內比較好用的富文字編輯器,這裡要講解的是ueditor中一個很小的功能:程式碼高亮; 對於我們這些寫個部落格三句不離程式碼的碼農們來說,能看到段高亮的程式碼那欣喜是無以言表的; 沒圖我說個。。;上圖;以上篇文章為例; 示例環境:ueditor

UEditor編輯視訊相關bug彙總和穩定解決方案

百度UEditor編輯器的視訊是個很頭疼的問題,從昨晚到今天折騰了一天,也看了不少帖子,很多都是隻治標不治本,而且有很多改法也是忽略本質,不過受大神啟發,自己還是琢磨出來了。 百度UEditor編輯器的視訊主要容易出現幾個問題: 1、新增視訊之後,點選檢視html原始碼,結

dede織夢自帶編輯替換ueditor編輯

用過dedecms的朋友都知道dede自帶的文字編輯器很不好用,且有些功能還需要我們自己手動去修改原始碼,才能完成我們想要的效果。現在廣大用dedecms的朋友們,你們有福啦!我們可以利用百度的Ueditor編輯器來改變這一狀況,讓dede的文字編輯功能變得更加的強大。

php 刪除富文字編輯儲存內容的其他程式碼(保留中文)

$str = '&lt;p&gt;&lt;p style=&quot;ve:&amp;quot;&quot;&gt;測試篩選文字域內的中文 &lt;/p&gt;&lt;p sty;&quot;&

二.UEditor編輯之配置檔案:ueditor.config.js

百度UEditor編輯器之配置檔案:ueditor.config.js,可以在這裡配置整個編輯器的特性。 編輯器資原始檔根路徑配置:window.UEDITOR_HOME_URL = "/xxxx/xxxx/";在開發過程中可以配置為如下: var URL =window

UEditor編輯關閉抓取遠端圖片功能(預設開啟)

這個坑孃的功能,開始時居然不知道如何觸發,以為有個按鈕,點選一下觸發,翻閱了文件,沒有發現,然後再網路上看到原來是複製貼上非白名單內的圖片到編輯框時觸發,坑娘啊............... 問題又來了:今天在寫百度UEditor編輯器的【取遠端圖片功能】時有碰到:該功能如

UEditor編輯setContent innerHtml 未定義報錯。

1關於很多同學提到的setContent報錯的問題,由於編輯器例項化之後(new以後再render),不能直接呼叫setContent去給編輯器設定內容。由於此時很可能因為網速、頁面元素的多少影響到編輯器的編輯器框的渲染速度。 當你render完以後,直接使用setCont

PHPCMS V9整合UEditor編輯操作詳解

最近的一個專案使用PHPCMS,而自帶的ckeditor編輯器一點都不好用,於是就整合百度UEditor。支援圖片批量上傳,上傳附件等功能,自己整理一下步驟如下,修改前請先備份。1、下載Ueditor官網:http://ueditor.baidu.com/website/download.html2、上傳ue