DevExpress使用教程：富文本編輯器RichEditControl

---

傳統(tǒng).NET界面有一個富文本控件RichTextBox，可以存儲圖片文字等內(nèi)容，它有自己的文件格式RTF，在DevExpress控件組里面也有一個同等的控件——RichEditControl，這個控件功能很強(qiáng)大，它可以做郵件編輯器，實現(xiàn)圖文并茂的郵件的功能，如下所示。

但是默認(rèn)它沒有任何工具欄，全部是需要自己添加上去。EvWebMail郵件插件

1、如何創(chuàng)建帶工具欄的RichEditControl控件

為了使得控件更加通用，我做了一個自定義控件，用來實現(xiàn)通用文本編輯器的功能，首先我們創(chuàng)建一個自定義控件，如下所示。

這樣我們會看到一個空白的自定義控件界面，然后再往里面添加一個RichEditControl進(jìn)去，設(shè)置Dock=Fill,讓RichEditControl控件鋪滿整個自定義控件界面，如下所示。

設(shè)置器ActiveViewType=Simple，讓控件顯示的更緊湊一些。如下所示。

從上面我們看到，它默認(rèn)是沒有任何工具欄的，比較簡單，那么我們要添加像上面郵件界面的功能，如何實現(xiàn)呢？很簡單，選中RichEditControl,然后再右上角的三角符號上，單擊可以看到有一些功能菜單，如下所示。

單擊Create BarManager然后可以進(jìn)一步看到更多的工具欄菜單了，如下所示。你可以懸著Create All Bar來創(chuàng)建所有工具欄，然后刪除多余的就可以了。

這樣就可以把所有的工具欄全部列出來了，很多很多。

但是一般我們不需要那么多，精簡一些重要的功能即可，這些多余的最好刪除，否則很凌亂。

這些功能按鈕默認(rèn)都已經(jīng)帶有事件的處理，就是不需要額外的代碼就可以實現(xiàn)各種標(biāo)準(zhǔn)的功能了，這些很方便，類似DevExpress這方面做得很好，如打印預(yù)覽控件也是一樣，基本上不需要編寫代碼了，選擇需要的功能，多余的刪除即可，這樣就可以精簡到我本文開頭的那個郵件編輯器界面了。

2、如何實現(xiàn)自定義的按鈕功能

剛才說到，里面的按鈕可以隨意刪除，也可以隨意組合到一個工具欄里面，當(dāng)然，這個控件的工具欄除了內(nèi)置的按鈕外，還可以增加自己的按鈕和事件相應(yīng)，這樣就更加完美和強(qiáng)大了。

如上面的按鈕，就是我用來截圖的一個功能，自定義的，內(nèi)置的沒有這樣的功能，這樣添加按鈕及圖片后，實現(xiàn)按鈕的事件就可以了，和自己創(chuàng)建的按鈕一樣。

這個截圖的功能，利用了我的共用類庫里面的一個截圖類，實現(xiàn)代碼如下所示。

        ScreenCaptureWindow captureWindow = null;
        private void barCapture_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)
        {
            if (this.ParentForm.Owner != null)
            {
                this.ParentForm.Owner.Hide();
            }
            this.ParentForm.Hide();
            if (captureWindow != null)
            {
                captureWindow.BitmapCropped -= new EventHandler(captureWindow_BitmapCropped);
                captureWindow.Dispose();
                captureWindow = null;
            }
            if (captureWindow == null)
            {
                captureWindow = new ScreenCaptureWindow();
                captureWindow.BitmapCropped += new EventHandler(captureWindow_BitmapCropped);
            }

            captureWindow.Show();
            captureWindow.TopMost = true;
            captureWindow.TopMost = false;
        }
        void captureWindow_BitmapCropped(object sender, EventArgs e)
        {
            try
            {
                if (captureWindow.DragStop != captureWindow.DragStart)
                {
                    RichEditControl control = this.richEditControl1;
                    control.Document.InsertImage(control.Document.CaretPosition, DocumentImageSource.FromImage(captureWindow.BitmapCache));
                }
            }
            finally
            {
                if (this.ParentForm.Owner != null)
                {
                    this.ParentForm.Owner.Show();
                }
                this.ParentForm.Show();
            }
        }

這個截圖，直接就是把Image插入到RichEditControl里面，不需要另外存儲圖片到文件里的，這就是RichEditControl控件方便之處，如果我們要實現(xiàn)插入圖片和加載文檔的方法，除了使用內(nèi)置按鈕（推薦）外，其實自己也可以寫事件來實現(xiàn)的，如下代碼就是實現(xiàn)這兩個簡單的功能（一般不需要）。

       private void barInsertImg_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)
        {
            string selectImage = FileDialogHelper.OpenImage(true, "");
            if (!string.IsNullOrEmpty(selectImage))
            {
                foreach (string file in selectImage.Split(new char[] { ',', ';', '，', '；' }))
                {
                    if (File.Exists(file))
                    {
                        try
                        {
                            RichEditControl control = this.richEditControl1;
                            control.Document.InsertImage(control.Document.CaretPosition, DocumentImageSource.FromFile(file));
                        }
                        catch
                        {
                        }
                    }
                }
            }
        }

        private void barLoadFile_ItemClick(object sender, DevExpress.XtraBars.ItemClickEventArgs e)
        {
            string filter = "Word2003(*.doc)|*.doc|Word2007(*.docx)|*.docx|RTF(*.rtf)|*.rtf|HTM(*.htm)|*.htm|HTML(*.html)|*.html|All File(*.*)|*.*";
            string file = FileDialogHelper.Open("打開文件", filter);
            if (!string.IsNullOrEmpty(file))
            {
                //string htmlContent = File.ReadAllText(file, Encoding.Default);
                //this.richEditControl1.HtmlText = htmlContent;
                string path = Path.GetFullPath(file);
                string extension = Path.GetExtension(file);
                switch (extension.ToLower())
                {
                    case ".htm":
                    case ".html":
                        this.richEditControl1.Document.LoadDocument(file, DocumentFormat.Html, path);
                        break;
                    case ".doc":
                        this.richEditControl1.Document.LoadDocument(file, DocumentFormat.Doc, path);
                        break;
                    case ".docx":
                        this.richEditControl1.Document.LoadDocument(file, DocumentFormat.OpenXml, path);
                        break;
                    case ".rtf":
                        this.richEditControl1.Document.LoadDocument(file, DocumentFormat.Rtf, path);
                        break;
                    default:
                        this.richEditControl1.Document.LoadDocument(file, DocumentFormat.PlainText, path);
                        break;                    
                }                

                //DocumentRange range = richEditControl1.Document.Range;
                //CharacterProperties cp = this.richEditControl1.Document.BeginUpdateCharacters(range);
                //cp.FontName = "新宋體";
                //cp.FontSize = 12;
                //this.richEditControl1.Document.EndUpdateCharacters(cp);
            }
        }

3、RichEditControl的特殊操作

1）文檔字體修正

RichEditControl控件功能是強(qiáng)大，不過一般也需要處理一些特殊的情況，由于該控件加載的時候，默認(rèn)好像字體都是方正姚體的字體，因此感覺很不好看，那么我們就要在文檔加載的時候，把它的字體修改下，操作如下所示，修改為新宋體的字體比方正姚體的好看很多。

        public MyRichEdit()
        {
            InitializeComponent();

            this.richEditControl1.DocumentLoaded += new EventHandler(richEditControl1_DocumentLoaded);
        }

        void richEditControl1_DocumentLoaded(object sender, EventArgs e)
        {
            DocumentRange range = richEditControl1.Document.Range;
            CharacterProperties cp = this.richEditControl1.Document.BeginUpdateCharacters(range);
            cp.FontName = "新宋體";
            //cp.FontSize = 12;
            this.richEditControl1.Document.EndUpdateCharacters(cp);
        }

2）RichEditControl內(nèi)置圖片資源的解析

RichEditControl控件支持把圖片作為內(nèi)嵌資源存儲在里面，如果我們要把他作為郵件發(fā)送，我們知道，郵件內(nèi)容雖然是HTML的，但是圖片資源需要獨立取出來放到LinkedResource對象作為郵件發(fā)送才能顯示，否則不能顯示圖片的。而RichEditControl默認(rèn)轉(zhuǎn)換出來的HTML內(nèi)容，是把圖片作為Base64碼寫到文檔里面，文檔比較大的。為了實現(xiàn)把圖片獨立提取出來，我們需要一個該控件的解析類RichMailExporter，代碼如下所示。

    /// <summary>
    /// 把RichEditControl里面的內(nèi)容導(dǎo)出為HTML和嵌入圖片資源的輔助函數(shù)
    /// </summary>
    public class RichMailExporter : IUriProvider
    {
        int imageId;
        readonly RichEditControl control;
        List<LinkedAttachementInfo> attachments;

        public RichMailExporter(RichEditControl control)
        {
            Guard.ArgumentNotNull(control, "control");
            this.control = control;
        }

        /// <summary>
        /// 導(dǎo)出內(nèi)容和嵌入資源
        /// </summary>
        /// <param name="htmlBody">HTML內(nèi)容</param>
        /// <param name="attach">附件資源</param>
        public virtual void Export(out string htmlBody, out List<LinkedAttachementInfo> attach)
        {
            this.attachments = new List<LinkedAttachementInfo>();
            control.BeforeExport += OnBeforeExport;
            htmlBody = control.Document.GetHtmlText(control.Document.Range, this);
            control.BeforeExport -= OnBeforeExport;

            attach = this.attachments;
        }

        void OnBeforeExport(object sender, BeforeExportEventArgs e)
        {
            HtmlDocumentExporterOptions options = e.Options as HtmlDocumentExporterOptions;
            if (options != null)
            {
                options.Encoding = Encoding.UTF8;
            }
        }

        #region IUriProvider Members

        public string CreateCssUri(string rootUri, string styleText, string relativeUri)
        {
            return String.Empty;
        }

        public string CreateImageUri(string rootUri, RichEditImage image, string relativeUri)
        {
            string imageName = String.Format("image{0}", imageId);
            imageId++;

            RichEditImageFormat imageFormat = GetActualImageFormat(image.RawFormat);
            Stream stream = new MemoryStream(image.GetImageBytes(imageFormat));
            string mediaContentType = RichEditImage.GetContentType(imageFormat);
            LinkedAttachementInfo info = new LinkedAttachementInfo(stream, mediaContentType, imageName);
            attachments.Add(info);

            return "cid:" + imageName;
        }

        private RichEditImageFormat GetActualImageFormat(RichEditImageFormat _RichEditImageFormat)
        {
            if (_RichEditImageFormat == RichEditImageFormat.Exif ||
                _RichEditImageFormat == RichEditImageFormat.MemoryBmp)
                return RichEditImageFormat.Png;
            else
                return _RichEditImageFormat;
        }
        #endregion
    }

    /// <summary>
    /// 用來傳遞附件信息
    /// </summary>
    [Serializable]
    public class LinkedAttachementInfo
    {
        private Stream stream;
        private string mimeType;
        private string contentId;

        /// <summary>
        /// 參數(shù)構(gòu)造函數(shù)
        /// </summary>
        /// <param name="stream">附件流內(nèi)容</param>
        /// <param name="mimeType">附件類型</param>
        /// <param name="contentId">內(nèi)容ID</param>
        public LinkedAttachementInfo(Stream stream, string mimeType, string contentId)
        {
            this.stream = stream;
            this.mimeType = mimeType;
            this.contentId = contentId;
        }

        /// <summary>
        /// 附件流內(nèi)容
        /// </summary>public Stream Stream { get { return stream; } }

        /// <summary>
        /// 附件類型
        /// </summary>public string MimeType { get { return mimeType; } }

        /// <summary>
        /// 內(nèi)容ID
        /// </summary>public string ContentId { get { return contentId; } }
    }

這樣我們在獲取編輯控件里面的HTML的同時，也把里面的附件提取出來了，方便我們發(fā)送郵件使用，如下代碼就是獲取HTML內(nèi)容和附件列表的，其中LinkedAttachementInfo是以Stream和相關(guān)信息存在的一個實體類。

            string html = "";
            List<LinkedAttachementInfo> linkList = new List<LinkedAttachementInfo>();
            RichMailExporter exporter = new RichMailExporter(this.txtBody.richEditControl1);
            exporter.Export(out html, out linkList);

            MailInfo info = new MailInfo();
            info.Subject = this.txtSubject.Text;
            info.Body = html;
            info.IsBodyHtml = true;
            info.EmbedObjects.AddRange(linkList);//添加嵌入資源
            info.ToEmail = this.txtRecipient.Text;//收件人 

這樣我們發(fā)送郵件的時候，寫入附件數(shù)據(jù)就可以了，如下代碼所示。

            //嵌入資源的發(fā)送操作
            AlternateView view = AlternateView.CreateAlternateViewFromString(mailInfo.Body, Encoding.UTF8, MediaTypeNames.Text.Html);
            foreach (LinkedAttachementInfo link in mailInfo.EmbedObjects)
            {
                LinkedResource resource = new LinkedResource(link.Stream, link.MimeType);
                resource.ContentId = link.ContentId;
                view.LinkedResources.Add(resource);
            }
            mail.AlternateViews.Add(view);

發(fā)送成功后，我們就會看到圖文并茂的郵件了。

3、內(nèi)容支持搜索的操作

郵件保存的時候，我們可以把RichEditControl的內(nèi)容作為RTF格式進(jìn)行保存，這樣圖片的資源就作為代碼進(jìn)行保存了，這樣恢復(fù)顯示也很方便，唯一不好的就是這些內(nèi)容不好搜索，建議如果要支持搜索，可以通過增加另外一個文本字段，把內(nèi)容轉(zhuǎn)換為純文本進(jìn)行保存，這樣加載就以RTF內(nèi)容加載，搜索的時候，就搜索純文本就可以了。

以上就是我在使用DevExpress的RichEditControl過程中碰到和解決問題的過程，希望對大家有幫助，共同提高。

轉(zhuǎn)載自http://www.cnblogs.com/wuhuacong/archive/2013/01/27/2878368.html

慧都學(xué)院2017全新DevExpress線下研修班火熱報名中！

• WinForms控件學(xué)習(xí)+實踐的不二之選——DevExpress WinForm提升班
• 高效的MVVM開發(fā)模式，WPF開發(fā)首選培訓(xùn)平臺——DevExpress WPF提升班
• 手把手將您快速開發(fā)出完美、強(qiáng)大的ASP應(yīng)用程序——DevExpress ASP.NET提升班

---