TinyMce介绍、环境配置与使用心得

TinyMCE 是一个基于浏览器的所见即所得编辑器,它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的,比如在Intranets、CMS、LMS等系统中应用。

 

  特点

  • 易于集成,只需要简短几行代码。
  • 支持主题和模板。
  • 易于使用自定义代码扩展(插件和回调)
  • 可定制HTML输出。屏蔽元素和强制属性。
  • 国际语言支持(通过语言包)。
  • 支持多种浏览器, 目前有 Mozilla (PC/Mac/Linux), MSIE (PC) 和 FireFox (PC/Mac/Linux)。

  下面是使用/集成TinyMCE的内容:(您也可以查看TinyMCE中文手册了解一下内容

  初始化

  在初始化TinyMCE的时候,需要把以下代码加入到页面的HEAD标签中。按以下例子中的设置,所有的TEXTAREA文本域在页面加载时将被转换成编辑器。另外还有其他模块,我们将在后面详细讲述。

 




 

 

初始化
注意以上红色部分是tiny_mce.js脚本文件的位置,该文件中包含了编辑器所需要的全部代码,主题及语言包将在初始化时被加载。蓝色部分是初始化调用,它生成TinyMCE的全局实例,其中的设置及名称-值属性将在以后描述。

设置

名称-值属性方式传递给tinyMCE的init方法的设置控制着程序的全局行为。所有的键及可能的键值如下表所示。注意,用[]括起来的名称是可选的,不是必须的设置。

 

常规设置
mode Mode可以是以下几个值之一:

textareas - 页面加载时把所有TEXTAREA组件转换成编辑器.
specific_textareas - 将所有"mce_editable"属性值为true的TEXTAREA转换成编辑器.
exact - 只转换在"elements"设置中指定的确切组件.
[theme] 指定要使用的主题名称,主题将被放在TinyMCE的themes目录下,默认为default。TinyMCE自带三个内置的主题,它们是simple,default和advanced。
如果你想创建自己的主题,请仔细阅读文档的 主题 部分。
[plugins] 此选项是一系列以逗号分隔的主题插件列表(例如,可以只用来扩展图像对话框)。这些插件覆盖了主题模板中定义的功能。插件逻辑应该包含在一个叫"editor_plugin.js"的文件中,它是插件目录中唯一被包含进来的文件。
例如:"my_image_dialog,my_link_dialog".
如果你想创建自己的插件,请仔细阅读文档的 主题 部分。
[language] TinyMCE中使用的语言包,这应该是像se,uk,us等诸如此类的FN代码,它被用来从"langs"目录中获取语言包,该设置的默认值为"uk".
中文用户建议您使用"zh-CN"
[elements] 以逗号分隔的用来转换成编辑器的组件列表,该选项仅在"mode"选项被设置成"exact"时使用。该列表中的元素可以是任何有id或name属性的HTML组件。
[ask] 当"mode"被设置成"textareas"或"specific_textareas"的时候,该选项被应用,询问用户输入框是否将被转换成编辑器。
如果你想使用这个选项,将它设置为true.
[textarea_trigger] textarea(文本域)触发器的属性,默认值为"mce_editable"。
该选项仅在"mode"被设置为"specific_textareas"时使用。
[valid_elements] 以逗号分隔开的组件转换部分的列表。

例如: a[href|target=_blank],strong/b,div[align],br.

以上例子告诉TinyMCE移除所有除了"a, strong, div"和"br"的组件,将元素b转换成strong,默认target设为"_blank"并保持href、target、align属性。在匹配组件及属性的名称时可以使用像*,+,?这样的通配符。

字符:
, 各组件定义之间的分隔符。
/ 两个同义组件之间的分隔符。第一个组件是会被用来输出的那个(即第二个组件被第一个替换)。
| 各属性定义之间的分隔符。
[ 定义某组件的属性列表的开始符号。
] 定义某组件的属性列表的结束符号。
= 将属性的默认值设为特定值。例如:"target=_blank"
: 将属性的值强行设为特定值。例如:"border:0"
< 校验某个属性的值。例如:"target<_blank?_self"
? 属性校验值之间的分隔符,见上。

特殊变量:
{$uid} - 产生一个唯一ID号。 例如:"p[id:{$uid}]".

此选项的默认值是以下模式:
"a[href|target],strong/b[class],em/i[class],strike[class],u[class],p[class|align],ol,ul,li,br,
img[class|src|border=0|alt|hspace|vspace|width|height|align],sub,sup,blockquote[dir|style],
table[border=0|cellspacing|cellpadding|width|height|class|align],tr[rowspan],
td[colspan|rowspan|width|height],div[class|align],span[class|align],pre[class|align],
address[class|align],h1[class|align],h2[class|align],h3[class|align],
h4[class|align],h5[class|align],h6[class|align],hr".

要包含所有组件及属性,请使用 *[*] ,这在使用invalid_elements选项时特别有用。
[extended_valid_elements] 向"valid_elements"列表末尾添加可用组件。此选项在你仅仅想往默认列表中增添部分组件时相当有用。
格式与"valid_elements"一致。
[invalid_elements] 输出时需要排除在外的组件名称列表,以逗号分隔开。
[trim_span_elements] True/False选项。如果设置为true,不需要的组件将被移除。默认值即为true。
[verify_css_classes] True/False选项。如果设置为true,将会校验CSS的class属性。默认值即为true。
[verify_html] True/False选项。代表着HTML内容是否需要校验。默认值为true。
[urlconvertor_callback] 当清理进程处理URL的时候调用的函数名。此函数必须遵从以下的格式:func(url, node, on_save) ,返回转换后的URL。此设置专为集成目的而设。参数url代表要转换的地址,node代表包含URL的那个节点,on_save是一个布尔值(在用户提交表单时为真)。
[preformatted] True/False选项。如果设置为true,编辑器将把制表符(TAB)转换成缩进,除此外保持其他whitespace(空白字符、换行等)字符,就如同HTML标签中的PRE的效果。默认值为false。
[insertlink_callback] 当执行"insertlink"命令时调用的函数名。此函数获取选定链接的地址和目标,返回一个以"href", "target"和 "title"为collection名称的数组。当使用新窗口时,为了兼容Mozilla,会在window.opener(弹出窗口的母窗口,译者注)上调用tinyMCE.insertLink。
[insertimage_callback] 当执行"insertimage"命令时调用的函数名。此函数获取选定图像的url并返回一个以src和alt为collection名称的数组。当使用新窗口时,为了兼容Mozilla,会在window.opener上调用tinyMCE.insertImage。
函数格式:insertimage(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout, action).
[setupcontent_callback] 当编辑器初始化时调用的函数名。函数格式:setupContentCallback(editor_id, node),其中editor_id是编辑器的id,node是编辑器所在的body组件节点。
[save_callback] 当执行triggerSave(触发保存)命令被调用时调用的函数名。函数格式:save(id, content, node),如果有特定返回值,其值将会被加到HTML表单组件上。所以可以通过此函数来自定义用户转换逻辑。
[docs_language] TinyMCE文档中使用的语言,这应该是像se,uk,us等诸如此类的FN代码,它被用来从"/docs/"目录中获取文档。 该选项的默认值跟language选项一致。
[width] 编辑器的宽度,它默认的宽度是原先被替换的组件宽度。
[height] 编辑器的高度,它默认的高度是原先被替换的组件高度。
[content_css] 编辑窗口中要使用的CSS文件,其路径应该跟页面相关。
[popups_css] 像插入链接和图片时的弹出窗口中使用的CSS文件,其路径应该跟页面相关。
[editor_css] 编辑器使用的CSS文件,其路径应该跟页面相关。
[encoding] 编辑器的输出编码,此选项目前只能为"html"或者空。如果设置为"html",编辑器的输出将经过HTML编码处理。
例如:<将会变成<,依此类推。默认值是空。
[debug] True/False选项。如果设置成true,像css文件路径等调试信息将会被显示。
[visual] True/False选项。如果设置成true,当边框设置成0的时候,为达到更好的视觉效果在编辑器中表格会有虚线出现。
默认值为true。
[visual_table_style] 用户可自定义表格的样式,默认值为:"border: 1px dashed #BBBBBB"。
[add_form_submit_trigger] True/False选项。如果设置成true,将强制进行所有表单的"onsubmit"事件处理并引发保存。此选项默认值为true。
[add_unload_trigger] True/False选项。如果设置成true,在"onunload"事件发生时,当前窗口会引发一个triggerSave调用。此triggerSave调用不会做任何清理工作,因为它是用来处理 前进/后退 按钮的。此选项默认值为true。
[force_br_newlines] True/False选项。此选项强制编辑器将段落符号(P)替换成换行符(BR)。此选项默认值为false。(实验阶段)
[force_p_newlines] True/False选项。如果打开此选项,在按下回车键(Enter)时Mozilla/Firefox浏览器会生成段落符号(P),在按下Shift+Enter时会生成换行符(BR)。此选项默认为true。
[relative_urls] True/False选项。如果设置成true,绝对路径将被转换成相对路径。默认值为true。
[remove_script_host] True/False选项。在设置成true的情况下,如果URL中的主机名、端口号跟编辑器当前所在一致,它们会被移除。
例如:编辑器所在站点为 http://www.somesite.com ,那么以下链接 http://www.somesite.com/somedir/somepage.html 将会被转换成 /somedir/somepage.html 。
如果relative_urls被设置成false,此选项默认为true。
[focus_alert] True/False选项。如果设置成true,编辑器在失去焦点的时候就会出现一个烦人的警告框。默认值为true。
[document_base_url] 在将绝对路径转换成相对路径的时候会用到此文档的URL。这个选项指定了编辑器当前的默认文档。
注意如果此选项指定到一个域名,请添加协议前缀,并以斜杠结尾。例如:http://www.somehost.com/mydir/
[custom_undo_redo] True/False选项。此选项可以使 撤消/重做 功能更加完善。默认值为true。
[custom_undo_redo_levels] 自定义最多可撤消操作的次数,默认是无限制。
[custom_undo_redo_keyboard_shortcuts] 如果使用,编辑器可以使用Ctrl+Z和Ctrl+Y快捷键来实现撤消和重做。默认允许。
[fix_content_duplication] True/False选项。此选项修正了MSIE中一个内容重复的bug。默认启用,但是为了兼容性也可以禁用(false)。
[directionality] 此选项可以设置像阿拉伯语等语言的文字方向。可能的值为:ltr, rtl。默认值: ltr(从左到右)。
[auto_cleanup_word] 如果启用,从MS office/Word粘贴的HTML将会自动被清理。此选项默认值为false。
注意:此操作当前仅支持MSIE。
[cleanup_on_startup] 如果启用,在编辑器初始化时文本域及组件将会被清理。默认值为false。
[inline_styles] 如果启用,像width,height,vspace,hspace和align等属性将会被风格属性替代。默认值为false。
在使用此选项时记得要把风格属性应用在正确的组件上。
[convert_newlines_to_brs] 如果启用,所有的/n(新行)将会在编辑器启动时被转换成
组件。此选项默认值为false。
[auto_reset_designmode] 因为在调用style.display的none/block方法来显示/隐藏某个TinyMCE编辑器的时候有bug,设计模式需要被重置。此选项一旦启用,当编辑器聚焦时,将自动重置。默认值为false。
[entities] 一张以字符代码来查找名称的表,该表中元素是以逗号分隔开的实体列表。该列表以奇数项、偶数项区分,其中奇数项是被用来转换的字符代码,偶数项是代表那个字符代码的实体名称。例如:"8205,zwj,8206,lrm,8207,rlm,173,shy"。
[cleanup_callback] 自定义清理函数。此选项能让用户在默认的清理基础上有所扩展。此函数调用跟默认的调用是分开的,它并不替换默认的清理函数,而仅仅是扩展。点击 插件清理 查看更多细节。
主题的高级特定设置
[theme_advanced_toolbar_location] 此选项用来改变工具栏的默认位置。可能的值为:"top"和"bottom"。默认值是"bottom"。
[theme_advanced_toolbar_align] 此选项用来设置工具栏的对齐方式是left, center还是right。默认值是center。
[theme_advanced_styles] 此选项可以用来增加风格下拉框中的CSS类和名称。格式如下:"=<class>;.."。<br>如果没有指定此选项,主内容部分的CSS类将会被自动导入。<br>例如:"Header 1=header1;Header 2=header2;Header 3=header3"</td> </tr> <tr> <td><strong>[theme_advanced_buttons1]</strong></td> <td>工具栏上第一行要包含的按钮列表,以逗号分隔开。例如:"bold,italic,underline"。<br><br>允许的按钮名称如下:<br>bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, styleselect, bullist, numlist, outdent, indent, undo,redo, link, unlink, image, cleanup, help, code, table, row_before, row_after, delete_row, separator, rowseparator, col_before, col_after, delete_col, hr, removeformat, sub, sup, formatselect, fontselect, fontsizeselect, forecolor,charmap,visualaid,spacer,cut,copy,paste</td> </tr> <tr> <td><strong>[theme_advanced_buttons2]</strong></td> <td>同上,差别在于指定的是工具栏第二行。</td> </tr> <tr> <td><strong>[theme_advanced_buttons3]</strong></td> <td>同上,差别在于指定的是工具栏第三行。</td> </tr> <tr> <td><strong>[theme_advanced_buttons<N>_add]</strong></td> <td>向工具栏上特定的第N行中增加额外的控制/按钮。例如:theme_advaned_buttons3_add : "iespell".</td> </tr> <tr> <td><strong>[theme_advanced_buttons<N>_add_before]</strong></td> <td>向工具栏上特定的第N行的默认按钮前面增加额外的控制/按钮。例如:theme_advaned_buttons3_add_before : "iespell"。</td> </tr> <tr> <td><strong>[theme_advanced_disable]</strong></td> <td>要禁用的按钮/组件的列表,以逗号分隔。例如:"formatselect".</td> </tr> <tr> <td><strong>[theme_advanced_source_editor_width]</strong></td> <td>源文件编辑器窗口的宽度。</td> </tr> <tr> <td><strong>[theme_advanced_source_editor_height]</strong></td> <td>源文件编辑器窗口的高度。</td> </tr> <tr> <td><strong>[theme_advanced_path_location]</strong></td> <td>组件路径列表的位置,可能的值为:"top"或"bottom"。默认值为:"none" </td> </tr> <tr> <td><strong>[theme_advanced_blockformats]</strong></td> <td>formatselect列表要屏蔽的格式列表,以逗号分隔开。默认值:p,address,pre,h1,h2,h3,h4,h5,h6。</td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <div class="left" style="text-align:left;"> <strong>以下是一个较为复杂的初始化例子:</strong> </div> <div class="left" style="text-align:left;"> <table border="0" align="center"> <tbody> <tr> <td> <p><!-- tinyMCE --></p> <p><script language="javascript" type="text/javascript" src="<span style="color:#990000;">jscripts/tiny_mce/tiny_mce.js</span>"></script><br><script language="javascript" type="text/javascript"><br>   <span style="color:#000099;">tinyMCE.init({<br>       mode : "exact",<br>       theme : "mytheme",<br>       language : "se",<br>       elements : "elm1,elm2"<br>   });</span><br></script><br><!-- /tinyMCE --></p> </td> </tr> </tbody> </table> <p> </p> <p> </p> <p> </p> <div class="left"> <span class="subtitle"><strong>函数</strong></span> <strong> (供高级使用)</strong> <br>TinyMCE有一个全局实例,它能提供一些可从页面调用的公用函数。 </div> <p class="left"> </p> <div class="left"> <hr> </div> <p class="left"><strong>语法:</strong><span> tinyMCE.</span><strong><span style="color:#0000ff;"><span>triggerSave</span></span></strong><span>([skip_cleanup]);</span><br><br><strong>描述:</strong>进行清除操作,并将编辑器内容移回到表单域中。tinyMCE通过向表单提交方法中增加触发器来自动调用此函数。<br><br><strong>参数:</strong><br>[skip_cleanup] - 禁用保存触发器的清除功能,默认为false。(可选)<br><br><strong>返回:</strong> 无</p> <div class="left"> <hr> </div> <p class="left"><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>updateContent</span></strong></span><span>(form_element_name);</span><br><br><strong>描述:</strong>将表单组件的内容转移到编辑器中,此操作的功能跟triggerSave()正好相反。当你想动态改变编辑器内容时可以使用此方法。<br><br><strong>参数:<br></strong>form_element_name - 要获取内容的组件所在表单的名称。<br><br><strong>返回:</strong> 无 </p> <div class="left"> <hr> </div> <p class="left"><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>execInstanceCommand</span></strong></span><span>(editor_id, command, [user_interface], [value]);</span><br><br><strong>描述:</strong>此方法通过editor_id参数找到某个编辑器实例,在此编辑器上执行一个命令。<br><br><strong>参数:</strong><br>editor_id - 编辑器实例的ID或者被替换后的组件id/名称。<br>command - 要执行的命令。查看execCommand函数以获取更多细节。<br>[user_interface] - 是否使用用户界面。<br>[value] - 执行命令时要传递的参数,例如:一个URL。</p> <p class="left"> </p> <p class="left"> </p> </div> <p class="left" style="text-align:left;"><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>execCommand</span></strong></span><span>(command, [user_interface], [value]);</span><br><br><strong>描述:</strong>此方法在选定编辑器中通过名称执行特定命令。<br><br><strong>参数:<br></strong>command - 要执行的命令,例如:"Bold" or "Italic"。<span style="color:#000000;">你可以通过此连接来查看Mozilla Midas spec</span>。但是tinyMCE也有自身一些特殊的命令如下表所示:</p> <p class="left"> </p> <table border="0"> <tbody> <tr> <td width="150"><strong>mceLink</strong></td> <td>打开插入链接对话框并插入链接。</td> </tr> <tr> <td width="150"><strong>mceImage</strong></td> <td>打开插入图像对话框并插入图像。</td> </tr> <tr> <td><strong>mceCleanup</strong></td> <td>从HTML代码中移除不需要的组件和属性。</td> </tr> <tr> <td><strong>mceHelp</strong></td> <td>打开文档页面。</td> </tr> <tr> <td><strong>mceInsertTable</strong></td> <td>在鼠标位置插入表格,默认尺寸为:2×2。如果execCommand函数中有指定value参数,它的格式必须为name/value形式的数组,其中name有以下选项:cols, rows, border, cellspacing, cellpadding。border(边框)的默认大小为:0。</td> </tr> <tr> <td><strong>mceTableInsertRowBefore</strong></td> <td>在当前鼠标所在位置之前插入一行。</td> </tr> <tr> <td><strong>mceTableInsertRowAfter</strong></td> <td>在当前鼠标所在位置之后插入一行。</td> </tr> <tr> <td><strong>mceTableDeleteRow</strong></td> <td>将当前鼠标所在行删除。</td> </tr> <tr> <td><strong>mceTableInsertColBefore</strong></td> <td>在当前鼠标所在位置之前插入一列。</td> </tr> <tr> <td><strong>mceTableInsertColAfter</strong></td> <td>在当前鼠标所在位置之后插入一列。</td> </tr> <tr> <td><strong>mceTableDeleteCol</strong></td> <td>将当前鼠标所在列删除。</td> </tr> <tr> <td><strong>mceAddControl</strong></td> <td>向编辑器添加组件控制,此编辑器的id/name由value指定。</td> </tr> <tr> <td><strong>mceRemoveControl</strong></td> <td>通过editor_id名称来移除特定控制。value是要移除的editor_id(编辑器ID),编辑器ID格式如下:"mce_editor_<index>"。<br>也可以使用DOM组件的ID和表单名。</td> </tr> <tr> <td><strong>mceFocus</strong></td> <td>使以value的值为ID的编辑器获得焦点。编辑器ID格式如下:"mce_editor_<index>"。也可以使用DOM组件的ID和表单名。</td> </tr> <tr> <td><strong>mceSetCSSClass</strong></td> <td>设置CSS类属性,或者在选择框中创建新的span。value的值是要给选定组件指派的css类名或者要新创建的span组件名称。</td> </tr> <tr> <td><strong>mceInsertContent</strong></td> <td>在当前鼠标所在位置插入value的内容。</td> </tr> <tr> <td><strong>mceReplaceContent</strong></td> <td>将当前选定部分替换为value中的HTML代码。{$selection}变量由当前选定部分的文字内容替换。</td> </tr> <tr> <td><strong>mceSetAttribute</strong></td> <td> <p>为当前选定组件设置属性。此命令的value应该是name/value数组,其参数如下:<br><br><strong>name</strong> - 要设置的属性名。<br><strong>value</strong> - 要设置的属性值。<br><strong>[targets]</strong> - 要增加属性的目标组件,默认为:p,img,span,div,td,h1,h2,h3,h4,h5,h6,pre,address。<br><br>使用示例:<br>tinyMCE.execCommand('mceSetAttribute',false,{name:'align',value:'right'});</p> </td> </tr> <tr> <td><strong>mceToggleVisualAid</strong></td> <td> <p>是否开启视觉帮助模式</p> </td> </tr> <tr> <td><strong>mceAnchor</strong></td> <td> <p>插入名称锚点。value是锚点的名称。</p> </td> </tr> <tr> <td><strong>mceResetDesignMode</strong></td> <td> <p>重置所有编辑器实例的设计模式状态。在Firefox中,当编辑器被放在制表符中或者用style.display="none/block"来控制隐显的时候,此命令非常有用。在编辑器重新显示时调用此命令。</p> </td> </tr> <tr> <td><strong>mceSelectNode</strong></td> <td> <p>选定value指定的节点/组件。同时此命令会使编辑器滚动到此组件所在位置。</p> </td> </tr> <tr> <td><strong>mceSelectNodeDepth</strong></td> <td> <p>从当前节点以深度关系选择指定的节点/组件。所以0值会选定当前聚焦的节点。同时此命令会使编辑器滚动到此组件所在位置。</p> </td> </tr> </tbody> </table> <p> </p> <p class="left" style="text-align:left;"><br>user_interface - 申明某命令是否会显示用户界面。True/False选项。<br>value - 要传递给命令的值。例如,插入链接时,它就是链接的URL。<br><br><strong>返回:</strong> 无<br><br><strong>示例:</strong></p> <div class="left" style="text-align:left;"> <a href=" <span style="color:#990000;">javascript:tinymce.execCommand('Bold');</span>">[Do bold]</a> </div> <div class="left"> <p> </p> <p style="text-align:left;">---------------------------------------------------------------  </p> <p style="text-align:left;"><strong>语法:</strong><span> tinyMCE.</span><span style="color:#0000ff;"><strong><span>insertLink</span></strong></span><span>(href, target);</span><br><br><strong>描述:</strong>此方法在当前选定编辑器实例的鼠标位置插入一个链接,或者用新的数据来更新已有链接。当你创建自己的主题时,此方法应在插入链接的弹出窗口中的OK按钮按下时被调用。<br><br><strong>参数:<br></strong>href - 链接的地址/URL。<br>target - 链接的目标。<br><br><strong>返回:</strong> 无</p> <p style="text-align:left;"> </p> <p style="text-align:left;">-------------------------------------------------------------         </p> <p style="text-align:left;"><strong>语法:</strong><span> tinyMCE.</span><span style="color:#0000ff;"><strong><span>insertImage</span></strong></span><span>(src, alt, border, hspace, vspace, width, height, align, title, onmouseover, onmouseout);</span><br><br><strong>描述:</strong>此方法在当前选定编辑器实例的鼠标位置插入图像,或者用新的数据来更新已有图像。当你创建自己的主题时,此方法应在插入图像的弹出窗口中的OK按钮按下时被调用。<br><br><strong>参数:<br></strong>src - 图像地址。<br>alt - 图片的替代文字。<br>border - 图像边框。<br>hspace - 图像水平间距。<br>vspace - 图像垂直间距。<br>width - 图像宽。<br>height - 图像高。<br>align - 图像对齐方式。<br>title - 图像链接的标题。<br>onmouseover - 图像在鼠标放上去时的事件处理。<br>onmouseout - 图像在鼠标移开时的事件处理。<br><br><strong>返回:</strong> 无</p> <p style="text-align:left;"> </p> <p style="text-align:left;">-------------------------------------------------------------         </p> <p style="text-align:left;"><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>triggerNodeChange</span></strong></span><span>();</span><br><br><strong>描述:</strong>当编辑器发生外部变化时此方法被调用。然后此方法回调主题的"handleNodeChangeCallback"方法。<br><br><strong>参数: </strong>None<br><br><strong>返回:</strong> 无</p> <p style="text-align:left;"> </p> <p style="text-align:left;">-------------------------------------------------------------         </p> <p style="text-align:left;"><strong><span style="color:#993300;">语法</span></strong><strong>:</strong><span> <strong><span style="font-size:medium;"><span style="color:#993300;">tinyMCE</span></span></strong>.</span><span style="color:#0000ff;"><strong><span><span style="font-size:large;">getContent</span></span></strong></span><span>();</span><br><br><strong>描述:</strong><span style="color:#0000ff;"><span style="color:#000000;">此方法</span><strong>返回当前选定编辑器中的HTML内容</strong></span>。如果没有任何选定编辑器,该方法返回null。<br><br><strong>参数: </strong>None<br><br><strong>返回:</strong>当前选定编辑器中的HTML内容或者null。 </p> </div> <p> </p> <p> </p> <p>-------------------------------------------------------------         </p> <p><strong><span style="color:#993300;">语法</span></strong><strong>:</strong><span> <strong><span style="color:#993300;"><span style="font-size:medium;">tinyMCE</span></span></strong>.</span><span style="color:#0000ff;"><strong><span><span style="font-size:large;">setContent</span></span></strong></span><span>(html);</span><br><br><strong>描述:</strong>此方法设定当前选定编辑器的HTML内容。<br><br><strong>参数:<br></strong>html - 要设定的HTML源代码。<br><br><strong>返回:</strong> None. </p> <p> </p> <p><strong>-------------------------------------------------------------         </strong></p> <p><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>getEditorInstance</span></strong></span><span>(editor_id);</span><br><br><strong>描述:</strong>此方法通过editor_id返回某个编辑器实例。<br><br><strong>参数:<br></strong>editor_id - 要获取的编辑器实例。<br><br><strong>返回:</strong>编辑器实例(TinyMCEControl)。 </p> <p> </p> <p>-------------------------------------------------------------         </p> <p><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>importThemeLanguagePack</span></strong></span><span>([theme]);</span><br><br><strong>描述:</strong>此方法导入主题中特定的语言包。自定义主题中可以调用此方法。<br><br><strong>参数:</strong><br>[theme] - 当前主题名称。此选项可选,默认为全局的"theme"设定。此参数在主题插件中非常有用。<br><br><strong>返回:</strong> None. </p> <hr> <p> </p> <p><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>importPluginLanguagePack</span></strong></span><span>(plugin, valid_languages);</span><br><br><strong>描述:</strong>此方法导入插件中特定的语言包。自定义插件中可以调用此方法。<br><br><strong>参数:</strong><br>plugin - 当前插件的名称。<br>valid_languages - 以逗号分隔的所支持语言包列表。<br><br><strong>返回:</strong> None. </p> <hr> <p><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>applyTemplate</span></strong></span><span>(html);</span><br><br><strong>描述:</strong>此方法替换主题中的设置及语言变量。<br><br><strong>参数:</strong> <br>html - 要替换主题变量的HTML代码。<br><br><strong>返回:</strong> 转换后的HTML代码。</p> <p> </p> <p>-------------------------------------------------------------         </p> <p><strong>语法:</strong><span> tinyMCE.</span><strong><span style="color:#0000ff;"><span>openWindow</span></span></strong><span>(template, [args]);</span><br><br><strong>描述:</strong>此方法通过从指定的template参数中获取width, height及html数据来打开新窗口。数组参数args中包含要替换的变量名。<br><br>还有一些自定义的窗口参数:<br>mce_replacevariables - 启用/禁用HTML文档中的语言/变量替换。默认启用。<br>mce_windowresize - 启用/禁用弹出窗口的自动resize特征,默认启用。<br><br><strong>参数:</strong> <br>template - Name/Value数组,以width, height, html和file为键。<br>[args] - 包含要替换变量名的Name/Value数组。模板文件中的键值变量被参数列表所替换。<br>例如:image.php?src={$src}被替换为:image.php?src=image.gif。<br><br><strong>返回:</strong> None. </p> <p> </p> <p>-------------------------------------------------------------         </p> <p><strong>语法:</strong><span> tinyMCE.</span><span style="color:#0000ff;"><strong><span>getWindowArg</span></strong></span><span>(name, [default_value]);</span><br><br><strong>描述:</strong>此方法根据name返回窗口参数,它可以用在主题中的弹出窗口中,以获取对话框中的参数。<br><br><strong>参数:</strong> <br>name - 要获取的窗口参数的名称。<br>[default_value] - 窗口参数丢失时返回的默认值。<br><br><strong>返回:</strong> 窗口参数的值。</p> <p> </p> <p>-------------------------------------------------------------         </p> <p><strong>语法</strong>: <span>tinyMCE.</span><span><span style="color:#0000ff;">setWindowArg</span></span><span>(name, value);</span></p> <p><br><strong>描述:</strong>此方法根据name设定窗口参数,例如它在某插件调用其他插件时非常有用。<br><br><strong>参数:</strong> <br>name - 要设置的窗口参数。<br>value - 窗口参数中要设置的值。<br><br><strong>返回:</strong> 窗口参数值。 </p> <p> </p> <p>-------------------------------------------------------------         </p> <p style="text-align:left;"><strong>语法:</strong> <span>tinyMCE.</span><span style="color:#0000ff;"><strong><span>getParam</span></strong></span><span>(name, [default_value], [strip_whitespace]);</span><br><br><strong>描述:</strong>此方法返回TinyMCE的配置参数。<br><br><strong>参数:</strong> <br>name - 要获取的窗口参数名。<br>[default_value] - 窗口参数丢失时返回的默认值。<br>[strip_whitespace] - 如果为真,所有返回值中的空白字符将会被除去。默认:false。<br><br><strong>返回:</strong>TinyMCE配置参数</p> </div> <p style="text-align:left;"> </p> <p style="text-align:left;"> </p> <p style="text-align:left;"> </p> <p style="text-align:left;">----------------------</p> <p style="text-align:left;"><strong><span style="font-size:small;">补充:</span></strong></p> <p style="text-align:left;"><span style="font-family:'宋体';">TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方面虽然不能称得上是最强,但绝对能够满足大部分网站的需求,并且功能配置灵活简单。另一特点是加载速度非常快。最重要的是,TinyMCE是一个根据LGPL license发布的自由软件,你可以把它用于商业应用。</span></p> <p style="text-align:left;"> </p> <p class="MsoNormal"><span style="font-family:'宋体';"><br></span></p> <p>  <a href="http://img.e-com-net.com/image/info8/344867f4e0414043b4b7961704582b94.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/344867f4e0414043b4b7961704582b94.png" alt="TinyMce介绍、环境配置与使用心得_第1张图片" width="444" height="234" style="border:1px solid black;"></a></p> <p>  </p> <p> </p> <p>---------------------------------  </p> <p><strong>使用:</strong></p> <p><strong><br></strong></p> <p>  <strong>1、首先将TinyMCE解压缩,会建立如下的目录结构:</strong></p> <p><strong><br></strong></p> <p>  /tinymce/</p> <p> </p> <p>  /tinymce/docs/</p> <p>  /tinymce/docs/zh_cn/</p> <p> </p> <p>  /tinymce/examples/</p> <p>  /tinymce/examples/zh_cn/</p> <p> </p> <p>  <strong><span style="color:#ff0000;">/tinymce/jscripts/</span></strong></p> <p>  /tinymce/jscripts/tiny_mce/</p> <p>  /tinymce/jscripts/tiny_mce/langs/</p> <p>  /tinymce/jscripts/tiny_mce/plugins/</p> <p>  /tinymce/jscripts/tiny_mce/plugins/ </p> <p>  /tinymce/jscripts/tiny_mce/themes/</p> <p>  /tinymce/jscripts/tiny_mce/themes/advanced/</p> <p>  /tinymce/jscripts/tiny_mce/themes/default/</p> <p>  /tinymce/jscripts/tiny_mce/themes/simple/</p> <p> </p> <p>  其中docs/目录下是TinyMCE的说明文档,examples/目录下是4个实例页面,而jscripts/目录下则是真正的JS文件。<span><span style="color:#ff0000;">实际使用时候只需要将<strong>jscripts/</strong>目录上传到服务器上即可。</span></span></p> <p><span><span style="color:#ff0000;"><br></span></span></p> <p>  <strong>2、然后在需要使用TinyMCE的页面里加入如下的JS代码:</strong></p> <p> </p> <table border="0" align="center"> <tbody> <tr> <td><!-- tinyMCE --> <br><script language="javascript" type="text/javascript" <br>src="<strong><span style="color:#ff0000;">jscripts/tiny_mce/tiny_mce.js</span></strong>"></script> <br><script language="javascript" type="text/javascript"> <br>     tinyMCE.<strong><span style="color:#0000ff;">init</span></strong><strong>({ </strong><br>         mode <strong>:</strong> "textareas" <strong>,</strong> <br>         theme <strong>:</strong> "advanced" <strong>, </strong><br>         language <strong>: </strong>"zh_cn" <br>     <strong>});</strong> <br></script> <br><!-- /tinyMCE --></td> </tr> </tbody> </table> <p> </p> <p>  <span>这里假设页面与jscripts/处于同一目录下,否则请修改代码里的路径。</span></p> <p>  </p> <p>     现在页面里所有的textarea元素就会被渲染成TinyMCE实例。</p> <p> </p> <p> </p> <p> </p> <p>  <strong>3、初始化配置介绍:</strong></p> <p><strong><br></strong></p> <p> <strong> tinyMCE.<span style="color:#0000ff;"><span style="font-size:medium;">init</span></span>({</strong></p> <p>  mode : "exact",</p> <p>  elements : "example_textarea",</p> <p>  theme : "advanced",</p> <p>  language :"zh_cn",</p> <p>  plugins : "flash,emotions,paste",</p> <p>  theme_advanced_buttons1 : "bold,italic,underline,</p> <p>  strikethrough, separator, forecolor,backcolor,</p> <p>  fontselect,fontsizeselect",</p> <p>  theme_advanced_buttons2_add_before: "cut,copy,</p> <p>  pastetext,separator",</p> <p>  theme_advanced_buttons2 : "undo,redo,separator,hr,</p> <p>  link,unlink,image,flash,separator",</p> <p>  theme_advanced_buttons2_add :"code,emotions,charmap",</p> <p>  theme_advanced_buttons3 : "",</p> <p>  theme_advanced_toolbar_location : "bottom",</p> <p>  theme_advanced_toolbar_align : "center",</p> <p>  relative_urls : false,</p> <p>  remove_script_host : false</p> <p>  <strong>});</strong></p> <p>  </p> <p> </p> <p> </p> <p>  mode与elements是搭配使用的,用来指定渲染name在elements中的HTML元素为TinyMCE编辑器(可以是DIV或者Textarea),比如:</p> <p>  mode : "exact",elements : "example_textarea"</p> <p>  也可以单独用 mode : "textareas",这样页面中所有的Textarea元素都会被渲染。</p> <p> </p> <p>  theme 可以是advanced或者simple(受功能限制),也可以自定义主题。</p> <p>  language 常用选择可以是:en,zh_cn,zh_cn_utf8,zh_tw,zh_tw_utf8(和语言包名字对应)</p> <p> </p> <p>  plugins 用来指定加载相应的插件,以提供特别功能</p> <p> </p> <p>  theme_advanced_buttons 后面的数字用来指定工具栏的第几行,前3行可以不写,系统会自动用默认图标填在前3个工具栏,如果你不想显示前3行,可以像例子里面一样这样写:theme_advanced_buttons3 : "",_add_before后缀指在默认工具栏前面加图标,_add后缀指在默认工具栏后面加图标,具体每个按钮资料可以查看文档(/doc目录)。</p> <p>  theme_advanced_toolbar_location和theme_advanced_toolbar_align很简单,一看就明白。</p> <p> </p> <p> </p> <p>  relative_urls : false,remove_script_host : false一般也配对使用,因为TinyMce会自动把本地链接改成相对链接的形式,比如会把绝对路径http://www.jacklam.cn/2006/03/abc.html改成相对路径/2006/03/abc.html。加了上面的代码后就不会自动改写了。</p> <p> </p> <p> </p> <p> </p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1176835487432781824"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(JavaScript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中,深拷贝(Deep Copy)和浅拷贝(Shallow Copy)" target="_blank">JavaScript 中,深拷贝(Deep Copy)和浅拷贝(Shallow Copy)</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中,深拷贝(DeepCopy)和浅拷贝(ShallowCopy)是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释,包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝(ShallowCopy)概念定义:浅拷贝是指创建一个新的对象或数组,其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中,Map和WeakMap都是用于存储键值对的数据结构,但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序,并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对:set(key,value):将一个键值对添加到Map中。如果键已经存在,则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程,但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新,镜像源的具体地址可能会发生变化,因此,我将基于当前可获取的信息,提供一个通用的切换步骤,并附上最新的镜像地址(截至回答时)。一、了解npm镜像源npm(NodePackageManager)是JavaScript的包管理器,用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> <span class="text-muted">海淀萌狗</span> <div>-for,while和do-while性能相当-避免使用for-in循环,==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组,还可以遍历对象。原因:for-in每次迭代操作会同时搜索实例或者原型属性,for-in循环的每次迭代都会产生更多开销,因此要比其他循环类型慢,一般速度为其他类型循环的1/7。因此,除非明确需要迭代一个属性数量未知的对象,否则应避免使用for-i</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐!" target="_blank">JavaScript中秋快乐!</a> <span class="text-muted">Q_w7742</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候,跳出“中秋节快乐”字样,需要注册鼠标单击事件和计时器。首先定义主要函数:初始化当点击canvas之后转到onCanvasClick函数,绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源(JavaScript,CSS,img等文件)与后台应用分开部署,提高用户访问静态代码的速度,降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上,后台项目部署到应用服务器上,根据一定规则静态资源的请求全部请求nginx服务器,达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写,Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景:构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景:构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx,作为当今最流行的Web服务器和反向代理软件之一,凭借其高性能、稳定性和灵活性,在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站,还是大型企业级应用,Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景,帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件(如HTML、CSS、JavaScript、图片等)的网站,Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835331376895848448.htm" title="【JS】前端文件读取FileReader操作总结" target="_blank">【JS】前端文件读取FileReader操作总结</a> <span class="text-muted">程序员-张师傅</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI,它允许web应用程序异步读取用户计算机上的文件(或原始数据缓冲区)的内容,例如读取文件以获取其内容,并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用,尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先,你需要创建一个Fi</div> </li> <li><a href="/article/1835298981362626560.htm" title="webstorm报错TypeError: this.cliEngine is not a constructor" target="_blank">webstorm报错TypeError: this.cliEngine is not a constructor</a> <span class="text-muted">Blue_Color</span> <div>点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:</div> </li> <li><a href="/article/1835296397365178368.htm" title="创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目,涉及前端(用户界面)、后端(服务器逻辑)、数据库等多个部分。由于篇幅限制,我无法在这里提供一个完整的系统代码,但我可以分别给出一些关键部分的示例代码,涵盖几</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>前端(HTML/CSS/JavaScript)grsyzp.cnHTML页面结构(index.html)html购物商城欢迎来到购物商城JavaScript(Ajax请求商品数据,app.js)javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div> </li> <li><a href="/article/1835293121953492992.htm" title="了解 UNPKG:前端开发者的包管理利器" target="_blank">了解 UNPKG:前端开发者的包管理利器</a> <span class="text-muted">小于负无穷</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>在现代前端开发中,JavaScript包管理和模块化是至关重要的,而npm则是最流行的JavaScript包管理器之一。不过,随着前端项目复杂性的增加,有时候我们希望快速引入外部依赖,而无需本地安装和构建。此时,CDN(内容分发网络)成为了一种方便快捷的解决方案,而UNPKG就是这种方式中的佼佼者。什么是UNPKG?UNPKG是一个基于npm的内容分发网络(CDN),它允许开发者直接通过URL从n</div> </li> <li><a href="/article/1835247344719851520.htm" title="2019-05-29 vue-router的两种模式的区别" target="_blank">2019-05-29 vue-router的两种模式的区别</a> <span class="text-muted">Kason晨</span> <div>1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash</div> </li> <li><a href="/article/1835216109297561600.htm" title="electron多标签页模式更像客户端" target="_blank">electron多标签页模式更像客户端</a> <span class="text-muted">diygwcom</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术(HTML、CSS和JavaScript)来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式,通常需要借助一些特定的库或组件,如BrowserView或electron-tabs,或者通过自定义实现。实现方式1.使用BrowserViewBrowser</div> </li> <li><a href="/article/1835194426499100672.htm" title="外卖霸王餐返利外卖会员卡小程序开发" target="_blank">外卖霸王餐返利外卖会员卡小程序开发</a> <span class="text-muted">闹小艾</span> <a class="tag" taget="_blank" href="/search/good506070/1.htm">good506070</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤:一、需求梳理:首先,我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略,以及用户体验友好的界面设计。二、技术决策:技术选型是关键。我们采用小程序的开发框架,利用JavaScript作为前端开发语言,并结合微信提供的API进行后端接口调用与数据处理。三、账</div> </li> <li><a href="/article/1835192531881652224.htm" title="Axure设计之全屏与退出全屏交互实现" target="_blank">Axure设计之全屏与退出全屏交互实现</a> <span class="text-muted">招风的黑耳</span> <a class="tag" taget="_blank" href="/search/Axure/1.htm">Axure</a><a class="tag" taget="_blank" href="/search/axure/1.htm">axure</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a> <div>在AxureRP中,设计全屏与退出全屏的交互功能可以极大地提升用户体验,尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库:https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure</div> </li> <li><a href="/article/1835162742533746688.htm" title="全面指南:用户行为从前端数据采集到实时处理的最佳实践" target="_blank">全面指南:用户行为从前端数据采集到实时处理的最佳实践</a> <span class="text-muted">数字沉思</span> <a class="tag" taget="_blank" href="/search/%E8%90%A5%E9%94%80/1.htm">营销</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E9%87%8F%E8%BF%90%E8%90%A5/1.htm">流量运营</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AE%B9%E8%BF%90%E8%90%A5/1.htm">内容运营</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>引言在当今的数据驱动世界,实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析,这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时,需要考虑多种因素,包括事件类型、时间戳、用户信</div> </li> <li><a href="/article/1835154546289111040.htm" title="EcmaScript和JavaScript的区别" target="_blank">EcmaScript和JavaScript的区别</a> <span class="text-muted">每天吃八顿</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>ECMAScript和JavaScript是经常被混淆的两个术语,但实际上它们之间存在一些区别:ECMAScript:ECMAScript(通常缩写为ES,并且有版本号如ES5,ES6和ES7等)是由ECMA国际(EuropeanComputerManufacturersAssociation)制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范,</div> </li> <li><a href="/article/1835137656992919552.htm" title="javascript添加p元素,html添加文字,appendChild" target="_blank">javascript添加p元素,html添加文字,appendChild</a> <span class="text-muted">游勇一</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html%E6%B7%BB%E5%8A%A0p/1.htm">html添加p</a><a class="tag" taget="_blank" href="/search/appendChild/1.htm">appendChild</a> <div>javascript添加p元素,html添加文字,appendChild。网页添加p元素效果截图。个人签名:游志勇,预制板,南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}</div> </li> <li><a href="/article/1835136018660028416.htm" title="CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制" target="_blank">CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制</a> <span class="text-muted">SteveJi666</span> <a class="tag" taget="_blank" href="/search/WebGL/1.htm">WebGL</a><a class="tag" taget="_blank" href="/search/cesium/1.htm">cesium</a><a class="tag" taget="_blank" href="/search/EarthSDK/1.htm">EarthSDK</a><a class="tag" taget="_blank" href="/search/SuperMap/1.htm">SuperMap</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a> <div>版本简介:cesium:1.99;Supermap3D:SuperMapiClientJavaScript11i(2023);官方下载文档链家:SuperMap技术资源中心|为您提供全面的在线技术服务示例参考:support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap</div> </li> <li><a href="/article/1835131605585326080.htm" title="html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示" target="_blank">html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示</a> <span class="text-muted">睿理</span> <div>html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格,可以填数的表格控件?首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以</div> </li> <li><a href="/article/1835131225128398848.htm" title="如何在 Python 中声明一个静态属性?" target="_blank">如何在 Python 中声明一个静态属性?</a> <span class="text-muted">潮易</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Python中,静态属性的定义和使用方式与JavaScript中的类似,主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问,它们属于类本身。###如何声明一个静态属性:1.首先,需要在属性名前添加`@staticmethod`装饰器。2.接下来,定义一个普通方法,该方法的第一个参数通常为`cls`(用于表示类的引用)。###代码示例:```pythoncla</div> </li> <li><a href="/article/1835125415920889856.htm" title="数据格式:什么是JSON和XML" target="_blank">数据格式:什么是JSON和XML</a> <span class="text-muted">isNotNullX</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>JSON和XML都是数据交换的一种格式,用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容,并探讨两者的不同。一·什么是JSON?1.JSON(JavaScriptObjectNotation)即JavaScript对象标记法:-JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。-JSON基于JavaScript的一个子集,但JSON是</div> </li> <li><a href="/article/1835118231979913216.htm" title="HighCharts图表自动化简介" target="_blank">HighCharts图表自动化简介</a> <span class="text-muted">知识的宝藏</span> <a class="tag" taget="_blank" href="/search/Selenium%E9%AB%98%E7%BA%A7%E7%AF%87/1.htm">Selenium高级篇</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">Selenium图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">highcharts图表自动化</a><a class="tag" taget="_blank" href="/search/Selenium%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">Selenium图表自动化</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%A1%A8%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">图表自动化测试</a><a class="tag" taget="_blank" href="/search/highcharts/1.htm">highcharts</a><a class="tag" taget="_blank" href="/search/Selenium/1.htm">Selenium</a> <div>什么是分析数据?在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分,因为它提供了对实时数据的洞察。验证此类分析数据非常重要,因为不准确的数据可能会在报告中产生问题,并可能影响应用程序/系统的其他相关领域。什么是HighChart?Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库,提供了一种简单的方法来向您的网站或Web应用程序添加交互</div> </li> <li><a href="/article/109.htm" title="统一思想认识" target="_blank">统一思想认识</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/%E6%80%9D%E6%83%B3/1.htm">思想</a> <div>1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &</div> </li> <li><a href="/article/236.htm" title="Joda Time使用笔记" target="_blank">Joda Time使用笔记</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/joda+time/1.htm">joda time</a> <div>Joda Time的介绍可以参考这篇文章: http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time,为了避免每次使用都查API,记录一下常用的用法:     /** * DateTime变化(增减) */ @Tes</div> </li> <li><a href="/article/363.htm" title="FileUtils API" target="_blank">FileUtils API</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/FileUtils/1.htm">FileUtils</a><a class="tag" taget="_blank" href="/search/FileUtils+API/1.htm">FileUtils API</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库,是Apache对java的IO包的封装,这里面有两个非常核心的类FilenameUtils跟FileUtils,其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装,开发中对文件的操作,几乎都可以在这个框架里面找到。 非常的好用。 </div> </li> <li><a href="/article/490.htm" title="各种新兴技术" target="_blank">各种新兴技术</a> <span class="text-muted">不懂事的小屁孩</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a> <div>1:gradle Gradle 是以 Groovy 语言为基础,面向Java应用为主。基于DSL(领域特定语言)语法的自动化构建工具。 现在构建系统常用到maven工具,现在有更容易上手的gradle, 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境: http://m</div> </li> <li><a href="/article/617.htm" title="tomcat6的https双向认证" target="_blank">tomcat6的https双向认证</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/tomcat6/1.htm">tomcat6</a> <div>1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36</div> </li> <li><a href="/article/744.htm" title="托管虚拟桌面市场势不可挡" target="_blank">托管虚拟桌面市场势不可挡</a> <span class="text-muted">蓝儿唯美</span> <div>用户还需要冗余的数据中心,dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台,提供服务或者MSP也可以自己来控制。 在某些情况下,MSP会在dinCloud的云服务上进行服务分层,如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同,Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个</div> </li> <li><a href="/article/871.htm" title="spring学习——xml文件的配置" target="_blank">spring学习——xml文件的配置</a> <span class="text-muted">a-john</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>在Spring的学习中,对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中,采用XML配置也是最常见的。以下是一个简单的XML配置文件: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or</div> </li> <li><a href="/article/998.htm" title="HDU 4342 History repeat itself 模拟" target="_blank">HDU 4342 History repeat itself 模拟</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E6%A8%A1%E6%8B%9F/1.htm">模拟</a> <div>来源:http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意:首先让求第几个非平方数,然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路:一个简单的模拟题目,但是由于数据范围大,需要用__int64。我们可以首先把平方数筛选出来,假如让求第n个非平方数的话,看n前面有多少个平方数,假设有x个,则第n个非平方数就是n+x。注意两种特殊情况,即</div> </li> <li><a href="/article/1125.htm" title="java中最常用jar包的用途" target="_blank">java中最常用jar包的用途</a> <span class="text-muted">asia007</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口,提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法,以及接收和处理SOAP错误的方法.  w</div> </li> <li><a href="/article/1252.htm" title="ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法" target="_blank">ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/json%E7%BC%96%E7%A0%81%E8%BF%94%E5%9B%9E%E5%BC%82%E5%B8%B8/1.htm">json编码返回异常</a> <div>一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会</div> </li> <li><a href="/article/1379.htm" title="JUnit使用的设计模式" target="_blank">JUnit使用的设计模式</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a> <div>JUnit源代码涉及使用了大量设计模式 1、模板方法模式(Template Method)         定义一个操作中的算法骨架,而将一些步骤延伸到子类中去,使得子类可以不改变一个算法的结构,即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构,也就是步骤,而步骤的实现可以在子类中完成。   </div> </li> <li><a href="/article/1506.htm" title="Linux常用命令(摘录)" target="_blank">Linux常用命令(摘录)</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/crond/1.htm">crond</a><a class="tag" taget="_blank" href="/search/chkconfig/1.htm">chkconfig</a> <div>chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc</div> </li> <li><a href="/article/1633.htm" title="【Hadoop一】Hadoop伪集群环境搭建" target="_blank">【Hadoop一】Hadoop伪集群环境搭建</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div> 结合网上多份文档,不断反复的修正hadoop启动和运行过程中出现的问题,终于把Hadoop2.5.2伪分布式安装起来,跑通了wordcount例子。Hadoop的安装复杂性的体现之一是,Hadoop的安装文档非常多,但是能一个文档走下来的少之又少,尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布,但是它的配置跟2.5.0,2.5.1没有分别。 &nb</div> </li> <li><a href="/article/1760.htm" title="Anychart图表系列五之事件监听" target="_blank">Anychart图表系列五之事件监听</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/chart/1.htm">chart</a> <div>创建图表事件监听非常简单:首先是通过addEventListener('监听类型',js监听方法)添加事件监听,然后在js监听方法中定义具体监听逻辑。 以钻取操作为例,当用户点击图表某一个point的时候弹出point的name和value,代码如下: <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo</div> </li> <li><a href="/article/1887.htm" title="Web前端相关段子" target="_blank">Web前端相关段子</a> <span class="text-muted">braveCS</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a> <div>Web标准:结构、样式和行为分离   使用语义化标签 0)标签的语义:使用有良好语义的标签,能够很好地实现自我解释,方便搜索引擎理解网页结构,抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容,具有很好的可读性,从而实现对特殊终端的兼容。 1)div和span是没有语义的:只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时,才会适当添加div</div> </li> <li><a href="/article/2014.htm" title="编程之美-24点游戏" target="_blank">编程之美-24点游戏</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美 </div> </li> <li><a href="/article/2141.htm" title="主页面子页面传值总结" target="_blank">主页面子页面传值总结</a> <span class="text-muted">chengxuyuancsdn</span> <a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a> <div>1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu</div> </li> <li><a href="/article/2268.htm" title="[网络与经济]互联网+的含义" target="_blank">[网络与经济]互联网+的含义</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91%2B/1.htm">互联网+</a> <div>       互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不</div> </li> <li><a href="/article/2395.htm" title="oracle 创建视图 with check option" target="_blank">oracle 创建视图 with check option</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/%E8%A7%86%E5%9B%BE/1.htm">视图</a><a class="tag" taget="_blank" href="/search/view/1.htm">view</a><a class="tag" taget="_blank" href="/search/oralce/1.htm">oralce</a> <div>我们来看下面的例子: create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图,并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果: select * from testv</div> </li> <li><a href="/article/2522.htm" title="ToastPlugin插件在cordova3.3下使用" target="_blank">ToastPlugin插件在cordova3.3下使用</a> <span class="text-muted">dibov</span> <a class="tag" taget="_blank" href="/search/Cordova/1.htm">Cordova</a> <div>    自己开发的Todos应用,想实现“ 再按一次返回键退出程序 ”的功能,采用网上的ToastPlugins插件,发现代码或文章基本都是老版本,运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs</div> </li> <li><a href="/article/2649.htm" title="C语言22个系统函数" target="_blank">C语言22个系统函数</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/function/1.htm">function</a> <div>C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分(尾数)x和 以2位的指数部分n,即num=x*2n,指数n存放在exp指向的变量中,返回x。D</div> </li> <li><a href="/article/2776.htm" title="开发一个类的流程" target="_blank">开发一个类的流程</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a> <div>本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件,并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库,供以后复用。   以下是开发流程: 1. 明确类的功能,抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计(驼峰式命名) 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属</div> </li> <li><a href="/article/2903.htm" title="java 并发" target="_blank">java 并发</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/java+%E5%B9%B6%E5%8F%91/1.htm">java 并发</a> <div>能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中,类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享,局部变量与方法参数都是线程私有的,不会被共享。 </div> </li> <li><a href="/article/3030.htm" title="Spring Security(11)——匿名认证" target="_blank">Spring Security(11)——匿名认证</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/ROLE_ANNOYMOUS/1.htm">ROLE_ANNOYMOUS</a><a class="tag" taget="_blank" href="/search/%E5%8C%BF%E5%90%8D/1.htm">匿名</a> <div>匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户,Spring Security支持为其建立一个匿名的AnonymousAuthenticat</div> </li> <li><a href="/article/3157.htm" title="NODEJS项目实践0.2[ express,ajax通信...]" target="_blank">NODEJS项目实践0.2[ express,ajax通信...]</a> <span class="text-muted">逐行分析JS源代码</span> <a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a> <div>  一、前言         通过上节学习,我们已经        ubuntu系统搭建了一个可以访问的nodejs系统,并做了nginx转发。本节原要做web端服务 及 mongodb的存取,但写着写着,web端就</div> </li> <li><a href="/article/3284.htm" title="在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值" target="_blank">在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值</a> <span class="text-muted">lhbthanks</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/checkbox/1.htm">checkbox</a> <div>第一种方法:获取结果String类型 在 Action 中获得的是一个 String 型数据,每一个被选中的 checkbox 的 value 被拼接在一起,每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码: 前台 HTML 代码: </div> </li> <li><a href="/article/3411.htm" title="003.Kafka基本概念" target="_blank">003.Kafka基本概念</a> <span class="text-muted">nweiren</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>Kafka基本概念:Topic、Partition、Message、Producer、Broker、Consumer。 Topic:             消息源(Message)的分类。 Partition:             Topic物理上的分组,一</div> </li> <li><a href="/article/3538.htm" title="Linux环境下安装JDK" target="_blank">Linux环境下安装JDK</a> <span class="text-muted">roadrunners</span> <a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>1、准备工作 创建JDK的安装目录: mkdir -p /usr/java/   下载JDK,找到适合自己系统的JDK版本进行下载: http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录,然后进行解压: tar -zxvf jre-7</div> </li> <li><a href="/article/3665.htm" title="Linux忘记root密码的解决思路" target="_blank">Linux忘记root密码的解决思路</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>1:使用同版本的linux启动系统,chroot到忘记密码的根分区passwd改密码   2:grub启动菜单中加入init=/bin/bash进入系统,不过这时挂载的是只读分区。根据系统的分区情况进一步判断.   3: grub启动菜单中加入 single以单用户进入系统.   4:用以上方法mount到根分区把/etc/passwd中的root密码去除   例如:   ro</div> </li> <li><a href="/article/3792.htm" title="跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现" target="_blank">跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现</a> <span class="text-muted">xueyou</span> <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>postMessage 是 HTML5 新方法,它可以实现跨域窗口之间通讯。到目前为止,只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持,而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样,前者是前端擅长跨域文档数据即时通讯,后者擅长针对跨域服务端数据通讯,p</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>