深圳专业网站建设技术,网站开发的整个流程,佛山做外贸网站哪家好,360建站模板使用 Delphi 的 WebBroker 框架写 Web Server#xff0c;需要一个前端的富文本编辑器。
评估了好几个#xff0c;最后选择 Quill 这个开源的。
官方地址#xff1a;Quill - Your powerful rich text editor
把前端代码#xff0c;存储为一个单独的文本文件#xff0c;方…使用 Delphi 的 WebBroker 框架写 Web Server需要一个前端的富文本编辑器。
评估了好几个最后选择 Quill 这个开源的。
官方地址Quill - Your powerful rich text editor
把前端代码存储为一个单独的文本文件方便随便哪个页面需要的时候可以使用。相当于封装为一个独立的对象方便代码重用。
Quill 编辑器的代码如下 !-- quill 编辑器的封装 --
script srchttps://cdn.jsdelivr.net/npm/quill2.0.2/dist/quill.js/script
link hrefhttps://cdn.jsdelivr.net/npm/quill2.0.2/dist/quill.snow.css relstylesheetstyle.edit_container {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}.ql-editor{height:400px;}/styleform idmyForm actionContentUpdate methodpostdiv ideditor/divinput typehidden namedelta iddeltaInputinput typehidden namehtml idhtmlInputinput typesubmit valueSubmit/formscriptconst quill new Quill(#editor, {modules: {toolbar: [[{ header: [1, 2, false] }],[bold, italic, underline],[image, code-block],],},theme: snow});document.getElementById(myForm).addEventListener(submit, function() {// 获取 Quill 编辑器的内容const delta JSON.stringify(quill.getContents());const html quill.root.innerHTML;// 将内容放入隐藏输入框中document.getElementById(deltaInput).value delta;document.getElementById(htmlInput).value html;});/script
把上述代码保存为文本文件QuillEditor.txt
然后我们来做一个测试用的 html 文件代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleQuill Form Submission/title
/head
body#Editor
/body
/html
这个文件保存为 index.html
这个文件里面的 #Editor 是给 WebBroker 的 PageProducer 自动替换的标记。Delphi 的后台程序会将这个标记替换为前面的 QuillEditor.txt 的内容。
Delphi 的代码
首先是如何输出页面
在 Delphi 里面创建一个 WebBroker 工程
选择 StandAlone 模式这样方便调试。
在这个工程里面Delphi 自动帮我们创建了一个 Web 服务器端的核心框架TWebModule1;
拖一个 PageProducer1 到 TWebModule1 上面。设置它的属性HTMLFile 为 index.html
这里的 index.html 就是前面的那个简单的页面框架。这个文件只要放在程序的相同目录下运行时 PageProducer1 就会自动加载它。当然也可以指定绝对路径比如D:\MyHTML\index.html;
然后选中 PageProducer1 然后把属性面板的页标签切换到 Events可以看到 PageProducer1 只有一个事件OnHTMLTag双击这个事件Delphi IDE 自动帮我们创建事件的代码框架。在这里我们写代码如下
procedure TWebModule1.PageProducer1HTMLTag(Sender: TObject; Tag: TTag;const TagString: string; TagParams: TStrings; var ReplaceText: string);
varSL: TStringList;
beginSL : TStringList.Create;trySL.LoadFromFile(QuillEditor.txt);if TagString Editor thenReplaceText : SL.Text;finallySL.Free;end;
end;
上述代码的解释
PageProducer1 在加载 index.html 的时候会触发上述事件。我们在上述事件里面写代码首先判断标记Editor这个标记就是前面我们写在 index.html 里面的那个 #Editor
ReplaceText 则是替换那个标记的内容。这里我们用前面保存的 Quill Editor 的那个文件的内容来替换掉 Editor 这个标记。这里会将包括尖括号在内的整个 #Editor 都替换掉。最终输出的页面内容就是包含 QuillEditor.txt 的内容的一个完整 HTML 页面。
再然后双击 TWebModule1 这个界面窗口弹出 Editing WebModule1.Actions 对话框里面已经有一个默认的 Action选中它然后在属性面板里面把它的 Producer 属性下拉选择为 PageProducer1这样操作的目的是浏览器访问服务器时触发这个 Action这个 Action 最终会把它绑定的 PageProducer1 的内容输出给浏览器。
到此输出一个包含 Quill Editor 的页面制作完毕。
服务器端接收浏览器提交的内容
在前面提到的 Editing WebModule1.Actions 对话框里面鼠标右键下拉菜单Add添加一个 Action。
选择这个 Action设置它的属性 Path 为ContentUpdate
切换属性面板到事件它只有一个 OnAction 事件双击Delphi IDE 自动产生事件代码框架在里面写代码如下 procedure TWebModule1.WebModule1WebActionItem1Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
varS: string;RequestBody: string;Delta, Html: string;JSONValue: TJSONObject;SL: TStringList;
beginS : Request.ContentFields.Values[html];SL : TStringList.Create;trySL.Text : S;SL.SaveToFile(abcd.txt);finallySL.Free;end;Response.SendRedirect(Show);Handled : True;
end; 上述代码解释
这个 Action 的 Path 之所以设置为 ContentUpdate是因为页面上的 Quill Editor 里面的代码
form idmyForm actionContentUpdate methodpost
页面代码指明了提交给服务器的路径是 ContentUpdate因此 Delphi WebBroker 服务器里面的这个 Action 的 Path 为 ContentUpdate 的 Action 事件就会被触发。
上述代码中
S : Request.ContentFields.Values[html];
这里的 html 是对应的 Quill Editor 的 HTML 代码里面的 name 部分的名称
input typehidden namehtml idhtmlInput
假设把上述页面代码的 namehtml 改为 html2那么对应的服务器端 Delphi 的代码就应该改为
S : Request.ContentFields.Values[html2];
最终Delphi 把来自浏览器提交的编辑器的内容保存为一个文本文件 abcd.txt
保存完编辑器提交的内容后让浏览器跳转到 show 这个路径去
Response.SendRedirect(Show);
假设浏览器访问的是 http://127.0.0.1:8080/ 就会跳转到 http://127.0.0.1:8080/show
为服务器端增加 Show 这个路径的处理方法
在前面提到的 Editing WebModule1.Actions 对话框里面鼠标右键下拉菜单Add添加一个 Action。
选择这个 Action设置它的属性 Path 为Show
选中这个 Action切换属性面板到 Events双击它的 OnAction 事件IDE 创建事件代码框架写代码如下
procedure TWebModule1.WebModule1WebActionItem2Action(Sender: TObject;Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
beginvar SL : TStringList.Create;trySL.LoadFromFile(abcd.txt);Response.Content : SL.Text;finallySL.Free;end;
end;
上述代码解释
这里我们加载前面保存的浏览器提交过来的 Quill Editor 的内容也就是保存的 abcd.txt然后把这个内容作为 Response 返回给浏览器。
如果在浏览器的地址栏里面输入http://127.0.0.1:8080/show 就会直接触发服务器端的这个事件方法浏览器页面上就能看到之前我们在 Quill Editor 里面输入的内容。
比较有意思的是图片
在浏览器端的富文本编辑器里面插入图片通常是要上传图片然后把 URL 插入到编辑器里面。但是这样又会增加不少代码工作。比如服务器端需要有个专门的 Action 来接收上传的图片文件把图片文件保存到 Web 服务器的某个目录里面再返回 URL在前端需要写不少 JavaScript 代码用来上传图片获得 URL然后把 URL 插入到编辑器的对应位置。等等很麻烦。
对于 Quill Editor 来说前面我给出的代码用户点击它的工具栏的图片按钮选择本地硬盘的图片文件然后它会自动把图片贴进编辑框的正确位置完成图文混排。点击提交按钮后整个文本编辑框的内容包括图片数据一起提交给服务器。这里的图片数据是编码为 Base64 的并且格式复合 HTML 的标准的页面嵌入BASE64图片的格式不完整但能体现这一点的代码片段数据如下
srcdata:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/2wBDAAYEBQYF
因此服务器端获得的完整的字符串就是编辑器的完整内容包含图片。把这个字符串保存后作为文本输出给浏览器图片也能完整地显示出来。
这样一来图片和文字的混合编辑最终输出的就是一段字符串。在前端不需要写额外的 JavaScript 代码后端也不需要额外的代码来处理图片文件的保存。
在实际的项目里面后端可以把前端提交的字符串包含图片和格式化的文字直接原本保存到数据库的字段里面。需要显示时直接从数据库的字段里面读取内容输出给页面。
One more thing
前面提到的服务器端加载 Quill Editor 的代码使用了 TStringList重复一下代码片段
procedure TWebModule1.PageProducer1HTMLTag(Sender: TObject; Tag: TTag;const TagString: string; TagParams: TStrings; var ReplaceText: string);
varSL: TStringList;
beginSL : TStringList.Create;trySL.LoadFromFile(QuillEditor.txt);if TagString Editor thenReplaceText : SL.Text;finallySL.Free;end;
end;
应该把上述代码封装为一个对象需要的地方直接调用对象就好了。避免每个不同的 WEB 项目里面都要重复写上述代码。封装为对象就可以实现代码重复使用。
代码如下
unit UQuillEditor;interfaceusesSystem.SysUtils, System.Classes, System.IOUtils;typeTQuillEditor classprivatepublicclass function GetHtml(const QuillEditorFileName: string): string;end;implementation{ TQuillEditor }class function TQuillEditor.GetHtml(const QuillEditorFileName: string): string;
varSL: TStringList;
beginif (not FileExists(QuillEditorFileName)) then raise Exception.Create(文件不存在 QuillEditorFileName);SL : TStringList.Create;trySL.LoadFromFile(QuillEditorFileName);Result : SL.Text;finallySL.Free;end;
end;end.结论
Quill Editor 作为一个前端的开源的富文本编辑器用起来还是很方便的。后端使用 Delphi WebBroker 框架来开发可以简单地封装为一个文本文件和一个简单的 Delphi 对象在需要的地方就可以直接使用了。
