Solve the problem that ueditor table drag and drop does not respond

1. Background

As a rich text editing box launched by Baidu, ueditor is famous for its powerful functions.

The author recently used this edit box to make a custom print format function. Allows the user to set the print format in the rich text edit box, and then replace the information in the database according to the keyword when actually printing, and then call the print function of the rich text to print.

The author is integrated in vue, and the version used is"vue-ueditor-wrap": "^2.5.6"

However, when setting the printing format, both the author and the client found that the text edit box should not be dragged when pushing the table. Except for the first drag, the width of the table does not change at all after each drag. And the row height of the table is too high, and there is a large gap between the text and the text.

Solve the problem that the table width is not easy to drag

ueditor.all.jsIn order to solve this problem, the author researched the source code of ueditor .

Analysis process

It is found that in the tableBorderDrag method of dragging the table border, there are the following lines of code, which have been analyzed and tracked by the code. The function of each code is commented as follows

 //边框拖动
function tableBorderDrag( evt ) {
  //隐藏拖动标识线
  hideDragLine(me);
  //显示拖动标识线
  getDragLine(me, me.document);
  me.fireEvent('saveScene');
  //设置拖动标识线的位置
  showDragLineAt(state, startTd);
  //设置鼠标按下的标识
  mousedown = true;
  //拖动开始
  onDrag = state;
  //拖动时选中的单元格
  dragTd = startTd;
}

It can be seen from the code that each time the mouse is pressed, the marking line (remove) is hidden first, and then the marking line (add) is displayed. Logically speaking, there is no problem, but note that a line of code is added, me.fireEvent('saveScene') which triggers the auto-save event of the edit box.

After code analysis, it was found that contentchangethe event of the edit box was finally triggered.

The code for the contentchange event is as follows.

//内容变化时触发索引更新
//todo 可否考虑标记检测，如果不涉及表格的变化就不进行索引重建和更新
me.addListener("contentchange", function () {
    var me = this;
    //尽可能排除一些不需要更新的状况
    hideDragLine(me);
    if (getUETableBySelected(me))return;
    var rng = me.selection.getRange();

It can be seen that this event also calls hideDragLinethe method. It can be seen that when the table is widened, the table drags the marking line through the process of first deleting, adding, and then deleting. So our dragging doesn't work.

Solution

Well, then we only need to hide the sentence code tableBorderDragin the function .me.fireEvent('saveScene');

After testing, the table can be dragged perfectly.

2. There is a large gap between the rows of the table and the text

The free dragging of the rows and columns of the table is solved, so the space between the row and the text of the table remains.

Analysis process

After positioning the browser's developer tools, it is easy to find that there is a style

td, th {
    padding: 5px 10px;
    border: 1px solid #DDD;
}

After paddingchecking off the attribute, our table line and text fit together immediately.

Then our task is paddingto change the place where this attribute is added.

After ueditor.all.jssearching, it is easy to locate the code that adds CSS

Solution

Let's change this line of code and set the padding to 0 or 1.

The final effect is as follows:

ueditor.parse.jsNote: The corresponding style position in the modification needs to be synchronized , so that the print preview is consistent with the one displayed in the edit box.

3. Conclusion

So far, it has perfectly satisfied our original intention of using this rich text editor as a printing format. Compared with using a mature print format configuration plug-in, if the printing requirements are not complicated, using the rich text edit box to set the print format template is also a quick development option.

Notice

If the above replacement uses the ueditor.all.min.js file, the code corresponding to the file needs to be replaced synchronously.