文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

这款国外开源框架, 让你轻松构建自己的页面编辑器

前段时间我一直在设计和研究低代码搭建平台，也开源了几款可视化编辑器框架，最近在 github 上发现了一款非常强大的基于自然流布局的页面搭建框架 GrapesJS，接下来我就带大家摸索一下这款框架。...craft.js 更多可视化编辑器推荐 基本介绍 chrome-capture.gif 乍眼一看我们可能会认为它只是一个页面/HTML 编辑器，但它能做的不仅仅如此。...GrapesJS 附带的功能和工具使我们能够制作易于使用的编辑器。...Builder with MJML 那么至于这些搭建框架的实现原理, 我之前的文章中也做了很多剖析和设计, 大家如果感兴趣可以参考研究一下, 接下来我们看看如何安装和使用它....添加和定义组件 我们都知道网页编辑器需要提供非常丰富的组件, 这样能帮助用户更轻松的搭建页面, 同样 grapesjs 支持添加各种自定义组件, 也内置了常用的基础组件, 我们来看一个 demo :

1.2K20

分享一款国外开源可视化搭建框架, 轻松构建自己的网页编辑器

前段时间我一直在设计和研究低代码搭建平台，也开源了几款可视化编辑器框架，最近在 github 上发现了一款非常强大的基于自然流布局的页面搭建框架 GrapesJS，接下来我就带大家摸索一下这款框架。...乍眼一看我们可能会认为它只是一个页面/HTML 编辑器，但它能做的不仅仅如此。...GrapesJS 附带的功能和工具使我们能够制作易于使用的编辑器。...Builder with MJML 那么至于这些搭建框架的实现原理, 我之前的文章中也做了很多剖析和设计, 大家如果感兴趣可以参考研究一下, 接下来我们看看如何安装和使用它....添加和定义组件 我们都知道网页编辑器需要提供非常丰富的组件, 这样能帮助用户更轻松的搭建页面, 同样 grapesjs 支持添加各种自定义组件, 也内置了常用的基础组件, 我们来看一个 demo : chrome-capture

40210
您找到你想要的搜索结果了吗？
是的
没有找到

emlog 开发一个小插件（截取正文生成 xx 字摘要）的过程

，从而加快页面加载速度', '请关注后台首页的官方信息栏目，这里有最新的动态', '你可以把图片嵌入到内容中，让你的文章图文并茂', '你可以在写文章的时候为文章设置访问密码，只让你授予密码的人访问...我们的插件如果大了的话，也可以使用这个方式来为我们的很多插件内的 PHP 文件鉴权了。 动作函数 那么上面代码内容的插件，启用后的显示效果如何呢？打开后台，字显示到下图所示的位置了。...我们也可以扒一扒 emlog 的源码，在 admin/views/index.php 果真有这个“添加箱子”的代码。 图片 开始制作我们的插件！ 起名和内容策划 首先，起个名字，越短越好。。。... EOF; 好，显示效果如下。现在我们就可以在插件里对各个编辑器为所欲为了！！！ 图片 首先我们要获取文章编辑器的内容。...php } ?> 后台“仪表盘”初具雏形。 图片 获取数据 我们的 HTML 表单使用的 post 方法来发送数据，现在我们在 PHP 中获取。

1.2K10

iOS程序猿如何快速掌握 PHP,化身全栈攻城狮?

下载完成后,双击安装.安装成功后,选择 Mange Servers-->Start All启动本地服务器.启动成功后,在浏览器中输入 http://localhost,就可以看到一个默认的PHP页面....然后你还需要下载一款PHP编辑器,此时我使用Github的Atom编辑器.个人感觉界面很舒适,代码高亮看着也很舒服,你可以到这里下载: https://atom.io.下载完成后,点击安装即可....AppDelegate 入口文件 iOS应用通常是以 AppDelegate 文件作为编码的起始(准确说的是 main.m,在此不细究).在PHP中,你可以使用一个 index.php 文件作为你的 php...网上关于MVC中M的讨论,此处我选取的是最基本的一种: M专指用于存储某种数据的类的实例.它可以用于数据的格式化存储和传递,但不应包含发起网络请求和读写数据库等操作; 在本文讨论的Model中,我们进一步简化了...由于数组元素的值也可以是另一个数组，树形结构和多维数组也是允许的。" View: 一个显示HTML的实例.

1.8K71

Apriso开发葵花宝典之八Portal Session篇

页面Header 在DELMIA Apriso Portal中，页面Header总是会显示，因此不需要将其链接到Screen，在3DE平台中使用，也不能链接Header DELMIA Apriso桌面客户端如果需要显示...UI步骤： 必须有一个步骤向用户显示UI的各个部分: l ScreenInterface函数：使用HTML布局编辑器的结果(推荐使用) l 它可以包含PortalGenerateButtonList操作...l 它可以包含业务控件 l 附加功能(例如，从数据库加载数据以显示) 门户会话变量处理 门户会话是视图操作和业务逻辑操作之间交换的所有变量的占位符/容器，门户会话变量用于在不同操作之间交换数据，例如视图...因此，On Action操作Operation中可以以相同的方式处理普通变量和中间变量 作为最佳实践，可以考虑使用中间变量作为起点。只有在另一个屏幕上需要时才将它们更改为常规变量。...2、页面实例变量Screen Instance Variables 又是需要在Portal会话中存储一些特定于页面的信息时，您可以使用特殊的页面实例变量(例如，在每个屏幕上存储最后使用的网格配置文件Grid

15910

EditPlus中文版-具有 FTP、FTPS 和 sftp 功能的文本编辑器

虽然它可以作为一个很好的记事本替代品，但它还为网页作者和程序员提供了许多强大的功能。...HTML、PHP、Java、C/C++、CSS、ASP、Perl、JavaScript、VBScript、Python 和 Ruby on Rails 的语法高亮显示。...此外，它可以基于自定义语法文件扩展到其他编程语言。 用于预览 HTML 页面的无缝 Web 浏览器，以及用于将本地文件上传到 FTP 服务器的 FTP（也包括 sftp 和 FTPS）功能。...您可以使用一个命令在普通编辑窗口和十六进制查看器之间来回切换。 代码折叠 EditPlus 支持基于行缩进的快速便捷的代码折叠功能。您可以隐藏或显示带有缩进级别的代码行。...工具执行的输出可以在输出窗口中捕获，这样您就可以双击错误行来自动加载文件并将光标定位到该行。 自动完成 自动完成是一项节省时间的功能，可以将简短的缩写变成完整的字符串。

1.9K30

Ubuntu 18.04上安装Apache、MySQL、PHP、LAMP的完整教程

当你在浏览器看到上面页面的时候说明已经搞定了.你所看到的页面就是文件 /var/www/html/index.html 如果你想修改页面,直接修改它 /var/www/html/index.html...现在已经成功安装和配置了MySQL! 5.安装 PHP 让我们从更新存储库和使用apt安装PHP包开始。...在文档根目录中创建一个名为info.php的新文件 Ubuntu 18.04中默认的文档根目录是 /var/www/html/ 一旦确定了文档根目录的位置，就可以使用 vi 或 vim 或 gedit...(如果用不惯 vi, 建议使用可视化文本编辑器 gedit) 在本例中，我们将在/var/www/html/中创建一个新文件 $ sudo vi /var/www/html/info.php 写入 info.php...现在我们可以在浏览器中加载这个文件,通过在浏览器中输入: http://your_ip/info.php 我这里是 192.168.1.10 所以我在浏览器中输入的是 http://192.168.1.10

1.7K31

begin主题使用说明（详解教程）

第7条：自动缩略图改为使用timthumb.php裁剪本地图片 建议大家使用特色图像或者自定义栏目，制作单独的缩略图，调用尺寸比较小的图片，尽量不要使用自动获取文章中大图片作为缩略图，会严重影响页面加载速度...vid=w0015alvvrl&tiny=0&auto=0 注：自定义文章类型文章并不会显示在普通的最新文章列表中，并且这些文章在更换主题后也将看不见，包括后台也不可见。...SEO设置 首页描述及关键字，到主题选项中添加 正文，自动截取文章首段一定字数的作为描述，取标签为关键字。 也可以在文章编辑器下面的“文章设置”面板中，手动添加文章描述及关键词。...页面，需在编辑器下面的“页面设置”面板中添加描述及关键字。 分类页面，取分类描述作为该分类页面的description，分类名称为关键字。...文章摘要 编辑文章时可以在编辑器下面的“摘要”面板中输入一段摘要内容，用于显示在正文顶部，并同时显示在文章列表中，有利于SEO，摘要控制在180字符以内，多出的部分会被截断。

4.7K40

php中常见编码问题

在处理过程中需要实现 Unicode 和本地字符集的相互转换，甚或以 Unicode 为中间的两个不同本地字符集的相互转换。...数据库中的字符集编码问题 　　流行的关系数据库系统都支持数据库字符集编码，也就是说在创建数据库时可以指定它自己的字符集设置，数据库的数据以指定的编码形式存储。...解决各种应用的乱码问题 　　1) 使用 标签设置页面编码 　　这个标签的作用是声明客户端的浏览器用什么字符集编码显示该页面，xxx 可以为 GB2312、GBK、UTF-8(和 MySQL 不同，MySQL...因此，大部分页面可以采用这种方式来告诉浏览器显示这个页面的时候采用什么编码，这样才不会造成编码错误而产生乱码。...如果你是 web 程序员，建议给你的每个页面都加个header("content-type:text/html;charset=xxx")，这样就可以保证它在任何服务器都能正确显示，可移植性也比较强。

1.2K20

20款优秀的免费代码编辑器

其他全面的功能Atom在一个现代化的文本编辑器中预装了一些开发者可能期望/需要的功能 代码补全功能（也叫Snippets）也非常好用，你只需输入几个字符即可展开成各种常用代码，可以极大提高编程效率...Screem最初整个设计思路是根据GNOME风格的，但是在KDE环境下也能够很好地运行，它使在Linux操作系统中开发Web页面变得十分方便。...；支持宏的录制和使用；支持语法高亮和彩色显示，HTML，PHP，Pascal，JScript，VBScript，SQL，Perl，JAVA…；内置文件比较工具；支持宏的录制和使用；内置FTP工具；可以针对不同的文件类型设置对应的外部工具...Taco HTML Edit（Mac OS X）（免费试用） Taco HTML Edit是首屈一指的适用于Mac的HTML编辑和PHP编辑器。...作为一款HTML编辑器，Taco HTML Edit让用户可以迅速构建自己的网站。它是专门为Mac OS X设计的，有许多高级功能，包括拼写检查、实时浏览器预览、PHP预览、语法检查及更多特性。

5.4K30

三分钟让你了解什么是Web开发?

在web上存储信息的最基本和最长久的方式是在HTML文件中。为了更好的理解，让我们举一个公司发布价格信息的简单例子，这样它的供应商就可以下载并查看这个列表，它包含有价格和生效日期的产品。...假设我们想要改变背景颜色——我们必须为网站的每一个页面编辑HTML。 相反，我们可以使用CSS在一个位置存储我们的样式定义，并将每个HTML页面引用到该位置。...会话由惟一ID标识，其名称依赖于编程语言——在PHP中称为“PHP会话ID”。在客户端浏览器中，需要将相同的会话ID存储为cookie。 显示个人博客 我们的下一个项目是展示个人博客帖子。...我们需要根据所请求的blog post ID读取数据库中的数据，然后显示标题和内容字段的内容。 显示单个博客文章的高级伪代码: 从数据库读取数据以获取博客文章ID。...在我们的示例中，从数据库获取单个帖子的代码可以保存在这里。 View:视图可以是任何输出的信息表示。我们的HTML代码显示在这里，所以数据来自模型，但是HTML在视图中。

5.8K30

玩转谷歌优化（Google Optimize）

查询参数定向特定网页和网页集。谷歌优化可以检查查询参数，并在定向规则中使用它们。 数据层变量 你可以引用存储在数据层中的键值对来定向以替代引用JavaScript变量的定向。...下载优化扩展程序后，你可以通过点击其中一个变体来进入可视化编辑器。 编辑器加载时，你将看到你在设置实验时定义的编辑器页面。 如果你曾经使用过WYSIWYG编辑器，那这个界面看起来是比较直观的。...显示变体的下拉列表，选择一个变体后则会将其加载到编辑器中。 3. 设备测试。此下拉菜单显示可供选择的设备。选择其中一个设备将显示你的实验在该设设备上的预览模式。默认情况下是始终选择桌面。 4....我们的一位分析工程师Kristen Perko在关于悬停跟踪的文章中也介绍了CSS选择器。 10. 元素层次。 此菜单显示所选元素如何嵌入在其他HTML元素中。 11. 所选元素。...一旦选中，框架左上角的蓝色选项卡将显示已选择的元素，元素层次栏也将更改，以显示该元素如何嵌套在HTML中。

3.8K70

百度编辑器UEditor使用教程以及Linux系统上传图片502报错的解决方法

下载地址 二、精简 UEditor 编辑器 index.html是 UEditor 编辑器的示例 demo 文件，删除就可以 ueditor.all.min.js与ueditor.all.js内容相同，...ueditor.all.min.js是ueditor.all.js的压缩版，使用时加载ueditor.all.min.js即可，所以editor.all.js也可以删除，ueditor.parse.js...，避免在 ie 下有时因为加载语言失败导致编辑器加载失败，这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文 官方推荐把textarea...在显示页面代码是不会高亮显示的，需要在该页面加载一下 JS 和 CSS 文件 <script type="text/javascript" src="__STATIC__/ueditor/third-party...，所以这里不管是接收数据还是重新展示数据都需要使用 <em>PHP</em> 函数进行转义，提交的时候用 <em>PHP</em> 的htmlspecialchars函数进行转义，输出<em>页面</em>的时候执行htmlspecialchars_decode

1.7K40

NicEdit和Kindeditor配置

推荐两款富文本编辑器：NicEdit和Kindeditor 做过Web开发的朋友相信都使用过富文本编辑器，比较出名的CuteEditor和CKEditor很多人应该已经使用过，在功能强大的同时需要加载的东西也变得很多...，总共就一个JS文件和一张图片 使用也非常简单，只需在页面中添加简单的JS代码就可以将TextBox或是TextArea控件转换成富文本编辑器，代码如下 ...> 运行效果如下 官网中的版本为英文版，而且字体设置也只能设置英文字体，我对英文版本做了简单的汉化，并且增加了几种中文字体，如下图 中文本下载 KindEditor KindEditor是一套开源的...KindEditor使用JavaScript编写，可以无缝的与Java、.NET、PHP、ASP等程序接合。这个是官网上的介绍。...在我最近的一个需求中就有两点没有达到，最后选用了KindEdior。 1 TextBox的宽度只能设置成固定数值的宽度，如果设置成百分比，如100%，在有的浏览器中就会显示有问题。

83310

从零开发一款可视化搭建框架dooringx-lib

去年上线的可视化编辑器 H5-dooring 至今已有一年的时间，期间有很多热心的网友和大佬提出了非常多宝贵的建议，我们也在一步步实现中，以下是几个比较典型的低代码可视化平台需求: 出码能力(即源码下载功能...接入组件数据的能力) 布局能力(即用户可以选择不同的布局方案来设计页面) 常用功能集成(页面截图，微信分享，debug能力) 上面的这些功需求已经在 H5-dooring 陆续实现了，在我之前的文章中也有对应的技术分享...GrapesJS —— craft.js GrapesJS 是一款国外的页面编辑器框架(详细介绍可参考我之前的文章 这款国外开源框架, 让你轻松构建自己的页面编辑器) ，那么 craft.js 就是它的上层应用框架...我们可以在 dooringx 中试下这个demo。 另一种方式是可以专门写个提交按钮，固定了参数，以及部分规则，比如规定在页面中的所有表单都会被收集提交。...如果大家对可视化搭建或者低代码/零代码感兴趣，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端真正的技术。

1.2K10

php版本CKEditor 4和CKFinder安装及配置方法图文教程

根据你的需求选择自定义工具栏，选好之后点击Get toolbar config，把这个配置代码复制，备用 在CKEditor 4同级目录新建index.html，和myconfig.js ?...true; //编辑器中回车产生的标签 //config.enterMode = CKEDITOR_ENTER_BR; //是否使用HTML实体进行输出 //config.entities = true...</body </html 等标签 //config.fullPage = false; //是否忽略段落中的空字符 //config.ignoreEmptyParagraph = true; //在清除图片属性框中的链接属性时...是否同时清除两边的<a 标签 //config.image_removeLinkByEmptyURL = true; //一组用逗号分隔的标签名称，显示在左下角的层次嵌套中 //config.menu_groups...，单位：ms //config.menu_subMenuDelay = 400; //当执行“新建”命令时，编辑器中的内容 //config.newpage_html = ""; //当从word里复制文字进来时

2.7K10

Mirages主题帮助文档

启用云存储优化后，样式丢失了 / 样式错乱 / 页面错乱 该问题可能因为 云存储回源配置错误。 云存储中，镜像 / 回源的设置应该为博客的地址。...友链页 友链页的卡片样式可以在任何页面中启用，仅需按照下面的书写格式书写即可。 如果你的友链页 URL 为 /links.html 那么，必须要添加一个背景图才会显示标题，样式将和我博客上的一样。...Toolbar 默认显示两个按钮：RSS 和夜间模式切换。 自定义方式 配置 Toolbar 也很简单，只要一行一个配置即可。...另外： Toolbar 默认显示两个按钮：RSS 和夜间模式切换也可以设置隐藏，链接部分设置为hide即可。可以只隐藏一个，也可以全部隐藏。当可显示的按钮数量为0的时候即可隐藏 Toolbar。...若要配置此项，你可以参照主题目录下的 head_font.php 在/usr目录创建一份自己的 php 文件, 在此文件中定义 font-face, 然后在这里填入你新建的 php 文件的文件名(包括"

10K20

如何在Ubuntu 16.04中安装Linux，Nginx，MySQL，PHP（LNMP堆栈）

其后端数据存储在MySQL数据库中，动态处理由PHP处理。 在本教程中，我们将演示如何在Ubuntu 16.04服务器上安装LNMP堆栈。Ubuntu操作系统将负责其第一个需求。...您可以在Web浏览器中依次尝试每个步骤。 作为替代方案，您可以检查从网上的其他位置查看可访问的IP地址： $ curl -4 icanhazip.com 输入您在Web浏览器中收到的地址之一。...第三步：安装PHP进行处理 我们现在已经安装了Nginx来为我们的页面服务，也安装了MySQL来存储和管理我们的数据。但是，我们仍然没有任何可以生成动态内容的内容。针对这个，我们可以使用PHP。...在文本编辑器中打开一个名为info.php的新文件： $ sudo nano /var/www/html/info.php 在新文件中输入或粘贴以下行。...现在，您可以访问服务器的域名或公共IP地址，然后访问/info.php，在Web浏览器中访问此页面： http://server_domain_or_IP/info.php 您应该能看到以下PHP的网页

2K10

Ajax第三节

页面刚开始，没有任何一张图片。因此需要从通过ajax获取图片 2. 使用模版引擎将获取到的数据渲染到页面 3. 因为图片路径是从服务端获取的，加载需要时间, 渲染时需要设置宽高 4....点击加载更多, 请求下一页数据, 注意: 加载时，显示"正在加载中..."，并且要求不能重复发送ajax请求 5. 给window注册scroll事件，当触底时，需要动态的加载图片。...(规定: 最后一张图片开始显示在屏幕中时, 加载图片) 6. 当服务端返回图片数量为0时，提示用户没有更多数据。...AJAX 请求在浏览器端有跨域限制 虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。...比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。

1.4K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券