1.文件说明
Htmlarea是一个使用JavaScript 开发的一套开源的在线编辑器工具,目前最新版本是3.0,我们程序中使用的2.3版本。这套编辑器所在目录是 /admin/htmlarea 目录中。
我们在添加/修改新闻中使用了这套编辑器,文件目录是 /admin/news.php
2.调用实现
我们这里主要是简单说一下在我们网页中如何调用htmlarea编辑器,同时又如何获取编辑器提交的值。
(1) 定义htmlarea 编辑器所在的目录
我们在我们需要调用的页面中使用JavaScript来指定目录:
<script language="Javascript1.2">
<!-- // load htmlarea
_editor_url = "./htmlarea/"; //htmlarea所在的目录,这里是当前目录的hrmlare 目录中
var win_ie_ver = parseFloat(navigator.appVersion.split("MSIE")[1]);
if (navigator.userAgent.indexOf('Mac') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Windows CE') >= 0) { win_ie_ver = 0; }
if (navigator.userAgent.indexOf('Opera') >= 0) { win_ie_ver = 0; }
if (win_ie_ver >= 5.5) {
document.write('<scr' + 'ipt src="' +_editor_url+ 'editor.js"');
document.write(' language="Javascript1.2"></scr' + 'ipt>');
} else { document.write('<scr'+'ipt>function editor_generate() { return false; }</scr'+'ipt>'); }
// -->
</script>
(2) 实例化htmlarea编辑器
<script language="JavaScript1.2" defer>
var config = new Object(); // 产生一个htmlarea 的配置对象
config.width = "700";//定义编辑器的宽度
config.height = "350";//定义编辑器的高度
config.bodyStyle = 'background-color: #F8F8F8; font-family: "Verdana"; font-size: 12px;'; //背景颜色
config.debug = 0;//是否打开调试模式
editor_generate('newstext',config);//把这个编辑器对应那个表单中的文本域对象
</script>
我们定义了上面的东西后,那么我们就必须在当前页中有一个变量名为 newstext 的文本域对象:
<textarea name="newstext" cols="105" rows="25" id="newstext"></textarea>
那么这样运行之后就能够使用该编辑器了。
查看显示效果:
(3) 如何获取编辑器提交的值
这个问题比较简单,就是获取上面的 newstext 的值作为我们编辑器提交的值。
分享到:
相关推荐
vue可视化网页编辑器
python UI可视化设计工具(WxPython可视化编辑器)
KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。 KindEditor使用JavaScript编写,可以无缝的与Java、.NET、PHP、...
简单asp.net可视化在线编辑器,修改别人的js
kindeditor编辑器插件_html可视化编辑器_网页可视化 kindeditor编辑器插件_html可视化编辑器_网页可视化
数据大屏可视化编辑器
基于Vue与JavaScript的数据大屏可视化编辑器设计与实现
可视化批处理编辑器与实例,可转换成exe格式,防止别人偷窥源代码,里面附带大量实例。是个学习批处理的好工具,我没很多耐心去学。。。,所以一般直接复制里面一段来用。
基于Vue3.0的“数据可视化大屏”设计与编辑器源码 使用方法: 1. 下载该项目到本地, 2. 安装依赖 // yarn run install npm run install 3. 运行预览 // yarn run build npm run build 本项目为个人项目, 主要使用 ...
可视化新闻编辑器很方便的帮助程序员在设计页面时实现增加内容的操作。这里提供了插件以及使用方法。
有关Eclipse 可视化编辑器插件安装说明
Tkinter 可视化编辑器 界面设计Tkinter 可视化编辑器 界面设计Tkinter 可视化编辑器 界面设计Tkinter 可视化编辑器 界面设计Tkinter 可视化编辑器 界面设计Tkinter 可视化编辑器 界面设计Tkinter 可视化编辑器 界面...
WxPython可视化编辑器.exe
可视化的流程编辑器,可用于开发工作流程图编辑器,网络拓扑图编辑器,IVR流程编辑器
最新 jsLinb2.0 可视化js编辑器
C#可视化设计在线编辑内容管理系统源码 C#可视化设计在线编辑内容管理系统源码 C#可视化设计在线编辑内容管理系统源码 C#可视化设计在线编辑内容管理系统源码 C#可视化设计在线编辑内容管理系统源码 C#可视化...
CSS可视化编辑器1.3.rarCSS可视化编辑器1.3.rar
Phpcms可视化在线编辑图文教程
Ugnis是React, React Native的可视化组件编辑器
KityFormula - 基于SVG的可视化公式编辑器