Javascript - ExtJs - 整合百度文章编辑器
ExtJs - 整合百度文章编辑器(ExtJs UEditor)
第一步:去官网下载最新版本的UEditor,UEditor下载。
第二步:在编辑器根目录创建一个Extjs-Editor.js,录入以下代码。
目录结构如下
Ext.define('App.ux.UEditor', {
extend: 'Ext.form.field.Text',
alias: ['widget.ueditor'],
//alternateClassName: 'Ext.form.UEditor',
fieldSubTpl: [
'<textarea id="{id}" {inputAttrTpl}',
'<tpl if="name"> name="{name}"</tpl>',
'<tpl if="rows"> rows="{rows}" </tpl>',
'<tpl if="cols"> cols="{cols}" </tpl>',
'<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
'<tpl if="size"> size="{size}"</tpl>',
'<tpl if="maxLength !== undefined"> maxlength="{maxLength}"</tpl>',
'<tpl if="readOnly"> readonly="readonly"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
// ' class="{fieldCls} {inputCls}" ',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' autocomplete="off">\n',
'<tpl if="value">{[Ext.util.Format.htmlEncode(values.value)]}</tpl>',
'</textarea>',
{
disableFormats: true
}
],
ueditorConfig: {},
initComponent: function () {
var me = this;
me.callParent(arguments);
},
afterRender: function () {
var me = this;
me.callParent(arguments);
if (!me.ue) {
//编辑器各项参数配置,参考UEditor.config.js
me.ue = UE.getEditor(me.getInputId(), Ext.apply(me.ueditorConfig, {
//编辑器高度,可在此处修改,但不要在表单配置中修改,否则滚动条出现后工具栏会消失
initialFrameHeight:320,
initialFrameWidth: '100%',
autoHeightEnabled: false,
enableAutoSave: false,
saveInterval:0
}));
me.ue.ready(function () {
me.UEditorIsReady = true;
}); //这块 组件的父容器关闭的时候 需要销毁编辑器 否则第二次渲染的时候会出问题 可根据具体布局调整
var win = me.up('window');
if (win && win.closeAction == "hide") {
win.on('beforehide', function () {
me.onDestroy();
});
} else {
var panel = me.up('panel');
if (panel && panel.closeAction == "hide") {
panel.on('beforehide', function () {
me.onDestroy();
});
}
}
} else {
me.ue.setContent(me.getValue());
}
},
//返回编辑器实例
getEditor:function(){
var me=this;
return UE.getEditor(me.getInputId());
},
setValue: function (value) {
var me = this;
if (!me.ue) {
me.setRawValue(me.valueToRaw(value));
} else {
me.ue.ready(function () {
me.ue.setContent(value);
});
}
me.callParent(arguments);
return me.mixins.field.setValue.call(me, value);
},
getRawValue: function () {
var me = this;
if (me.UEditorIsReady) {
me.ue.sync(me.getInputId());
}
v = (me.inputEl ? me.inputEl.getValue() : Ext.value(me.rawValue, ''));
me.rawValue = v;
return v;
},
destroyUEditor: function () {
var me = this;
if (me.rendered) {
try {
me.ue.destroy();
var dom = document.getElementById(me.id);
if (dom) {
dom.parentNode.removeChild(dom);
}
me.ue = null;
} catch (e) { }
}
},
onDestroy: function () {
var me = this;
me.callParent();
me.destroyUEditor();
}
});
第三步:引入以下文件 (前三个是Extjs必须的文件,后三个是编辑器要使用的文件)
<link href="../scripts/Extjs4.2/resources/css/ext-all-neptune.css" rel="stylesheet" />
<script src="../scripts/Extjs4.2/ext-all.js"></script>
<script src="../scripts/Extjs4.2/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="ExtJsEditor/utf8-net/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="ExtJsEditor/utf8-net/ueditor.all.min.js"> </script>
<script src="ExtJsEditor/Extjs-Editor.js"></script>
第四部:创建formPanel
Ext.onReady(function () { //展开树的按钮
Ext.create("Ext.button.Button", {
id:"treeBtn",text: "选择父栏目", style: "background:red;border:none;", icon: "../Image/expand.png",
handler: function () {
this.border = false;
var columnLabel=Ext.getCmp("columnLabel")
var treepanel = Ext.getCmp("dataTree");
if (!window.counter) { window.counter = 1; }
if (window.counter % 2 != 0) {
treepanel.show();//显示树
this.setIcon("../Image/expand.png");
}
else {
treepanel.hide();//隐藏树
this.setIcon("../Image/expand-down.png");
}
window.counter += 1;
} }); Ext.create("Ext.form.FormPanel", {
id:"articleForm",
renderTo: "articleEditor",
title: '写文章',
width: 1000,
style: "padding:10px;",
frame: false,
border: false,
buttonAlign: "center",
items: [
{
xtype: "fieldset",
layout: "column",
defaultType: "textfield",
style:"margin-top:10px",
width: 950,
border: false,
fieldDefaults: {
labelWidth: 40,
labelAlign: "left"
},
items: [
{ fieldLabel: "标 题", name:"contenTitle",width: 930, }
]
},
{
xtype: "fieldset",
layout: "column",
defaultType: "textfield",
style: "margin-top:10px",
width: 950,
border: false,
fieldDefaults: {
labelWidth: 40,
labelAlign: "left"
},
items: [
{ fieldLabel: "作 者", name: "contenAuthor", width: 930 }
]
},
{
xtype: "fieldset",
layout: "column",
defaultType: "textfield",
width: 950,
height:450,
border: false,
fieldDefaults: {
labelWidth: 40,
labelAlign: "left"
},
//编辑器
items: [
{
xtype: 'ueditor',
fieldLabel: '内 容',
id: "content",
//不要设置高度,否则滚动条出现后工具栏会消失
width: 930
}
]
}
],
buttons: [
{ text: 'OK', style: "margin-top:20px", handler: function () { } },
{ text: "Cancel", style: "margin-top:20px", handler: function () { form.reset(); } }
]
}); });
获取编辑器的值
Extjs-Editor.js中我定义了一个返回UEditor实例的方法,如下:
getEditor:function(){
var me=this;
return UE.getEditor(me.getInputId());
}
获取编辑器中的值
要设置编辑器的其它项或获取html值等操作,可参考编辑器根目录下的Index.html源码。这里给个例子,比如获取纯文本:
//找到表单面板中的表单,再find文本框,调用getEditor()即可获得编辑器实例,getContentTxt()获得纯文本
Ext.getCmp("articleForm").getForm().findField("content").getEditor().getContentTxt()
解决下拉框不显示选项的问题
打开编辑器根目录,搜索ueditor.config.js,打开该文件,查找被注释掉的zIndex,把值改为1100000同时去掉注释保存,问题解决。注:以下提供的包是已经更改过zIndex的文件。
Extjs-UEditor下载(已配置好Extjs-Editor.js和zIndex)
Javascript - ExtJs - 整合百度文章编辑器的更多相关文章
- JSP版(utf8编码)的Ueditor百度文章编辑器配置以及使用说明
二话不说,先上图: 我配置好的效果大致是这些功能:基本的文字编辑功能.图片上传功能.附件上传功能.百度/谷歌地图搜索截图.视/音频发布功能.这个插件是现今我用过觉得最舒服的编辑器,功能齐全强大,稍微修 ...
- yii2整合百度编辑器umeditor
作者:白狼 出处:www.manks.top/article/yii2_umeditor 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责 ...
- 帝国cms7.0整合百度编辑器ueditor教程
帝国cms7.0整合百度编辑器ueditor教程开始 1.根据自己使用的帝国cms版本编码下载对应的ueditor版本 下载地址 http://ueditor.baidu.com/website/do ...
- springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑)
springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...
- ThinkPHP整合百度Ueditor
文章来源:http://www.thinkphp.cn/code/267.html ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如: ...
- ThinkPHP整合百度Ueditor图文教程
ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOM ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- spring boot 整合 百度ueditor富文本
百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢spring boot 如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来spring boot整合百度富文本 ...
- 在ASP.NET Core中使用百度在线编辑器UEditor
在ASP.NET Core中使用百度在线编辑器UEditor 0x00 起因 最近需要一个在线编辑器,之前听人说过百度的UEditor不错,去官网下了一个.不过服务端只有ASP.NET版的,如果是为了 ...
随机推荐
- (贪心 线段不相交问题)codeVs 1214 线段覆盖
题目描述 Description 给定x轴上的N(0<N<100)条线段,每个线段由它的二个端点a_I和b_I确定,I=1,2,……N.这些坐标都是区间(-999,999)的整数.有些线段 ...
- okhttp添加自定义cookie
package cn.x.request; import java.util.ArrayList; import java.util.HashMap; import java.util.Lis ...
- Spring Boot学习记录02_构建SpringBoot工程_通过idea构建
1.通过idea新建工程 2.Initial Service Url指向的地址就是Spring官方提供的Spring Initializr工具地址 3.结合情况进行设置 4.这里我选择的版本是1.5. ...
- MySQL5.7基于binary log的主从复制
MySQL5.7基于binary log的主从复制 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 基于binary log 的复制是指主库将修改操作写入binary log 中, ...
- python mysql索引 优化神器explain 慢查询
##############总结########## 数据库中专门帮助用户快速找到数据的一种数据结构 类似于字典的目录的索引 索引的作用:约束和加速查找 工作原理: b+树形结构 最上层是树根,中间是 ...
- HDU - 6313 Hack It(构造)
http://acm.hdu.edu.cn/showproblem.php?pid=6313 题意 让你构造一个矩阵使得里面不存在四个顶点都为1的矩形,并且矩阵里面1的个数要>=85000 分析 ...
- JAVA中局部变量 和 成员变量有哪些区别
JAVA中局部变量 和 成员变量有哪些区别 1.定义的位置不一样<重点>***局部变量:在方法的内部成员变量:在方法的外部,直接写在类当中 2.作用范围不一样<重点>***局部 ...
- Windows下安装Mysql5.7
版本如下: Windows10 Mysql5.7.18 下载地址:https://dev.mysql.com/downloads/mysql/ 本人解压到了:D:\Program Files (x86 ...
- jsp查询修改
也是只帖代码....不讲解. 1.search.jsp <%@ page language="java" import="java.util.*" pag ...
- C# UpdatePanel加载完毕回调JS
如果 我们想UpdatePanel加载完成后做一些事情 需要使用js <script type="text/javascript"> //给ScriptManager的 ...