CHtmlEditCtrl (2): Add a Source Text Editor to Your HTML Editor
In a previous article, I described how to create an HTML editor using the MFC CHtmlEditCtrl class in a dialog box. It could be used for creating "rich text" emails, chat-box composition, or perhaps even as an option for a syntax-highlighting code editor -- anywhere you would like to show HTML and let the user modify it.
As the picture shows, we're going to add a source-text edit box so that you can make manual changes to the HTML source text -- giving you a way to explore some new options for this powerful control.
Use the Visual Studio Dialog Editor to add a multi-line Edit Control below the static text "placeholder" for the HTML editor. Right-click it and Add a control-type variable to the parent dialog (m_ctHtmlSrcText).
Add this to the OnBnClickedLoadfile() function:
m_ctHtmlSrcText.SetWindowTextW( m_sHtml ); // populate the Editbox |
Now, wouldn't it be cool if we could update the source text box whenever the user made changes in the HTML editor? Alas, there is no "OnChange" type notification from the control, so that's the next challenge: I needed to find a way to determine when the user has made a change in the HTML editor. I looked at the GetIsDirty() function, but that flag gets set right after the first edit and there's no clean way to set it back after an update from the source text -- so I went with a different approach...
I decided to set up a window timer and use it to compare the most recently-copied HTML to the current HTML. If it varies, then I re-populate the source text edit box, making sure to re-display it at the earlier scroll position.
And of course, we want to do a similar thing when the user modifies the HTML source text -- update the browser view with the changes. Here's the code for all of that:
//------------------------------------------------ // update the HTML source box with changes from HTML Editor // void CEditHtmlDlg::SyncSrcToHtml() { m_ctlEditHtml.GetDocumentHTML( m_sHtml ); int nLine= m_ctHtmlSrcText.GetFirstVisibleLine(); // remember cur pos m_ctHtmlSrcText.LockWindowUpdate(); // avoid some flashing m_ctHtmlSrcText.SetWindowTextW( m_sHtml ); m_ctHtmlSrcText.LineScroll(nLine, 0); m_ctHtmlSrcText.UnlockWindowUpdate(); m_fSrcNeedsSync= false; } //------------------------------------------------ // update the Browser view changes from source text box void CEditHtmlDlg::SyncHtmlToSrc() { //------- all this to locate the scroll position... long nOffsetTop; IHTMLDocument2* pDoc; BOOL fRet= m_ctlEditHtml.GetDHtmlDocument( &pDoc ); IHTMLElement* pBody; pDoc->get_body( &pBody ); IHTMLElement2* pBody2; pBody->QueryInterface (IID_IHTMLElement2, (void**)&pBody2); pBody2->get_scrollTop( &nOffsetTop ); //------- update the HTML m_ctHtmlSrcText.GetWindowTextW( m_sHtml ); m_ctlEditHtml.SetDocumentHTML( m_sHtml ); m_ctlEditHtml.LockWindowUpdate(); // avoid some flashing AwaitReady( 2 ); // CHtmlEditCtrl takes time for "document complete" //------- now scroll back to saved position IHTMLWindow2* pWin; pDoc->get_parentWindow( &pWin ); pWin->scrollTo(0,nOffsetTop); m_ctlEditHtml.UnlockWindowUpdate(); m_fHtmlNeedsSync= false; } |
Updating the source text window was basically a no-brainer, but handling the HTML editor update was a bit trickier. Re-loading the HTML into the CHtmlEditCtrl causes it to redisplay at the top -- a very rude thing to do to a user. I had to use the IHTMLElement2 get_scrollTop for the document body to obtain the current scroll position and the IHTMLWindow2 scrollTo function to restore it after reloading the HTML.
I found that without the call to AwaitReady (in line 32), the scrollTo function was ignored -- the embedded browser control needs a short time to reprocess the HTML. So I used a technique from an earlier article to delay processing until the control indicates it is ready. You'll find the AwaitReady() function in the project source code available for download at the end of this article.
In the Dialog Editor, right-click the source text edit control and use Add Event Handler... to create an OnEnChange handler to the dialog class.
Here's the OnTimer function and the CEdit's EN_CHANGE notification handler that use the SyncXxxxx functions:
void CEditHtmlDlg::OnEnChangeHtmlsrc() { m_dwLastEnChangeTick= GetTickCount(); m_fHtmlNeedsSync= true; } //-------------------------------------------- // I used a StartTimer() in OnInit Dialog // to execute this 10 times per second // void CEditHtmlDlg::OnTimer(UINT_PTR nIDEvent) { if ( m_fSrcNeedsSync ) { SyncSrcToHtml(); // update source view, set m_fSrcNeedsSync false } else { // check to see if HTML has changed CString sCurHtml; m_ctlEditHtml.GetDocumentHTML( sCurHtml ); if ( sCurHtml != m_sHtml ) { m_sHtml= sCurHtml; m_fSrcNeedsSync= true; // update on next pass through } } if ( m_fHtmlNeedsSync ) { // here, we wait until the user stops typing (1 second)... if( GetTickCount() > m_dwLastEnChangeTick + M_MsDelayBeforeUpdate ) { SyncHtmlToSrc(); // update HTML view, set m_fHtmlNeedsSync false } } CDialog::OnTimer(nIDEvent); } |
Some notes on the above code:
I added:
SetTimer( M_UpdateTimerID, 100, 0 );
to my OnInitDialog function, and used the Class Wizard to add the WM_TIMER handler. Thus, the OnTimer function executes 10 times per second.
Line 18 looks like it might be a problem -- ten times per second, the code fetches the HTML source text form the CHtmlEditCtrl and compares it to the previously-saved text. That seems like a lot of processing. However, most HTML files are relatively short and CPUs are fast. As a pragmatic test, even when I tried doing it 100 times per second on a large HTML file, I did not overburden my CPU. If you want, you can decrease the timer to five times or twice per second.
Line 25 looks at a time-value variable that gets set each time OnEnChangeHtmlsrc gets triggered (e.g., when the user types or pastes or deletes in the source text window). If less than one second has elapsed since the last such editing change, it does nothing. The end result is that you can finish your typing without being interrupted.
Summary:
We now have a dialog-based (non Doc/View) HTML editor that also displays and lets you modify the source HTML. It automatically updates one when you modify the other. We had to work around the lack of an "On Change" notification from CHtmlEditCtrl, but the timer-based solution works well.
In the next installment, we'll add some functionality to let the user set colors, create bullet lists, and so forth.
Project Source Code
The full source code for this project is available for download. It includes a VS2008 project file.
EditHtml.zip
References:
CHtmlEditCtrl Class
http://msdn.microsoft.com/en-us/library/h14ht0dh.aspx
CHtmlEditCtrlBase Class
http://msdn.microsoft.com/en-us/library/54542c1c.aspx
MSHTML Editing Overviews and Tutorials
http://msdn.microsoft.com/en-us/library/aa770039(VS.85).aspx
IHTMLElement2 Interface
http://msdn.microsoft.com/en-us/library/aa703984(VS.85).aspx
IHTMLWindow2 Interface
http://msdn.microsoft.com/en-us/library/aa741505(VS.85).aspx
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
If you liked this article and want to see more from this author, please click the Yes button near the:
Was this article helpful?
label that is just below and to the right of this text. Thanks!
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
From: https://www.experts-exchange.com/articles/1397/Add-a-Source-Text-Editor-to-Your-HTML-Editor.html
CHtmlEditCtrl (2): Add a Source Text Editor to Your HTML Editor的更多相关文章
- iOS - 解决Unable to add a source with url `https://github.com/CocoaPods/Specs.git` named
1 本来cocopods没有问题,最近创建项目,利用cocopods导入第三方库的时候,出现如下错误: [!] Unable to add a source with url `https://gi ...
- CodeMirror动态修改代码(关键: editor.getDoc().setValue(data); editor.refresh();)
在使用codemirror时,其原理是根据form中的textarea标签,自动加载其内容,获得代码行的显示.(具体使用方式参见 codemirror官网使用手册 http://codemirror. ...
- [NOI2003]Editor & [AHOI2006]文本编辑器editor BZOJ1507&BZOJ1269
分析: Splay区间操作裸题,维护出区间信息,按照要求模拟,注意读入格式,并且考虑内存回收(开不下) 附上代码: #include <cstdio> #include <algor ...
- CHtmlEditCtrl (3): More HTML Editor Options
In this version of our HTML Editor, we'll create a floating source view/edit window and we'll implem ...
- CHtmlEditCtrl(1) : Use CHtmlEditCtrl to Create a Simple HTML Editor
I needed a lightweight HTML editor to generate "rich text" emails, so I decided to explore ...
- ggplot2 texts : Add text annotations to a graph in R software
http://www.sthda.com/english/wiki/ggplot2-texts-add-text-annotations-to-a-graph-in-r-software Instal ...
- web & Rich Text Editor
web & Rich Text Editor 富文本编辑器 http://www.wangeditor.com/ https://github.com/wangfupeng1988/wangE ...
- [r]Seven habits of effective text editing
Seven habits of effective text editing(via) Bram Moolenaar November 2000 If you spend a lot of time ...
- JSON Editor 中文文档
JSON Editor JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑.它完整支持JSON Schema 的版本3和版本4,并且它集成了一些流行 ...
随机推荐
- 微信图片生成插件,页面截图插件 html2canvas,截图失真 问题的解决方案
html2canvas 是一个相当不错的 JavaScript 类库,它使用了 html5 和 css3 的一些新功能特性,实现了在客户端对网页进行截图的功能.html2canvas 通过获取页面的 ...
- CentOS 6.8 安装 Python3
由于没有GCC无法编译安装Python3.6, 所以先安装GCC(yum install gcc) 下载地址:https://www.python.org/ftp/python/ 1 tar zxvf ...
- 智能指针scoped_ptr
对应C++11中的unique_ptr #include <iostream> #include <memory> class foo { public: foo() { st ...
- C#编程(四十五)----------格式字符串
格式字符串 1.格式化货币(跟系统的环境有关,中文系统默认格式化人民币,英文系统格式化美元) 案例: string str=string.Format("{0:C}",0.2); ...
- python测试开发django-12.models设置主键primary_key
前言 django的models新增数据库表时,如果不设置主键,会默认新增一个id为主键,如果我们想自己设置一个字段为主键,需加个参数primary_key=True 默认id主键 新增一张用户表,表 ...
- java如何直接返回excel到客户端
既然是web项目首先你得拿到响应才能向外部写出,你得拿到响应对象response,1.添加如下两行代码response.setContentType("application/vnd..ms ...
- Chrome快捷键大全
Chrome上我基本不怎么用快捷键,但是发现了切换标签页的快捷键后觉得十分好用,所以就分享如下. 切换上一个标签:Ctrl+PgUp 切换下一个标签:Ctrl+PgDn 打开新标签页:Ctrl+T 通 ...
- 无需SherlockActionbar的SlidingMenu使用详解(一)——通过SlidingMenu设置容器并解决滑动卡顿的问题
想必很多人都听过这个开源框架,一年前真的是风靡一时.只是它的配置较为繁琐,还需要sherlockActionbar的支持,我这里下载了最新的开源库,并且在实际用套用了AppCompat的官方库,这样就 ...
- TextView字体,行距,html格式,超链接,最大长度的设定
颜色,大小 <!-- 设置字体的大小,推荐用sp做单位:字体颜色以#开头 --> <TextView android:id="@+id/textView1" an ...
- Android系统版本与API等级对应关系表
从Android官网拷过来的,方便查阅... 官网地址:https://developer.android.com/guide/topics/manifest/uses-sdk-element.htm ...