tinymce原装插件源码分析(三)-code code: 涉及的核心函数:

用于显示源码。主要包含一个弹框、设置显示内容以及内容的更新。

 1 function showDialog() {
 2         var win = editor.windowManager.open({
 3             title: "Source code",
 4             body: {
 5                 type: 'textbox',
 6                 name: 'code',
 7                 multiline: true,
 8                 minWidth: editor.getParam("code_dialog_width", 600),
 9                 minHeight: editor.getParam("code_dialog_height", Math.min(tinymce.DOM.getViewPort().h - 200, 500)),
10                 spellcheck: false,
11                 style: 'direction: ltr; text-align: left'
12             },
13             onSubmit: function(e) {
14                 // We get a lovely "Wrong document" error in IE 11 if we
15                 // don't move the focus to the editor before creating an undo
16                 // transation since it tries to make a bookmark for the current selection
17                 editor.focus();
18 
19                 editor.undoManager.transact(function() {  //uodo管理
20                     editor.setContent(e.data.code); 
21                 });
22 
23                 editor.selection.setCursorLocation(); //设置游标位置
24                 editor.nodeChanged();  // Dispatches out a onNodeChange event to all observers. This method should be called when you need to update the UI states or element path etc.
25             }
26         });
27 
28         // Gecko has a major performance issue with textarea
29         // contents so we need to set it when all reflows are done
30         win.find('#code').value(editor.getContent({source_view: true}));//在窗口外设置窗口内的字段内容。其实里面的参数可写可不写,默认是html格式,见L32486
31     }

 代码比较简短,主要的函数调用,都是‘系统’函数的调用。

关于uodo的transact:

tinymce原装插件源码分析(三)-code
code:
涉及的核心函数:

就是说,把dom改变的操作,放到callback中去执行以下,然后,uodo管理器会记录这个改变,并压入堆中。

涉及的核心函数:

editor.getContent  (L32482, 核心的操作是L32497的body.innerHTML)、editor.setContent、editor.undoManager.transact、