DeWeb进阶 :控件开发 --- 1 完成一个纯html的demo
最近随着DeWeb(以下简称DW)的完善,和群友的应用的深入,已经有网友开始尝试做DeWeb支持控件的开发了!
这太令人兴奋了!
作为DeWeb的开发者,感觉DeWeb的优势之一就是简洁的第三方控件扩展接口。
这几天在更新delphibbs:大富翁论坛,需要一个markdown控件,所以顺便写博客吧!
总的步骤:
1、完成一个纯html的demo, 部署在runtime中
2、根据纯html,改造成DW控件(这步写上去简单,但还需要有一定的DW经验,后面详细再说)
1、完成一个纯html的demo, 部署在runtime中
首先,什么是纯html?
也就是尽量本地运行,尽量去掉多余的库,一个HTML就可以看出效果
其次,如何“部署在runtime中”?
也就是把需要引用的库都放入Runtime目录中相应的位置,一般建议放到dist目录中,新建一个以下划线及控件名称为目录名的子目录,
下面是开发步骤
1.1 在runtime/dist目录中创建一个子目录,用于放置引用库文件,本例主要采用了editor.md库,所以子目录为:_editormd
1.2 创建或改造一个HTML,在网页中先实现功能
从github下载的editor.md-master文件中找到editor.md-master\examples\simple.html
先直接用浏览器打开,可以正常显示运行
另存为DW的source\runtime\md.html,再打开后,不能正常显示,用F12显示控制台,提示多个文件未找到
修改md.html中相应文件的引用位置,以及各引用文件引用其他文件的位置,尽量把所有的引用位置都改到dist/editormd/...中,直到可以正常显示运行为止
截止到上面,第1步就完成了。
修改后的md.html如下
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>Simple example - Editor.md examples</title>
<link rel="stylesheet" href="dist/_editormd/style.css" />
<link rel="stylesheet" href="dist/_editormd/editormd.css" />
<link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="layout">
<header>
<h1>Simple example</h1>
</header>
<div id="test-editormd">
<textarea style="display:none;">[TOC]
#### Disabled options
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;
#### Editor.md directory
editor.md/
lib/
css/
scss/
tests/
fonts/
images/
plugins/
examples/
languages/
editormd.js
...
</script>
</body>
</html>
这个文件其实修改的不多,
其他主要是editor.min.js等关于path的设置
一般边修改,边复制相应的库文件到runtime/_editormd目录
下面为本地运行的纯html效果
DeWeb进阶 :控件开发 --- 1 完成一个纯html的demo的更多相关文章
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
JavaScript日历控件开发 概述 在开篇之前,先附上日历的代码地址和演示地址,代码是本文要分析的代码,演示效果是本文要实现的效果代码地址:https://github.com/aspwebc ...
- C#ActiveX控件开发学习
一:C#ActiveX控件开发注意事项 1:C#开发的ActiveX控件只可在装有Framework的系统上才能用. 2:只有IE浏览器支持. 3:初次安装需要导入代码签名证书及其证书链的方式, ...
- asp.net控件开发基础(1)(转)原文更多内容
asp.net本身提供了很多控件,提供给我们这些比较懒惰的人使用,我认为控件的作用就在此,因为我们不想重复工作,所以要创建它,这个本身便是一个需求的关系,所以学习控件开发很有意思. wrox网站上有本 ...
- 利用ArcGIS Engine、VS .NET和Windows控件开发GIS应用
Dixon 原文 用ArcGIS Engine.VS .NET和Windows控件开发GIS应用 此过程说明适合那些使用.NET建立和部署应用的开发者,它描述了使用ArcGIS控件建立和部署 ...
- Asp.Netserver控件开发的Grid实现(三)列编辑器
以下是GridColumnsEditor的实现代码: GridColumnsEditor.cs using System; using System.Collections.Generic; usin ...
- ASP.NET自定义控件组件开发 第五章 模板控件开发
原文:ASP.NET自定义控件组件开发 第五章 模板控件开发 第五章 模板控件开发 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开发 第一章 第二篇 接 ...
- ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 第四章 组合控件开发CompositeControl 大家好,今天我们来实现一个自定义的控件,之前我们已经 ...
- ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡
原文:ASP.NET自定义控件组件开发 第四章 组合控件开发CompositeControl 后篇 --事件冒泡 CompositeControl 后篇 --事件冒泡 系列文章链接: ASP.NET ...
- C# Winform开发以及控件开发的需要注意的,被人问怕了,都是基础常识
我是搞控件开发的,经常被人问,所以把一些问题记录了下来!如果有人再问,直接把地址丢给他看. 一. 经常会有人抱怨Winform界面闪烁,下面有几个方法可以尽可能的避免出现闪烁 1.控件的使用尽量以纯色 ...
随机推荐
- php超时报错: Maximum execution time of 300 seconds exceeded
php.ini里max_execution_time = 30,原因是这个脚本执行时间太小了,增加一些,或者改成0不限制 可以增加代码: set_time_limit(0);
- css定位:p:nth-child(n)
p:nth-child(n) 定位p标签下的第一个元素,下标从1开始. 首先是一个标签下有多个相同的元素. 如index_service_cnt js_service_list下有多个class=&q ...
- jmeter简单的压测案例——访问百度并发5,持续请求15
好记性不如烂笔头,还是记记吧. jmeter压测的指标有很多,先从简单的入手,下一章节再讲解jmeter组件的作用. 需求是:访问百度的压测指标是:10s内并发5,持续15次请求.那么需要设置以下几点 ...
- 『PyTorch』矩阵乘法总结
1. 二维矩阵乘法 torch.mm() torch.mm(mat1, mat2, out=None),其中mat1(\(n\times m\)),mat2(\(m\times d\)),输出out的 ...
- 03-Jwt在.netcore中的实现
1)jwt的加密解密过程 jwt验证的核心就是加密解密的过程,掌握了这个过程,也就掌握了jwt的原理.jwt的三部分中,header和payload是明文的,能够直接读出来,签名Signature部分 ...
- MyBatis 面试复习整理
MyBatis MyBatis 是一款优秀的ORM(对象关系映射)框架,可以通过对象和数据库之间的映射,将程序中的对象自动存储到数据库中.它内部封装了 JDBC ,使开发者只需要关注 SQL语句本身, ...
- MySQL MHA 运行状态监控
一 项目描述 1.1 背景 MHA(Master HA)是一款开源的 MySQL 的高可用程序,它为 MySQL 主从复制架构提供了 automating master failover 功能.MHA ...
- FastAPI 学习之路(九)请求体有多个参数如何处理?
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) FastAPI 学习之 ...
- mysql select语句查询流程是怎么样的
select查询流程是怎么样的 mysql select查询的数据是查询内存里面,如果没有查询的数据没有在内存,就需要mysql的innodb引擎读取磁盘,将数据加载的内存后在读取.这就体现了,mys ...
- 从网络通信的演进过程彻底搞懂Redis高性能通信的原理(全网最详细,建议收藏)
我们一直说Redis的性能很快,那为什么快?Redis为了达到性能最大化,做了哪些方面的优化呢? 在深度解析Redis的数据结构 这篇文章中,其实从数据结构上分析了Redis性能高的一方面原因. 在目 ...