Preface:
Recently, I was dealing with the compatibility problem of the old background browser of the company, requiring the replacement of ewebeditor editor with uEditor editor, and requiring the compatibility of IE9/IE8/IE10/IE11/Micro Edge/Google/360 editors. I heard that Baidu editor compatible to IE6, think that simple change editor I, in the above toss over a lot of time, this article for specific problems to deal with, readers may not meet me such a problem, in advance: for reference only, for reference only, for reference only
Question:
- When baidu editor pastes pictures, the hidden danger of exposing Intranet IP address – IE problem appears
- Baidu Editor
Ctril + vThe paste image function does not trigger any effects on IE - Special symbol transfer background escape problems, as well as the database HTML after reading, due to double quotes caused by the interception of the page error
- for
iframeThis nested framework, after saving, does not get compatible handling of editor content
When baidu editor pastes pictures, the hidden danger of exposing Intranet IP address – IE problem appears
Problem of repetition
When using pasted images, the following problems will occur. When viewing the source code, the problem of exposing the source code as shown in the figure appears, and the cause of the problem is unknown:
Solutions:
- It’s very simple. Just turn it off
View source codeJust push the button. Perfect solution - If you must keep it, you can do it when you don’t know how to deal with it and you need to make a delivery immediately. (At that time, you had to make a delivery the next day, so you worked overtime until 10 PM because you couldn’t find the problem point.)
Smoke screen:
First go directly to the code:
// Click the source button for sensitive href information processing for the editor's content
$('body').delegate(".edui-button-wrap"."click".function(){
var editTxt = $('.edui-editor-iframeholder').find('textarea')
if(editTxt.length){
var content = UE.getEditor('ueditor').getContent();
var aE = $('<div></div>');
aE.html(content)
// alert(aE)
aE.find('p.filedata').each(function(){
var newA = $(this).find('a')
// alert(newA.attr('href'))
if(newA.attr('href').indexOf("http://") > =0 || newA.attr('href').indexOf("https://") > =0) {var arr = newA.attr('href').split('/')
var newTxt = ' '
for(var i=3; i<arr.length; i++){ newTxt +='/'+arr[i]
}
newA.attr('href',newTxt)
}
})
// alert(content);
// Get the character after the escape
var formatTxt = toTxt(aE.html());
// formatTxt = appendBrToPAlfter(formatTxt);editTxt.html(formatTxt); }});/* Regular expressions replace parentheses, Angle brackets, etc. */
function toTxt(str) {
var RexStr = /\<|\>|\"|\'|\&/g
str = str.replace(RexStr, function(MatchStr) {
switch (MatchStr) {
case "<":
return "<";
break;
case ">":
return ">";
break;
case "\" ":
return """;
break;
case "'":
return "& # 39;";
break;
case "&":
return "&";
break;
default:
break; }})return str;
}
Copy the code- Bind an out-of-focus event that truncates the content when the source code is read
- Reassign the href value to ensure that the connection has no Intranet address
- Remove special tags from the content,
- Reassign a value to a rich text box
Conclusion:
- Funny solution, but when the boss is on your neck, problem solving is always number one. At least since the launch of this approach, there have been no reported problems, and all versions of the browser are compatible, so it has escaped the fire
- I suggest that rich text editor have more time to play with the function of viewing source code, sometimes the default Settings of the editor may pit you, such as Baidu editor will add p tags by default…
The escape problem of special symbol transmission background, and the problem of reading data
&
foriframeThis nested framework, after saving, does not get compatible handling of editor content
Problem recurrence:
Since the old background system uses IFrame to splice the old background system, when saving, the form cannot get the content of the rich text editing box, and when reading, some style codes will be truncated, resulting in incomplete content display.
We all know that rich text is usually stored in the database as HTML text, and the general system will escape or intercept some characters like < > \ $%. So we directly use JS to pass native text is certainly not, need to enter the following processing:
Storage time:
- Transfers special symbols to replace the original text
- The interceptor detects for special text and escapes twice
- Before storage, the escape character is changed to the original < > tag, replacing the content
- Store the rich text to the database, complete
When reading:
- Read the contents of the database
- Echo content to a rich text editor (there are a lot of weird problems with this step, see below)
As for saving, the fact is that older versions of Ewebeditor used a Textarea tag on the parent iframe (the parent page of the form) to save the specific content, causing problems even after I did the iframe operation.
Solutions:
Also directly on the code:
var ue = UE.getEditor('ueditor');
// Initialize the content
window.onload = function(){
setTimeout(function(){
ue.setContent($(The '#'+QueryStringByName('id'), parent.document).val())
},500)}// Bind out-of-focus events
ue.addListener('blur'.function(editor){
var content = UE.getEditor('ueditor').getContent();
var aE = $('<div></div>');
aE.html(content)
aE.find('p.filedata').each(function(){
var newA = $(this).find('a')
if(newA.attr('href').indexOf("http://") > =0 || newA.attr('href').indexOf("https://") > =0) {var arr = newA.attr('href').split('/')
var newTxt = ' '
for(var i=3; i<arr.length; i++){ newTxt +='/'+arr[i]
}
newA.attr('href',newTxt)
}
})
content = toTxt(aE.html());
//alert(content);
$(The '#'+QueryStringByName('id'), parent.document).html(content)
});
// Get the search argument
function QueryStringByName(name){
var result=window.location.search.match(new RegExp("[\? \ &]" + name + "= ([^ \ &] +)"."i"));
if(result==null || result.length<0) {return "";
}
return result[1];
}
Copy the code- At initialization time, run to the parent window to get the text content of the data, do a little bit of lazy loading.
- use
blurEvents dotextareaBidirectional synchronization with rich text editors - The problem of exposing Intranet addresses also needs to be dealt with, and Intranet addresses need to be intercepted
- Escape for special labels
Conclusion:
- Rich text temporary area, preferably hidden domain
textareaWhen using value values, double quotation marks may occur - Beware of escape problems. Remember when data will be escaped, and what phase of data content will be in what form
- Focus on some of the rich text editors themselves.”
chores“
Deal with the failure of Baidu editor paste in IE (no solution has been found so far)
Problem recurrence:
This is also the key problem I want to say, so far I still have not found a solution, the following content is my personal attempt, I hope to find someone with experience in dealing with it or have other methods, paid thanks!!
First problem: In Internet Explorer, CTRL + V has no effect, whereas in Google’s Browser,
Second problem: In IE, copy and paste Word content does not paste pictures
Impossible solution:
www.cnblogs.com/songsu/p/11…
Don’t find Google, Google came up with an article like this, try it
It’s around line 23881 of the ueditor.all.js file
bindEvents:{
// Insert the paste board image, drag and drop to insert the image
'ready':function(e){
var me = this;
if(window.FormData && window.FileReader) {
domUtils.on(me.body, 'paste drop'.function(e){
// Determine whether the contents of the clipboard contain text
// Start by explaining why the text is empty
/ / CTRL + c word in the text or picture will return after 1 (image/PNG) or 4 kinds of type (text/plain, text/HTML, text/RTF, image/PNG) types of objects
// In order to be compatible with the four formats, the following judgment is made
/ / the following code: e.o riginalEvent. ClipboardData. The items for the contents of the clipboard
// Text is not empty after pasting the text, and it also returns the image type of the current text
// If there is text, do not do any processing. If you paste only images, the text must be empty, including copied desktop images or screenshots
// var text = e.originalEvent.clipboardData.getData("text");
// if(text == ""){
// var items=e.originalEvent.clipboardData.items;
// for (var i = 0, len = items.length; i < len; i++) {
// var item = items[i];
// if ( item.kind == 'file' && item.type.indexOf('image/') ! = = 1) {
// var blob = item.getAsFile();
// getBase64(blob, function( base64 ) {
// //sendAndInsertImage(base64,me); Uploading to the server
// setBase64Image(base64,me);
/ /});
// // prevents default events from being added repeatedly.
// e.originalEvent.preventDefault();
/ /};
/ /}
// }
//TODO paste image root problem spot 20201010
var hasImg = false,
items;
// Get the stickboard file list or drag and drop file list
items = e.type == 'paste' ? getPasteImage(e):getDropImage(e);
if(items){
var len = items.length,
file;
while (len--){
file = items[len];
if(file.getAsFile) file = file.getAsFile();
if(file && file.size > 0) {
sendAndInsertFile(file, me);
hasImg = true; } } hasImg && e.preventDefault(); }});// Cancel the text cursor position prompt when dragging and dropping images
domUtils.on(me.body, 'dragover'.function (e) {
if(e.dataTransfer.types[0] = ='Files') { e.preventDefault(); }});// Set the loading style
utils.cssRule('loading'.'.loadingclass{display:inline-block; cursor:default; background: url(\''
+ this.options.themePath
+ this.options.theme +'/images/loading.gif\') no-repeat center center transparent; border:1px solid #cccccc; margin-left:1px; height: 22px; width: 22px; }\n' +
'.loaderrorclass{display:inline-block; cursor:default; background: url(\''
+ this.options.themePath
+ this.options.theme +'/images/loaderror.png\') no-repeat center center transparent; border:1px solid #cccccc; margin-right:1px; height: 22px; width: 22px; ' +
'} '.this.document); }}}Copy the codeProcessing operations for content
function getPasteImage(e){
return e.clipboardData && e.clipboardData.items && e.clipboardData.items.length == 1 && /^image\//.test(e.clipboardData.items[0].type) ? e.clipboardData.items:null;
}
function getDropImage(e){
return e.dataTransfer && e.dataTransfer.files ? e.dataTransfer.files:null;
}
//TODO performs insert image operation 20201010
function setBase64Image(base64, editor) {
editor.execCommand('insertimage', {
src: base64,
_src: base64
});
}
//TODO get base64 20201010
function getBase64(blob, callback) {
var a = new FileReader();
a.onload = function(e) {
callback(e.target.result);
};
a.readAsDataURL(blob);
};
Copy the codeThe blog approach is to read the binary stream as a Blob and then call the original upload interface for compatibility, however, after I directly applied it, even Google paste failed **. 支那
I don’t get the result I want on getPasteImage(), so I just alert it to print what I want
Add console.log(e.clipboarddata) to see what IE looks like (note to use a higher version of IE)
Before testing, paste word content with image content on a sticky board or cut an image and paste it into IE’s rich text editing box
As expected, there is no content, so we just print the E event object and see if there is anything we want
Error, use console:
To be honest, I can’t understand it. The dataTransfer here has no content according to my feeling. Basically, I can’t find the point of how to obtain the data of the paste board
So my personal judgment is that Internet Explorer itself is not compatible with or handles this paste operation (evil Internet Explorer)
So far, I know their ability is insufficient, unable to solve this problem, so ran to ask the front end, and then the front end baidu a circle down, and I said: “do not want to change the editor?”
I didn’t give up. I kept searching
Other ways:
In fact, there are other organizations or companies that have solved the problem of uploading Word
The uEditor text editor supports CTRL + V image text styles
Conclusion:
- The idea is good, but basically belongs to the closed door, and also need to install an EXE Active control, can not solve the problem
- Rewrite an Active control compatibility handle yourself
The rich text editor pastes Word content
Conclusion:
- Other companies secondary development, commercial version
- The personal version takes more than 300 years, which is quite troublesome
- Is also based on the development of word upload plug-in, and the need to install word upload control
- Localhost and “127.0.0.1” can be uploaded and used normally
UEditor standalone image upload component! Apply IE, Chrome, firefox.
Conclusion:
- Not the same thing, for upload operation to do some compatibility and optimization, can not solve the paste problem
After the above attempts, I found that there was still no particularly good solution, so I gave the feedback to the superior and did not let the problem remain in my hands…
Description: Images copied from Word do not display properly after pasting into UEditor, and the work image save button is not available.
Solution: See ISSUE
Conclusion:
- Although the official ISSUE has been mentioned, I visited 404…
- Now I have been disturbed by email, I don’t know whether to reply to me, the rookie.
Even the official side can not find a way, a little despondent, so put the problem online, probably need to change the editor, some busy…
Sharing:
Having said so much, in fact, WHAT I want to say most is that to solve the problem, you must leave a document, even if it is how to solve it.
I am a back-end developer, but it was arranged to the front-end compatibility issues to deal with the front, in fact was under great pressure, customers have tight, manager also asked me the progress everyday, xin one good company worked full stack in the great god, many rare and beautiful flower I click on the button style of confusion and problems are looking for his help to solve, I am quite disgusted with all kinds of strange phenomena of IE, and finally drag my colleagues to accompany me to work overtime until ten o ‘clock to solve the problem of exposing the Intranet above. After solving it, I said something like, “I never want to run into IE again in my life,” and the full Stack guy said to me, “Afraid of what, I can’t do any IE6 compatibility, is not so good, to solve these problems, this is belong to your experience, accumulate experience, you can be more advantages than others”, that for me this year’s work attitude produced a lot of work, I am not thinking about work for work, but think you work for yourself, I hope my words are helpful.
Conclusion:
As for my old system, the editor compatibility and support of Baidu is the best at present. I really don’t want to change another browser, or struggle before changing, so I write.
Welcome everybody front end big god advice, help me this back end temporary pull to solve the front end problem person QAQ
If there is a good solution, welcome to clap brick