ExtJS4.2學習(19)在線編輯器Ext.form.HtmlEditor

時間 2020-01-19

標籤 extjs4.2 extjs 學習在線編輯器 ext.form.htmleditor ext form htmleditor 欄目 HTML 简体版

原文原文鏈接

不知道你們發覺這樣的問題沒，之前寫Extjs3.X的時候，Eclipse在複製粘貼寫代碼的時候一點不卡，在4.2的時候，用eclipse寫就會常常卡死的現象。下午研究了一下午，我可不想在寫代碼的時候一直被卡死，我就找到了新的IDE工具intellij idea (關於此工具的介紹能夠看我這篇文章http://www.shuyangyang.com.cn/jishuliangongfang/Javabiancheng/2013-12-04/186.html)，javascript

下載好了以後發現使用起來好處多多，寫Extjs4.2不卡了，腰不酸了，腿也不疼了，呵呵。。。最主要還有提示。css

迴歸主題，今天看下在線編輯器控件，控件的屬性以下：html

Ext.form.field.HtmlEditor主要配置項java

配置項	類型	說明
createLinkText	String	建立鏈接提示框中默認提示信息
defaultLinkValue	String	建立鏈接的默認值，默認爲http://
defaultValue	String	編輯器默認值
enableAlignments	Boolean	是否啓用左中右對齊按鈕，默認爲true
enableColors	Boolean	是否啓用前景色、背景色選擇按鈕，默認爲true
enableFont	Boolean	是否啓用選擇字體按鈕，默認爲true
enableFontSize	Boolean	是否啓用增大縮小字體按鈕，默認爲true
enableFormat	Boolean	是否啓用粗體、斜體、下劃線按鈕，默認爲true
enableLinks	Boolean	是否啓用建立鏈接按鈕，默認爲true
enableLists	Boolean	是否啓用列表按鈕，默認爲true
enableSourceEdit	Boolean	是否啓用源代碼編輯按鈕，默認爲true
fontFamilies	Array	字體數組
buttonsTips	Object	編輯器工具欄中按鈕的提示信息配置對象組合，用來自定義工具欄提示消息

看下效果圖：數組

主要代碼以下：eclipse

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Extjs4.2</title>
<link href="../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css" rel="stylesheet">
<script src="../../ExtJS4.2/ext-all.js"></script>
<script src="../../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
    var htmlEditor = new Ext.form.HtmlEditor({
        fieldLabel:'在線編輯器',
        labelSeparator: "：",
        createLinkText: "建立超連接",
        defaultLinkValue: "http://",
        enableAlignments: true,
        enableColors: true,
        enableFont: true,
        enableFontSize: true,
        enableFormat: true,
        enableLinks: true,
        enableLists: true,
        enableSourceEdit: true,
        fontFamilies: ["宋體", "隸書", "黑體"]
    });
    var form = new Ext.form.FormPanel({
        title: '表單輸入控件演示',
        width:500,
        frame: true,
        items: [htmlEditor],
        renderTo: 'form'
    });
});
</script>
</head>
<body>
<h1>個人ExtJS4.2學習之路</h1>
<hr />
做者：束洋洋
開始日期：2013年12月24日 21:39:47
<h2>深刻淺出ExtJS之在線編輯器Ext.form.HtmlEditor</h2>
<div id="form"></div>
</body>
</html>

連載中，請你們繼續關注！本文出自個人我的網站思考者日記網編輯器