免费软件app下载苏州百度快速排名优化
用户有自己的文章格式,要求复制或者粘贴进来的文章能够一键排版,不需要手动调试
这个需求的话咱们就需要自己去注册一个事件啦,这里我没有修改源码,而是在编辑器初始化之后给他注册了一个事件
我的工具列表变量
vue组件中data中定义的变量
data(){return {aiList: [{name:'AIwrite',className:'edui-for-ai_writing',title:'一键排版',httpType:'AI_WRITING_ADDRESS'},// {name:'AIvoice',className:'edui-for-ai_voice',title:'AI语音',httpType:'AI_VOICE_ADDRESS'},// {name:'AIdraw',className:'edui-for-ai_AIdraw',title:'AI绘图',httpType:'AI_DRAWING_ADDRESS'},// {name:'AIvideo',className:'edui-for-AIvideo',title:'AI视频',httpType:'AI_VIDEO_ADDRESS'},// {name:'AIzhineng',className:'edui-for-AIzhineng',title:'AI智能',httpType:'AI_BRAINPOWER_ADDRESS'},// {name:'AIroom',className:'edui-for-AIroom',title:'AI实验室',httpType:'AI_LABORATORY_ADDRESS'},// {name:'AImore',className:'edui-for-AImore',title:'更多',httpType:'AI_MORE_ADDRESS'},]}
}
registerUIYiJian(){ //当window对象已经挂在的ueditor的实例时调用此方法,在iframe.css中去调整自定义按钮的样式let _this = thiswindow.UE.registerUI( _this.aiList[0].name ,function(editor,uiName){var btn = new UE.ui.Button({name:'btn-dialog-' + uiName,className:_this.aiList[0].className,title:_this.aiList[0].title,onclick:function () {// AIwrite = window.open('https://www.baidu.com')_this.httpRequest(_this.aiList[0].httpType)}});return btn;},undefined);},
httpRequest中的逻辑主要是对稿件样式进行处理,添加自己的自定义类名之后,然后去iframe.css加上自己的样式即可
// 一键排版功能oneClickLayout(){console.log(this.editor,'当前的编辑器内容')if(this.editor.body.childNodes.length > 0){// 说明当前文章有内容for (let i = 0; i < this.editor.body.childNodes.length; i++) {console.log(this.editor.body.childNodes[i],'当前的p标签有哪些元素')// 获取标签内容重新组装html结构填充到编辑器中this.editor.body.childNodes[i].classList.remove()this.editor.body.childNodes[i].removeAttribute('style')// 给最外层的标签加上我的目标样式this.editor.body.childNodes[i].classList.add('mystyle')this.clearCssStyle(this.editor.body.childNodes[i])}} },// 递归去除所有标签的行内样式和类名clearCssStyle(node){if(node.childNodes.length == 0) return for (let i = 0; i < node.childNodes.length; i++) {if('classList' in node.childNodes[i]){node.childNodes[i].classList.remove()}if('style' in node.childNodes[i]){node.childNodes[i].removeAttribute('style')}}},
我移除了编辑器所有的类名和行内样式,增加了mystyle类名
一键排版就完成了 。
此外我还注册过其他功能,业务代码的话其实没啥好说的,主要是注册的方法的使用,比如之前还注册过一些ai的功能以及和135编辑器的一些交互
/** @description : write something* @Author : snoop-dog* @Date : 2021-12-06 11:39:53* @LastEditors : snoop-dog* @LastEditTime : 2021-12-06 14:15:39* @FilePath : 135editor.js*/UE.registerUI('135editor',function(editor,uiName){// var dialog = new UE.ui.Dialog({// iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html',// cssRules:"width:"+ parseInt(document.body.clientWidth*0.9) +"px;height:"+(window.innerHeight -50)+"px;",// editor:editor,// name:uiName,// title:"135缂栬緫鍣�"// });// dialog.fullscreen = false;// dialog.draggable = false;var editor135;function onContentFrom135(event) {if (typeof event.data !== 'string') {if(event.data.ready) {editor135.postMessage(editor.getContent(),'*');}return;};if(event.data.indexOf('<') !== 0) return;editor.setContent(event.data);editor.fireEvent("catchRemoteImage");window.removeEventListener('message', onContentFrom135);}var btn = new UE.ui.Button({name:'btn-dialog-' + uiName,className:'edui-for-135editor',title:'135编辑器',onclick:function () {// dialog.render();// dialog.open();// 鐢变簬鐧诲綍瀛樺湪璺ㄥ煙闂锛岃浣跨敤濡備笅鏂瑰紡璋冪敤135缂栬緫鍣�editor135 = window.open('https://www.135editor.com/simple_editor.html?callback=true&appkey=')window.removeEventListener('message', onContentFrom135);window.addEventListener('message', onContentFrom135, false);}});return btn;
},undefined);
// ai写作
var aiList = [{name:'AIwrite',className:'edui-for-ai_writing',title:'AI写作',httpType:'AI_WRITING_ADDRESS'},{name:'AIvoice',className:'edui-for-ai_voice',title:'AI语音',httpType:'AI_VOICE_ADDRESS'},{name:'AIdraw',className:'edui-for-ai_AIdraw',title:'AI绘图',httpType:'AI_DRAWING_ADDRESS'},{name:'AIvideo',className:'edui-for-AIvideo',title:'AI视频',httpType:'AI_VIDEO_ADDRESS'},{name:'AIzhineng',className:'edui-for-AIzhineng',title:'AI智能',httpType:'AI_BRAINPOWER_ADDRESS'},{name:'AIroom',className:'edui-for-AIroom',title:'AI实验室',httpType:'AI_LABORATORY_ADDRESS'},{name:'AImore',className:'edui-for-AImore',title:'更多',httpType:'AI_MORE_ADDRESS'},
]
for (let i = 0; i < aiList.length; i++) {UE.registerUI( aiList[i].name ,function(editor,uiName){var btn = new UE.ui.Button({name:'btn-dialog-' + uiName,className:aiList[i].className,title:aiList[i].title,onclick:function () {// AIwrite = window.open('https://www.baidu.com')httpRequest(aiList[i].httpType)}});return btn;},undefined);
}
// 原生js发送请求
function httpRequest(code){var currentUser = JSON.parse(localStorage.getItem("login_casData"))var url = window.location.origin +'/' +window.location.pathname.split('/')[1]+'/dyportalserver/ParameterController/getParameter'var formdata = new FormData()formdata.append('parameterCode',code)$.ajax({type: 'POST',url: url,data: formdata,contentType: false,processData: false,headers:{'tenantId': currentUser.tenantId,'token': currentUser.token,'userId': encodeURIComponent(currentUser.userId),'userName': encodeURIComponent(currentUser.userName),'X-Requested-With': 'XMLHttpRequest','newseditingsuite-header': true},success: function(data) {console.log(data,'当前接口是否成功')if(data.status){var targetUrl = data.data[0].parameterValue// 通知vue打开弹框,利用广播进行通信localStorage.setItem('openVueDialog',targetUrl)console.log('asdfasf',window.vm)const channel = new BroadcastChannel('updataCatalogTask') let obj = {url:targetUrl,}if(code === 'AI_WRITING_ADDRESS'){obj.type = true} else {obj.type = false}channel.postMessage(obj)} else {alert('当前参数未配置,请联系管理员配置!')}},error: function(jqXHR, textStatus, errorThrown) {alert('当前参数未配置,请联系管理员配置!')}});
}