Web editor DIY

zhaozj2021-02-17  46

Web editor Diy Dreamweaver, FrontPage and other web editing tools we have been familiar with it. But have you ever thought about making our own "web editor" for yourself.

WebBrowser controls from Delphi make us dream come true, and it is not difficult to achieve it.

First create a new project, drag a PageControl control on Form1, build 2 Tabsheet, TabSheet1 and TabSheet2. Drag and drop the richedit1 control on TabSheet1, drag and drop the WebBrowser1 control on TabSheet2. The basic properties of these controls are set to: tabsheet1: caption = 'html code' tabsheet1: caption = 'preview' richedit1: align = alclient webbrowser1: align = AlClient

Richedit is used to write HTML code, WebBrowser performs a visual preview for the code. The program provides a basic web template in the initialization phase, and we can write HTML code on this basis. The core code of the program is WebBrowser1.OleObject.Document.body.innerhtml: = shtml; this sentence, if you carefully discover, you must find more useful features. The drawings are example screenshots of this program run.

This program is implemented in Win98, Delphi5.0, IE5.0 environment. The complete code procedures are as follows: unit Unit1; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, OleCtrls, SHDocVw, ComCtrls; type TForm1 = class (TForm) PageControl1: TPageControl; TabSheet1: TTabSheet; TabSheet2: TTabSheet; WebBrowser1: TWebBrowser; RichEdit1: TRichEdit; procedure FormCreate (Sender: TObject); procedure TabSheet2Show (Sender: TObject); private {Private declarations} public {public declarations} end; var Form1: TForm1; Const lf = # 10 ; // Railing information {$ r * .dfm}

Procedure TForm1.FormCreate (Sender: Tobject); begin // Settings window title: CAPTION: = 'web editor DIY'; // Initialization WebBBRowser1.naviGate ('About: blank'); // Generate web code template: Richedit1 .Text: = '' lf ' </ title> <headl>' lf '<body>' LF LF '</ body>' lf ' </ Html> '; end; procedure TForm1.TabSheet2Show (Sender: TObject); var sHTML: string; begin sHTML: = RichEdit1.Text; WebBrowser1.OleObject.Document.body.innerHTML: = sHTML; end; end -. -------------------------------------------- Zhang Qing Email: Zhangking@263.net http://soft.why100000.com</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-28935.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="28935" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: <b>0.034</b>, SQL: <b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'pWfIfnW5vT6ThLTcSLbYCn4THK7P0JJWFvQ2A5NVf9X1m08SK0sWJRIW6ZnANSjB_2B9NJ5rIT_2B6_2F5Rvhe_2BUPkiA_3D_3D'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>