Ext.js 组件:HTML编辑器

最新推荐文章于 2023-09-01 10:46:56 发布
最新推荐文章于 2023-09-01 10:46:56 发布
阅读量479 收藏
点赞数
分类专栏： 前端框架 extjs 文章标签： 前端框架 extjs 组件 html编辑器

描述

HTML编辑器：这个Ext JS UI小部件是创建一个html编辑器，以便用户可以编辑它在字体，颜色，大小等方面输入的信息。

语法

下面是创建HTML编辑器的简单语法

 

 Ext.create('Ext.form.HtmlEditor')

 

例

下面是一个简单的例子显示HTML编辑器

 

<!DOCTYPE html>
<html>
<head>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet" />
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
   <script type="text/javascript">
      Ext.onReady(function() {
         Ext.create('Ext.form.HtmlEditor', {
            width: 580,
            height: 250,
            renderTo: document.getElementById('editorId')
         });
      });
   </script>
</head>
<body>
   <div id = "editorId"></div>
</body>
</html>
qq_36987708
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
extjs的HtmlEditor在chrome中高亮文字
05-07
extjs 4.2 的HtmlEditor在chrome中高亮文字
Extjs之旅-HtmlEditor编辑器
想成为工程师的码农
06-11 337
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose
Extjs4中的Form之文本编辑器htmleditor的使用
jcy472578的专栏
11-26 3079
Ext.onReady(function(){ Ext.QuickTips.init(); Ext.create("Ext.form.Panel",{ title:'本地htmleditor实例', renderTo:'formDemo', bodyPadding:'5 5 5 5', height:400, width:600, frame:true, items
【ExtJs】ExtJs的富文本编辑器
编程记录，亲测有效
04-29 1万+
对于ExtJs表单中的多行文本框，本身就自带一个没有格式的textareafield。 如果要呈现一个带格式的文本编辑器给用户，ExtJs本身就自带一个htmlEditor。 一、基本目标 比如下图的带编辑器的文本框。 这个组件具有加粗、斜体、下划线，增加减少字号，颜色等功能，而且自动会对文本自动编码，无需担心跨站攻击，只要在后台防范好SQL注入就可以了。 如下图，即使在
Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现
zyjustin9的专栏
12-12 922
Extjs的HtmlEidtor富文本编辑器的使用和图片上传显示的实现 一.HtmlEditor增加上传图片的功能因为Extjs的富文本编辑器默认没有上传图片的功能，所以我们这里写一个js文件，继承Extjs的HtmlEditor，给其增加上传图片的功能。（在需要用的地方引入该js文件即可） StarHtmleditor.js： var HTMLEditor = Ext.extend(E...
HTML 编辑器的介绍及推荐
爱编程的鱼的博客
07-01 3519
另外它也是一个好用的 HTML 编辑器，除了可以颜色标记 HTML Tag （同时支持 C/C++、Perl、Java）外，还内建完整的 HTML 和 CSS1 指令功能，对于习惯用记事本编辑网页的朋友，它可帮你节省一半以上的网页制作时间，若你有安装 IE 3.0 以上版本，它还会结合 IE 浏览器于 EditPlus 窗口中，让你可以直接预览编辑好的网页（若没安装 IE，也可指定浏览器路径）。启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。
推荐几款好用的HTML编译器给大家！
热门推荐
时光的博客
05-29 3万+
HTML 编辑器推荐可以使用专业的 HTML 编辑器来编辑 HTML，菜鸟教程为大家推荐几款常用的编辑器：Notepad++：https://notepad-plus-plus.org/Sublime Text：http://www.sublimetext.com/HBuilder：http://www.dcloud.io/你可以从以上软件的官网中下载对应的软件，按步骤安装即可。接下来我们将为大家...
HTML 编辑器
梁辰兴的博客
03-08 573
当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。然后选择" 文件(F)->另存为(A) "，文件名为demo01.html（快捷键：ctrl+shift+s）接下来我们将为大家演示如何使用HBuilder工具来创建 HTML 文件，其他两个工具操作步骤类似。1.在 HBuilder 安装完成后，选择" 文件(F)->新建(N) ->html文件"2.输入 demo.html，选择default模板，单击创建按钮。你可以从以上软件的官网中下载对应的软件，按步骤安装即可。
13款web前端常用的富文本编辑器插件
最新发布
MR_Shi_it的博客
09-01 3110
前端 富文本编辑器插件
好不容易找的extjs可视化编辑器
03-07
前几天介绍过在2.X中可以使用extbuilder这个Eclipse插件来可视化开发ExtJs,今天又发现了一个在线版,唯一不同的是,在线版本只能导出json格式数据.最难得的是这一个项目也是采用ExtJs开发,并且全部代码开源. 设计器的主要功能: Full support of drag and drop for all Ext xtyped elements Eventhandler can be added containing JavaScript Advanced options to connect Json design to caller Embbeded documentation Backend support to load and save json designs External wizard support
Extjs3.2可视化编辑器
05-20
ExtJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力.ExtJS是一个用javascript编写,与后台技术无关的前端ajax框架.因此,可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中.要使用ExtJS,那么首先要得到ExtJS库文件,该框架是一个开源的,可以直接从官方网站下载,网址:http://extjs.com/products/extjs/download.php
Ext Js权威指南(.zip.001
09-26
6.1　ext js的选择器：ext.domquery / 215 6.1.1　选择器的作用 / 215 6.1.2　使用ext.query选择页面元素 / 215 6.1.3　基本选择符 / 223 6.1.4　属性选择符 / 229 6.1.5　css属性值选择符 / 234 6.1.6　伪类选择符 ...
带插图功能的ext html编辑器
08-08
ext自带的html编辑器是没有插图功能的，此js扩展了ext的编辑器组件，附带插图功能
CalendarMatrix:EXTJS 增强型日历组件，用于自定义样式的日历网格。 支持只读、范围选择、多选、单日期选择
06-21
CalendarMatrix 是一个 EXTJS 5.x 组件，它扩展了 Ext.picker.Date 以在 Sencha 的日期选择器组件的实现中提供难以置信的灵活性。 此组件将与早期版本的 EXTJS 一起使用，并稍作修改。 以下示例包含在演示和随附的 ...
带时分秒的EXT日期控件
08-10
/** * 此组件为带时分秒的日期控件，在原DateTimeField修改 * 此功能较以前版本增加功能 * 1，在GRID中使用时，增加单元格处于编辑状态时的初始化此控件值 * 2，增加操作日选择器时初始化时分秒功能 * 3，增加点击...
精通JS脚本之ExtJS框架.part1.rar
03-02
7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义...
extjs3 html编辑器,Ext 在线文字编辑器(htmleditor)...
weixin_42140710的博客
06-15 213
js文件:Ext.onReady(function() {Ext.QuickTips.init();var form = new Ext.form.FormPanel({labelAlign: 'right',labelWidth: 50,width: 600,frame: true,items: [{layout: 'form',labelAlign: 'top',items: [{xtype:...
ExtJs整合ckeditor文本编辑器
渊鸿的博客
10-18 1300
ExtJs整合ckeditor文本编辑器
EXT.js xtype : 'treefield' fieldLabel不显示
06-02
如果您在 Ext.js 中使用 xtype: 'treefield'，但是 fieldLabel 不显示，您可以尝试以下解决方法： 1. 确认您的 treefield 组件是否正确定义了 fieldLabel 属性，例如： ```javascript { xtype: 'treefield', fieldLabel: 'My Tree Field', ... } ``` 2. 确认您的 treefield 组件是否正确添加到了表单（form）中，例如： ```javascript Ext.create('Ext.form.Panel', { title: 'My Form', items: [{ xtype: 'treefield', fieldLabel: 'My Tree Field', ... }] ... }); ``` 3. 确认您的表单（form）是否正确添加到了显示界面的容器（container）中，例如： ```javascript Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), items: [{ xtype: 'form', title: 'My Form', items: [{ xtype: 'treefield', fieldLabel: 'My Tree Field', ... }] ... }] ... }); ``` 如果以上方法都无法解决问题，您可以尝试查看 Ext.js 的官方文档或者提供更多的代码和详细描述以便我更好地帮助您解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值