发新话题
打印

[原创]动态图文发布系统读一读(应“好累呀”)

[原创]动态图文发布系统读一读(应“好累呀”)

[watermark]一、原理 iFram的designMode。这就是关键,在iFrame在打开DesignMode后,可以在浏览页面的同时对页面进行编辑,而且,可以是可视化的也可以是编码级的。比如字体设置,放表格加什么东东,就像这个论坛发帖这一部份。你可以作个最简单的设置,在你的页面上嵌入一个iframe ,通过 frames.你的iframe的ID.document.designMode = "On"; 这样的脚本把它的designMode打开。 编辑完成后得存储。当然不用生成静态页面,那费空间又不好管理。存数据库。把iFrame中编辑的代码提出来(在designMode下一个命令就可解决),至于上传的文件我们当然有链接在里面。把代码存入数据库就可以了。 存了得给人看,那就更简单了,把存入的代码读出来显示就OK了,这里你想怎么显示就由你了。 二、示例:(这里我就就讲得更粗了,莫怪,我正上班!) 1.图片文件上传及嵌入 文件上传,网上大把教程,不多说。如何嵌入进来是关键。 代码: //插入图片对话框 function pic() {message.focus(); //message 就是那个iFrame的ID,这里让它获得焦点 var range =message.document.selection.createRange(); //selection 代表了当前激活选中区,即高亮文本块,或文档中用户可执行某些操作的其它元素。它的CreateRange()方法就是创建一段html中的文本textRange。 var arr = .......... // 这个就上传文件,属一无组件上传那一类问题,网上讲得多,我也不敷述了。 不过注意得把上传的那个文件的链接传过来到arr上。我这的arr返回了图片链接、大小、什么的信息。 if (arr != null){ var ss; ss=arr.split("*") //把返回信息转成数组 a=ss[0]; b=ss[1]; c=ss[2]; d=ss[3]; e=ss[4]; f=ss[5]; var str1; str1="" str1=str1+"

;"+b+"
"+d+"

" //生成代码 range.pasteHTML(str1); //这是关键啦,pasteHTML是我们创建的这个textRange的方法,而这个range用它来把代码嵌入到我们那个iFrame中去。 } else message.focus(); } 能传图片了,其它的也就可以传了,能显示的即时显示,不能显示的,大家也可以换个方式,比如有个带链接的图标代替…… 这里把一切加东西的部份解决了!!! [/watermark]

TOP

[原创]动态图文发布系统读一读(应“好累呀”)

2.接着版面设置
    这个很简单,就用到了一个命令:execCommand,这个方法用来给我们当前的文档、选区什么的执行一个指定,包括设置字体、颜色、大小、粗细、上下标、撤消、还原等等等,算了,我把官方的说明帖一下,不过是E文的
execCommand Method  Internet Development Index
Executes a command on the current document, current selection, or the given range.
Syntax
bSuccess = object.execCommand(sCommand [, bUserInterface] [, vValue])
Parameters
sCommand Required. String that specifies the command to execute. This command can be any of the command identifiers that can be executed in script.
bUserInterface Optional. Boolean that specifies one of the following values. false Default. Does not display a user interface.
true Displays a user interface, if the command supports one.

vValue Optional. Variant that specifies the string, number, or other value to assign. Possible values depend on sCommand .
Return Value
Returns True if the command is successful.
Remarks
Do not invoke the execCommand method until after the page loads.
The bUserInterface and vValue parameters might be required depending on the command being executed.
可以用的sCommand有
2D-Position 允许通过拖曳移动绝对定位的对象。
AbsolutePosition 设定元素的 position 属性为“absolute”(绝对)。
BackColor 设置或获取当前选中区的背景颜色。
BlockDirLTR 目前尚未支持。
BlockDirRTL 目前尚未支持。
Bold 切换当前选中区的粗体显示与否。
BrowseMode 目前尚未支持。
Copy 将当前选中区复制到剪贴板。
CreateBookmark 创建一个书签锚或获取当前选中区或插入点的书签锚的名称。
CreateLink 在当前选中区上插入超级链接,或显示一个对话框允许用户指定要为当前选中区插入的超级链接的 URL。
Cut 将当前选中区复制到剪贴板并删除之。
Delete 删除当前选中区。
DirLTR 目前尚未支持。
DirRTL 目前尚未支持。
EditMode 目前尚未支持。
FontName 设置或获取当前选中区的字体。
FontSize 设置或获取当前选中区的字体大小。
ForeColor 设置或获取当前选中区的前景(文本)颜色。
FormatBlock 设置当前块格式化标签。
Indent 增加选中文本的缩进。
InlineDirLTR 目前尚未支持。
InlineDirRTL 目前尚未支持。
InsertButton 用按钮控件覆盖当前选中区。
InsertFieldset 用方框覆盖当前选中区。
InsertHorizontalRule 用水平线覆盖当前选中区。
InsertIFrame 用内嵌框架覆盖当前选中区。
InsertImage 用图像覆盖当前选中区。
InsertInputButton 用按钮控件覆盖当前选中区。
InsertInputCheckbox 用复选框控件覆盖当前选中区。
InsertInputFileUpload 用文件上载控件覆盖当前选中区。
InsertInputHidden 插入隐藏控件覆盖当前选中区。
InsertInputImage 用图像控件覆盖当前选中区。
InsertInputPassword 用密码控件覆盖当前选中区。
InsertInputRadio 用单选钮控件覆盖当前选中区。
InsertInputReset 用重置控件覆盖当前选中区。
InsertInputSubmit 用提交控件覆盖当前选中区。
InsertInputText 用文本控件覆盖当前选中区。
InsertMarquee 用空字幕覆盖当前选中区。
InsertOrderedList 切换当前选中区是编号列表还是常规格式化块。
InsertParagraph 用换行覆盖当前选中区。
InsertSelectDropdown 用下拉框控件覆盖当前选中区。
InsertSelectListbox 用列表框控件覆盖当前选中区。
InsertTextArea 用多行文本输入控件覆盖当前选中区。
InsertUnorderedList 切换当前选中区是项目符号列表还是常规格式化块。
Italic 切换当前选中区斜体显示与否。
JustifyCenter 将当前选中区在所在格式化块置中。
JustifyFull 目前尚未支持。
JustifyLeft 将当前选中区所在格式化块左对齐。
JustifyNone 目前尚未支持。
JustifyRight 将当前选中区所在格式化块右对齐。
LiveResize 迫使 MSHTML 编辑器在缩放或移动过程中持续更新元素外观,而不是只在移动或缩放完成后更新。
MultipleSelection 允许当用户按住 Shift 或 Ctrl 键时一次选中多于一个站点可选元素。
Open 目前尚未支持。
Outdent 减少选中区所在格式化块的缩进。
OverWrite 切换文本状态的插入和覆盖。
Paste 用剪贴板内容覆盖当前选中区。
PlayImage 目前尚未支持。
Print 打开打印对话框以便用户可以打印当前页。
Redo 目前尚未支持。
Refresh 刷新当前文档。
RemoveFormat 从当前选中区中删除格式化标签。
RemoveParaFormat 目前尚未支持。
SaveAs 将当前 Web 页面保存为文件。
SelectAll 选中整个文档。
SizeToControl 目前尚未支持。
SizeToControlHeight 目前尚未支持。
SizeToControlWidth 目前尚未支持。
Stop 目前尚未支持。
StopImage 目前尚未支持。
StrikeThrough 目前尚未支持。
Subscript 目前尚未支持。
Superscript 目前尚未支持。
UnBookmark 从当前选中区中删除全部书签。
Underline 切换当前选中区的下划线显示与否。
Undo 目前尚未支持。
Unlink 从当前选中区中删除全部超级链接。
Unselect 清除当前选中区的选中状态。
如设置字体为红色的代码为:
frames.你那个iFrame的ID.document.execCommand("ForeColor", true, "#FF0000")
简单吧!

TOP

[原创]动态图文发布系统读一读(应“好累呀”)

3.加表格什么的。
    这个东东比较麻烦了,其实原理一样,生成的代码嵌入到个那个iFrame中去,我不想说,说起来太长了也极枯燥。
三、存结果啦!
首先把iFrame里面的代码全取出来
frames.你的iFrame的ID.document.body.innerHTML
这个就可以,你可以把它赋给一个form,然后再submit。接下来就是存入数据库了,你想把它怎么搞随你便。
附加说明,一些排版的,比如,如何图片与文字绕排如何实现呢?再用iframe,那都是脚本上的功夫了!你想做好点,多加脚本,其实这种图文混排的服务器端技术关系不多,基本上靠脚本技术。推荐大家去那些个脚本的站点去逛逛,那里高手如云,可以学不少东西噢!!!比如这个:http://www.51js.com/(免费给它做做广告)!

TOP

[原创]动态图文发布系统读一读(应“好累呀”)

回头来再讲一句,假如大家都和我一样的懒,随便找个论坛工图文系统,看看它们的源代码,可以借不少东西

TOP

[原创]动态图文发布系统读一读(应“好累呀”)

楼主我特意注册一个id上来感谢你的。。谢谢啊。。

TOP

发新话题