WebEditor需要支持从Word中复制粘贴公式,公式以图片方式保存,粘贴后公式图片自动上传到服务器中,然后返回HTML,自动添加到eWebEditor编辑器中。
前端支持VUE2,VUE3,JS,HTML5,WEB编辑器支持多种,一般常的富文本编辑器任意一个能够支持都行,比如ck,tinymce,ueditor,提供技术支持,提供远程技术支持指导,提供微信,手机,QQ,QQ群,邮箱等联系方式,提供文档教程,提供视频教程,提供长期技术支持服务
适用场景:已购买eWebEditor商业授权
适用版本:12.1
示例下载:
链接:https://pan.baidu.com/s/1r06XN5izJGD3GA2xu1jzCw
提取码:35wn
1.添加按钮
2.添加按钮说明
3.添加按钮事件
4.添加按钮图标
5.配置工具栏
http://localhost:8080/ewebeditor/admin/default.jsp
添加后的效果
6.将w.edge.js代码合并到w.js(w.layer.js)
7.初始化控件
注意:如果您的页面已经包含了jquery,则不要重复包含。
使用eWebEditor的接口:
$(function(){
WordPaster.getInstance({
PostUrl:’eWebEditor上传接口地址’,
FileFieldName:’uploadfile’,//字段名称为uploadfile
ImageMatch:’\”value=\”(http://[^”]+)\”‘//正则匹配value=”http://”
}).Load();
});
8.配置编辑器加载事件
9.配置ctrl+v快捷键
说明:会影响eWebEditor本身的粘贴功能,请谨慎使用。
最终效果
evExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExtreme JavaScript Controls v19.2全新面世,此版本增强图表控件、文件管理器功能等,欢迎下载最新版体验!
点击“了解更多”获取DevExpress DevExtreme v19.2正式版下载
现在您可以通过数据库或窗口小部件的UI将预定义(或自定义)图像与新图像形状相关联,当移动或调整形状时,图像将保持形状的大小及其位置。
新的形状类型——水平和垂直容器,允许您在"container"中组合其他形状,Web Diagram组件支持堆叠的容器,并带有扩展和折叠功能。
在v19.2中提供了用于形状设置的高级数据绑定选项,您可以将所有形状属性(包括形状和连接器样式、形状图像URL、位置和大小)绑定到数据库。
Diagram控件现在支持全屏模式,您可以添加相应的工具栏命令,也可以使用 'fullscreen'属性在Web应用程序中启用全屏模式。
只读模式可保护图表免于编辑操作,使用'readOnly'属性启用此图表选项。
当您激活Simple View模式时,Web Diagram将删除灰色的文档边框,并且其内容会完全占用可用的屏幕空间。
在此版本中,最终用户可以根据需要缩放图表。若要更改缩放级别,请使用Properties面板上的'Zoom Level'编辑器或CTRL +鼠标滚轮组合,选择'Auto Zoom' 复选框来使该图适配页面。
新API使您可以切换可见性并指定以下UI元素的内容:
v19.2引入以下UI元素来显示文件操作的进度和状态:
内置的Splitter控件使您可以调整文件管理器的导航面板大小。
v19.2增强了文件管理器的验证功能,现在您可以使用新的allowedFileExtensions选项指定允许的文件扩展名,新的upload.maxFileSize选项允许您指定最大文件大小(允许的最大大小)。
{
allowedFileExtensions: [ ".txt", ".xml", ".doc" ],
upload: {
maxFileSize: 2048000
},
permissions: {
upload: true
}
}
如果使用ASP.NET服务器端扩展,则可以启用以下服务器端验证:
public IActionResult FileSystem(FileSystemCommand command, string arguments) {
var config = new FileSystemConfiguration {
MaxUploadFileSize = 2048000,
AllowedFileExtensions = new[] { ".txt", ".xml", ".doc" },
AllowUpload = true
...
};
var processor = new FileSystemCommandProcessor(config);
var result = processor.Execute(command, arguments);
return result.GetClientCommandResult();
}
现在您可以允许用户下载文件,使用新的endpointUrl选项可以指定用于下载操作的服务器端处理程序端点。
{
fileProvider: new DevExpress.fileProviders.WebApi({
endpointUrl: "../api/filesystem"
}),
permissions: {
download: true
}
}
如果使用ASP.NET服务器端扩展,则可以允许用户下载文件,如下所示:
public object FileSystem(FileSystemCommand command, string arguments) {
var config = new FileSystemConfiguration {
AllowDownload = true
...
};
var processor = new FileSystemCommandProcessor(config);
var result = processor.Execute(command, arguments);
return result.GetClientCommandResult();
}
现在,您可以通过两个新选项(toolbar and contextMenu)来自定义文件管理器的工具栏和上下文菜单。
现在您可以实现一个自定义的File Provider,该File Provider使您可以将客户端文件管理器连接到任何自定义文件管理后端。
现在,您可以直接将文件上传到Azure、Amazon和其他云提供商。 使用FileUploader的uploadChunk和abortUpload回调。
在此版本中,您可以使用'FileProvider.getItemContent'方法在Web浏览器中获取二进制文件内容信息。
信小程序自 2017 年1月9日正式上线以来,就引起广泛关注。微信团队也不停地对小程序进行更新。微信小程序的优势十分明显,小程序触及了 PC网页,公众号,H5,APP 无法触及的地方,其无需安装,用完即走的理念能够满足用户需求且节省手机内存。站在小程序的拥有者的立场,其开发成本大大减小,同时可借助微信强大的流量入口,因而也降低了推广的难度。总的来说,微信小程序是一种全新的方式能够更好地在用户和服务中建立连接,并且可以在微信中便捷地获取和传播,具有不错的使用体验。
小程序采用了类似 React Native 和 Weex一样的解析技术,开发者可以编写一套程序在多种客户端运行,同时,相比于公众号、微商城具有更好的原生体验。全面开放申请以后,作为企业、政府、媒体、其他组织或者个人的开发者,都可以申请并注册小程序。小程序和微信的订阅号、服务号以及企业号是并行的体系,具有独立的注册以及发布流程。
1.1小程序接入流程
小程序的接入主要有4个步骤
(1)小程序注册:在微信公众平台官网首页(mp.weixin.qq.com)注册并提交注册信息、完善主体信息和管理员信息。
(2)完善小程序信息:完善小程序的基本信息如名称、头像及服务范围等。开发前需绑定开发者并获取APPID,以保证程序可以通过手机进行扫码测试。
(3)开发小程序:下载安装微信开发者工具,微信官方提供了一套完整的开发框架,开发者可以根据微信开发文档进行小程序的开发与调试。
(4)代码审核及发布:小程序开发完成后,不能够直接发布,需提交代码与开发配置信息提交审核,完成后尚可发布。
1.2微信Web开发者工具
官方公布的微信开发工具名为微信 Web 开发者工具,小程序前端开发框架是微信官方提供的框架。微信 Web 开发工具是一种基于Native System 系统层的框架,由于并不是运行在浏览器中,所以JavaScript 在 Web 中的一些诸如 Document,Window 等方法均不可使用,以往HTML5加载的时候在网络环境会有所限制,需要逐步加载HTML,CSS,JS,然后返回数据,最后染页面展现在浏览器中。用户总是需要等待很久,这样使得用户体验感大大降低。相比之下,小程序的两个线程:AppserviceThread 和 ViewThread 会同时进行、并行加载,甚至Appservice Thread 会更早执行当视图线程加载完,通知 Appservice,Appservice 会把准备好的数据用 setData 的方法返回给视图线程。小程序的这种优化策略,可以减少用户的等待时间,加快小程序的响应速度。
微信 Web 开发者工具区别于 H5的开发工具+浏览器 Device Mode 预览的模式,而是基于自己的开发者工具,可以实现同步本地文件+开发调试+编译预览+ 上传+发布等一整套流程。同时小程序自己开发了一套WXML标签语言和 WXSS样式语言,并非直接使用标准的 HTML5+CSS3。同时提供了很多原生 APP 的组件,之前在HTML5中需要模拟才能实现的功能,在小程序中可以直接调用组件来实现。
2.1框架
2.1.1小程序的文件结构
使用微信Web开发工具新建一个项目,框架会自动生成描述整体程序的APP和多个描述页面的 page文件。完整的小程序主要组成有:
一个入口文件:app.js
一个全局样式:app.wxss
一个全局配置:app.json
在页面 pages 下将页面安装文件夹划分,每个页面存在4个文件,分别是:
视图层:wxml文件、wxss 文件;
逻辑层:js 文件json 文件(页面配置,不是必须)
(1)app.js 是控制小程序逻辑的脚本文件,appjson 是小程序的配置文件,负责对小程序的全局配置。app.wxss 是全局样式表,作用范围是项目的每一个页面
(2)wxml是一种类似xm格式的语言,具有数据绑定、条件染、列表染自定义模板、事件回调和外部引用等功能。pagewxml主要通过使用基础组件构建页面结构。
wxss和css 格式的语言有相同之处,用于描述 wxml的组件样式,page.wxss的优先级比 app;json的Window 高。同时,微信为小程序新增了尺寸单位 rpx,rpx 可以根据屏幕宽度进行自适应,rpx 实际上就是系统级的 rem(把页面按比例分 750份Irpx=innerWidth/750)
pagejson 可以对独立定义的页面进行一些属性的设置,以满足实际需要config.json 可以设置一些个性化配置,当重新安装工具或者换一台电脑时,只要导入相同的代码包,开发工具就会自动恢复到开发这个项目时的个性化设置JS文件主要用于用户交互、响应用户点击等。在小程序中,通过JS 脚本来响应用户操作。
2.1.2了解小程序框架
微信小程序开发是基于框架的,从软件设计角度来说,框架是一个可复用的软件架构解决方案,规定了应用的体系结构,阐明软件体系结构中各层次间及其层次内部名组件间的毅力关系,责任分配和控制流程,表现为一组接口、抽象类以及实例间协作的方法,是指对某一指定应用领域中的应用系统的部分设计与实现子系统的整体结构。
小程序开发框架的核心是一个响应的数据绑定系统。分为视图层(View)和逻辑层(APP Service),小程序开发工具提供了视图层描述语言 WXML和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间设置了数据传输和事件系统,使得开发者能够很简单地将重心放在数据与逻辑上。处理事务逻辑的地方被称为逻辑层。在微信小程序中,所有 js 脚本文件的集合构成逻辑层。逻辑层与视图层相互配合,完成数据处理及接收事件反馈。框架的视图层由 WXML与WXSS编写,通过组件进行展现。对于小程序本身,.wxml 文件与.wxss 文件的集合构成了视图层,逻辑层处理数据之后,会发送给视图层用于与用户的交互,同时接收用户对视图层的反馈。视图层以给定的样式展现数据并反馈事件给逻辑层,数据展现是通过组件来进行的。视图的基本构成是组件。
2.2相关组件
微信提供了一系列基本组件,可以通过使用这些基本组件组合形成来进行小程序的开发。这里说明几个比较有特点的组件。
2.2 相关组件
微信提供了一系列基本组件,可以通过使用这些基本组件组合形成来进行小程序的开发。这里说明几个比较有特点的组件
(1)类似,是布局中最基本的一个组件,任何一种复杂的布局都可以通过嵌套组件来实现,是一个块级容器组件,默认 display: block,它是盒模型,在布局过程中一般推荐display:flex的写法
(2)是多行输入框,与HTML 中不同的是,它的值需要赋值给 value 属性,而不是被标签包裹,是一个自闭合标签,css动画对组件无效。
(3)是页面链接,和 HTML 中超链接标签一样,主要进行页面跳转控制。链接的内容可以是一个字、词或者一幅图片,通过点击内容实现页面的跳转
(4)主要用于绘制图形,其本身是一块无色透明区域,并没有绘制的能力,仅仅是图形容器,需要调节相关的应用程序编程接口(Application ProgrammingInterface,API)来完成实际的绘图任务。
2.3API及其配置
2.3.1 域名配置
根据小程序提供的组件,开发者可以根据需要设计 UI 界面,然而小程序的一些功能就要依赖框架提供的 API来实现。在使用 API时,首先要对小程序进行服务器域名的配置,每个小程序都需要设定通信的域名,小程序可以跟指定的域名进行网络通信。目前支持的有 HTTPS(request)、上传文件(uploadFile )、下载文件( downloadFile)和WebSocket 通信。
(1)wxrequest( Object ) :实现小程序与开发者的服务器实现数据交互request方法的作用是发起HTTPS请求,在小程序中,只能使用HTTPS请求而不能使用HTTP 请求,一个微信小程序同时只能有5个网络请求连接;
(2)WebSocket:request 方法是通过客户端主动向服务器发起请求,而服务器端响应返回数据来实现通信的目的。这种方法存在缺点,那就是服务器不能主动向客户端发送消息。因此要实现服务器和客户端之间的即时通信只能采用轮询的方法,而且request 的 Header 是十分长的,为了传输一个很小的数据会占用很多的宽带。针对这种情况,开发者可以通过小程序提供的 WebSocket 相关 API 创建 WebSocket,WebSocket 只需要服务器和浏览器通过 HTTP 协议进行一个握手的动作后单独建立一条传输控制协议(TransmissionControl Protocol,TCP)的通信通道就可以进行数据的传送,实现长连接以达到通信的目的。
出处 无线互联科技
原标题 微信小程序开发研究
作者 武思怡 解佺 张雨 侯秉昀
*请认真填写需求信息,我们会在24小时内与您取得联系。