实战-Ueditor扩展二次开发
生活随笔
收集整理的這篇文章主要介紹了
实战-Ueditor扩展二次开发
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
第一部分 開發前期準備? ?
1、UEditor從1.4.1開始，添加對于二次開發的擴展支持。 ? ?Jeewx擴展二次開發采用1.4.3.1 Jsp 版本
2、上傳圖片設置 ? ?簡述: UE做的不夠靈活，不如老版本
? ?[1]?配置文件：ueditor/jsp/config.json ? ?? ? 說明: 所有項目配置訪問前綴
? ?[2]?引入UE依賴的JAR包 ? ?? ? 特殊說明：UE自帶的ueditor-1.1.2.jar有問題，經過修改源碼好用。
第二部分 擴展增加按鈕DEMO
??[1] customizeToolbarUIDemo.html頁面 <!DOCTYPE HTML>
<html>
<head>
? ? <title>完整demo</title>
? ? <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
? ? <!--UEditor-->
? ? <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
? ? <script type="text/javascript" charset="utf-8" src="../ueditor.all.min.js"> </script>
? ? <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
? ? <!--添加按鈕-->
? ? <script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>
? ? <style type="text/css">
? ?? ???.clear {
? ?? ?? ?? ?clear: both;
? ?? ???}
? ?? ???div{
? ?? ?? ?? ?width:100%;
? ?? ???}
? ? </style>
</head>
<body>
<div>
? ? <h1>二次開發demo</h1>
? ? <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
</body>
<script type="text/javascript">
? ? //實例化編輯器
? ? UE.getEditor('editor');
</script>
</html> ???[2] addCustomizeButton.js頁面
UE.registerUI('微信模板', function(editor, uiName) {
? ? //注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作
? ? editor.registerCommand(uiName, {
? ?? ???execCommand: function() {
? ?? ?? ?? ?alert('execCommand:' + uiName)
? ?? ???}
? ? });
? ? //創建一個button
? ? var btn = new UE.ui.Button({
? ?? ???//按鈕的名字
? ?? ???name: uiName,
? ?? ???//提示
? ?? ???title: uiName,
? ?? ???//添加額外樣式，指定icon圖標，這里默認使用一個重復的icon
? ?? ???cssRules: 'background-position: -500px 0;',
? ?? ???//點擊時執行的命令
? ?? ???onclick: function() {
? ?? ?? ?? ?//這里可以不用執行命令,做你自己的操作也可
? ?? ?? ?? ?editor.execCommand(uiName);
? ?? ???}
? ? });
? ? //當點到編輯內容上時，按鈕要做的狀態反射
? ? editor.addListener('selectionchange', function() {
? ?? ???var state = editor.queryCommandState(uiName);
? ?? ???if (state == -1) {
? ?? ?? ?? ?btn.setDisabled(true);
? ?? ?? ?? ?btn.setChecked(false);
? ?? ???} else {
? ?? ?? ?? ?btn.setDisabled(false);
? ?? ?? ?? ?btn.setChecked(state);
? ?? ???}
? ? });
? ? //因為你是添加button,所以需要返回這個button
? ? return btn;
});
第三部分 微信編輯擴展我的素材插件
[2]插件JS源碼
UE.plugins['weixin_template'] = function () {
? ? var me = this,thePlugins = 'weixin_template';
? ? me.commands[thePlugins] = {
? ?? ???execCommand:function (cmd,uiName) {
? ?? ?? ?? ?? ? var pos='WXNRQ';
? ?? ?? ?? ?if(uiName=='內容區'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXNRQ';//此處編碼要對應weixin數據字典項
? ?? ???}if(uiName=='關注引導'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXGZYD';
? ?? ???}else if(uiName=='標題'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXBT';
? ?? ???}else if(uiName=='原文引導'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXYWYD';
? ?? ???}else if(uiName=='分隔線'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXFGX';
? ?? ???}else if(uiName=='互推賬號'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXHTZH';
? ?? ???}else if(uiName=='我的樣式'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXWDYS';
? ?? ???}else if(uiName=='其他'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXQT';
? ?? ???}?
? ?? ?? ?? ?var dialog = new UE.ui.Dialog({
? ?? ?? ?? ?? ? iframeUrl:this.options.UEDITOR_HOME_URL + '/demo/weixin.html?type='+pos,
? ?? ?? ?? ?? ? name:thePlugins,
? ?? ?? ?? ?? ? editor:this,
? ?? ?? ?? ?? ? title: '微信圖文模板',
? ?? ?? ?? ?? ? cssRules:"width:740px;height:430px;",
? ?? ?? ?? ?? ? buttons:[
? ?? ?? ?? ?? ? {
? ?? ?? ?? ?? ?? ???className:'edui-okbutton',
? ?? ?? ?? ?? ?? ???label:'確定',
? ?? ?? ?? ?? ?? ???onclick:function () {
? ?? ?? ?? ?? ?? ?? ?? ?dialog.close(true);
? ?? ?? ?? ?? ?? ???}
? ?? ?? ?? ?? ? }]
? ?? ?? ?? ?});
? ?? ?? ?? ?dialog.render();
? ?? ?? ?? ?dialog.open();
? ?? ???}
? ? };
};
function weixinButton(editor,uiName){
? ? //注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作
? ? editor.registerCommand(uiName,{
? ?? ???execCommand:function(){
? ?? ?? ?? ?? ? try {
? ?? ?? ?? ?? ?? ?? ?editor.execCommand('weixin_template',uiName);
? ?? ?? ?? ?} catch ( e ) {
? ?? ?? ?? ?? ? alert('打開模板異常'+e);
? ?? ?? ?? ?}
? ?? ???}
? ? });
? ? //創建一個button
? ? var btn = new UE.ui.Button({
? ?? ???//按鈕的名字
? ?? ???name:uiName,
? ?? ???//提示
? ?? ???title:uiName,
? ?? ???//需要添加的額外樣式，指定icon圖標，這里默認使用一個重復的icon
? ?? ???cssRules :'background-position:-902px -45px;width: 63px!important;',
? ?? ???//點擊時執行的命令
? ?? ???onclick:function () {
? ?? ?? ?? ?//這里可以不用執行命令,做你自己的操作也可
? ?? ?? ???editor.execCommand(uiName);
? ?? ???}
? ? });
? ? //因為你是添加button,所以需要返回這個button
? ? return btn;
}
UE.registerUI('微信圖文模
1、UEditor從1.4.1開始，添加對于二次開發的擴展支持。 ? ?Jeewx擴展二次開發采用1.4.3.1 Jsp 版本
2、上傳圖片設置 ? ?簡述: UE做的不夠靈活，不如老版本
? ?[1]?配置文件：ueditor/jsp/config.json ? ?? ? 說明: 所有項目配置訪問前綴
? ?[2]?引入UE依賴的JAR包 ? ?? ? 特殊說明：UE自帶的ueditor-1.1.2.jar有問題，經過修改源碼好用。
第二部分 擴展增加按鈕DEMO
??[1] customizeToolbarUIDemo.html頁面 <!DOCTYPE HTML>
<html>
<head>
? ? <title>完整demo</title>
? ? <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
? ? <!--UEditor-->
? ? <script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
? ? <script type="text/javascript" charset="utf-8" src="../ueditor.all.min.js"> </script>
? ? <script type="text/javascript" charset="utf-8" src="../lang/zh-cn/zh-cn.js"></script>
? ? <!--添加按鈕-->
? ? <script type="text/javascript" charset="utf-8" src="addCustomizeButton.js"></script>
? ? <style type="text/css">
? ?? ???.clear {
? ?? ?? ?? ?clear: both;
? ?? ???}
? ?? ???div{
? ?? ?? ?? ?width:100%;
? ?? ???}
? ? </style>
</head>
<body>
<div>
? ? <h1>二次開發demo</h1>
? ? <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
</div>
</body>
<script type="text/javascript">
? ? //實例化編輯器
? ? UE.getEditor('editor');
</script>
</html> ???[2] addCustomizeButton.js頁面
UE.registerUI('微信模板', function(editor, uiName) {
? ? //注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作
? ? editor.registerCommand(uiName, {
? ?? ???execCommand: function() {
? ?? ?? ?? ?alert('execCommand:' + uiName)
? ?? ???}
? ? });
? ? //創建一個button
? ? var btn = new UE.ui.Button({
? ?? ???//按鈕的名字
? ?? ???name: uiName,
? ?? ???//提示
? ?? ???title: uiName,
? ?? ???//添加額外樣式，指定icon圖標，這里默認使用一個重復的icon
? ?? ???cssRules: 'background-position: -500px 0;',
? ?? ???//點擊時執行的命令
? ?? ???onclick: function() {
? ?? ?? ?? ?//這里可以不用執行命令,做你自己的操作也可
? ?? ?? ?? ?editor.execCommand(uiName);
? ?? ???}
? ? });
? ? //當點到編輯內容上時，按鈕要做的狀態反射
? ? editor.addListener('selectionchange', function() {
? ?? ???var state = editor.queryCommandState(uiName);
? ?? ???if (state == -1) {
? ?? ?? ?? ?btn.setDisabled(true);
? ?? ?? ?? ?btn.setChecked(false);
? ?? ???} else {
? ?? ?? ?? ?btn.setDisabled(false);
? ?? ?? ?? ?btn.setChecked(state);
? ?? ???}
? ? });
? ? //因為你是添加button,所以需要返回這個button
? ? return btn;
});
第三部分 微信編輯擴展我的素材插件
????[1]修改JSP頁面，引入插件JS
? ?? ???weixin/guanjia/newstemplate/weixinArticle-update.jsp
? ?
[2]插件JS源碼
UE.plugins['weixin_template'] = function () {
? ? var me = this,thePlugins = 'weixin_template';
? ? me.commands[thePlugins] = {
? ?? ???execCommand:function (cmd,uiName) {
? ?? ?? ?? ?? ? var pos='WXNRQ';
? ?? ?? ?? ?if(uiName=='內容區'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXNRQ';//此處編碼要對應weixin數據字典項
? ?? ???}if(uiName=='關注引導'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXGZYD';
? ?? ???}else if(uiName=='標題'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXBT';
? ?? ???}else if(uiName=='原文引導'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXYWYD';
? ?? ???}else if(uiName=='分隔線'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXFGX';
? ?? ???}else if(uiName=='互推賬號'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXHTZH';
? ?? ???}else if(uiName=='我的樣式'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXWDYS';
? ?? ???}else if(uiName=='其他'){
? ?? ?? ?? ?? ? pos? ?? ?? ???='WXQT';
? ?? ???}?
? ?? ?? ?? ?var dialog = new UE.ui.Dialog({
? ?? ?? ?? ?? ? iframeUrl:this.options.UEDITOR_HOME_URL + '/demo/weixin.html?type='+pos,
? ?? ?? ?? ?? ? name:thePlugins,
? ?? ?? ?? ?? ? editor:this,
? ?? ?? ?? ?? ? title: '微信圖文模板',
? ?? ?? ?? ?? ? cssRules:"width:740px;height:430px;",
? ?? ?? ?? ?? ? buttons:[
? ?? ?? ?? ?? ? {
? ?? ?? ?? ?? ?? ???className:'edui-okbutton',
? ?? ?? ?? ?? ?? ???label:'確定',
? ?? ?? ?? ?? ?? ???onclick:function () {
? ?? ?? ?? ?? ?? ?? ?? ?dialog.close(true);
? ?? ?? ?? ?? ?? ???}
? ?? ?? ?? ?? ? }]
? ?? ?? ?? ?});
? ?? ?? ?? ?dialog.render();
? ?? ?? ?? ?dialog.open();
? ?? ???}
? ? };
};
function weixinButton(editor,uiName){
? ? //注冊按鈕執行時的command命令，使用命令默認就會帶有回退操作
? ? editor.registerCommand(uiName,{
? ?? ???execCommand:function(){
? ?? ?? ?? ?? ? try {
? ?? ?? ?? ?? ?? ?? ?editor.execCommand('weixin_template',uiName);
? ?? ?? ?? ?} catch ( e ) {
? ?? ?? ?? ?? ? alert('打開模板異常'+e);
? ?? ?? ?? ?}
? ?? ???}
? ? });
? ? //創建一個button
? ? var btn = new UE.ui.Button({
? ?? ???//按鈕的名字
? ?? ???name:uiName,
? ?? ???//提示
? ?? ???title:uiName,
? ?? ???//需要添加的額外樣式，指定icon圖標，這里默認使用一個重復的icon
? ?? ???cssRules :'background-position:-902px -45px;width: 63px!important;',
? ?? ???//點擊時執行的命令
? ?? ???onclick:function () {
? ?? ?? ?? ?//這里可以不用執行命令,做你自己的操作也可
? ?? ?? ???editor.execCommand(uiName);
? ?? ???}
? ? });
? ? //因為你是添加button,所以需要返回這個button
? ? return btn;
}
UE.registerUI('微信圖文模
總結
以上是生活随笔為你收集整理的实战-Ueditor扩展二次开发的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最少换乘 第八届
- 下一篇： Interference Signal