`
guohf
  • 浏览: 417727 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

将标签集成到后台编辑器中

阅读更多

我们在后台修改模板的时候,切换到编辑模式下,可以用可视化的方式通过标签的分类查找标签

 

  通过标签分类找到相应标签之后,点击标签进入标签内容设置页面

  设置好参数之后点击确定就可以将生成的代码插入到模板里面了。

如果我们自己增加了一个系统标签。那么我们怎么实现通过这种方式插入我们添加的标签:
以我们上节添加的显示指定文章的内容的标签{$ShowArticleContent(参数列表)}来做例子。

  首先先将这个标签进行归类,这里我们将这个标签归入标签导航的:网站通用标签――网站通用函数标签

1、  加入代码让这个标签在标签导航中显示:

修改Editor文件夹里面的editor_tree.asp文件,找到489行左右的代码

        <DIV class=subFolder id=subwebFunction><IMG id=subwebFunctionImg class=icon src="images/foldericon1.gif"> 网站通用函数标签</DIV>

        <DIV class=sub id=subwebFunctionSub>

我们可以看到标签导航里面的网站通用函数标签都是定义在这两行代码下面的,我们可以将我们添加的标签加入合适的位置,这里我以加入显示注册用户列表前面为例子

我们找到下面的语句

            <DIV class=subItem onClick="FunctionLabel2('ShowTopUser')"><IMG class=icon src="images/label2.gif">显示注册用户列表</DIV>

在他前面加入这样的代码:

<DIV class=subItem onClick="FunctionLabel('Lable/PE_ShowArticleContent.htm','250','150')"><IMG class=icon src="images/label2.gif">显示指定文章的内容的标签</DIV>

这里的FunctionLabel('Lable/PE_ShowArticleContent.htm','250','150')是系统定义好的一个js函数,其中Lable/PE_ShowArticleContent.htm是标签内容的设置页面,我们等一下再演示如何添加这个页面,后面两个参数分别是标签内容设置页面的宽度和高度

然后我们在看一下标签导航页面,就可以看到我们添加的标签了

 

下面我们再演示一下如何加入标签内容的设置页面

首先我们打开网站更目录下面的Editor文件夹里面的Label文件夹,可以看到里面有很多文件,这些文件对应的就是相应标签的内容设置页面。

我们添加一个文件,内容设置成以下代码

<html>

<head>

<title>显示指定文章的内容标签</title>

<script language="javascript">

function objectTag() {

    var reval;

    reval = '{$ ShowArticleContent ('+document.form1.articleid.value+')}'; 

    window.returnValue = reval;

    window.close();

}

</script>

<link href='Admin_Style.css' rel='stylesheet' type='text/css'>

</head>

<body>

<form name="form1">

<table  Width="100%" border='0' align='center'cellspacing='1' class='border'>

  <tr class='title' align="center">

    <td colspan="2" height='22'><b>显示指定文章的内容标签设置</b></td>

  </tr>

  <tr class='tdbg'>

    <td align="right" class='tdbg5' >指定文章ID</td>

    <td ><input name=" articleid " height="50" type="text" size="10" value="1"></td>

  </tr>

   <tr class='tdbg'>

    <td colspan=2 align='center'><input TYPE='button' value=' 确 定 ' onCLICK='objectTag()'> </td>

  </tr>

</table>

</form>

</body>

</html>

 

  这个页面实现的功能主要有两个

1、  显示标签内容设置页面。

2、  点击确定后生成相应的代码插入到模板中

我们来看一下相应的代码

<script language="javascript">

function objectTag() {

    var reval;

    reval = '{$ ShowArticleContent ('+document.form1.articleid.value+')}'; 

    window.returnValue = reval;

    window.close();

}

</script>

 

  当我们设置好标签的内容之后,点击确定,就会调用这个js函数

  document.form1.articleid.value的作用就是获取参数的值,

  然后我们把这个标签重命名为ShowArticleContent.htm,保存之后看以下效果。

 

分享到:
评论

相关推荐

    网站后台编辑器下载.rar

    在实际应用中,管理员或内容编辑者需要熟悉后台编辑器的使用,通过它来更新新闻、产品信息、博客文章等,以保持网站内容的鲜活和吸引力。同时,定期的软件更新和维护也是必要的,以确保编辑器的稳定性和兼容性。总的...

    asp KindEditor后台文本编辑器 好用

    通过服务器端的ASP代码,开发者可以轻松地实现与数据库的交互,将用户编辑的内容保存到数据库中,或者从数据库中读取内容显示到编辑器中。 文件列表中的"asp.net"可能意味着KindEditor不仅支持ASP,还可能提供了与...

    兼容性好的网站后台编辑器

    本文将详细介绍"兼容性好的网站后台编辑器"及其特点,以及如何在不同的Web开发环境中(如ASP、PHP、.NET)进行集成和使用。 标题中的“兼容性好”意味着该编辑器能够适应多种浏览器和操作系统环境,确保用户无论...

    kindeditor集成jmeditor公式HTML富文本编辑器

    在Java Web开发中,有时我们需要集成这样的编辑器来增强用户在后台系统中的文本输入体验,比如编写文章、发布新闻或编辑复杂格式的文档。而JMathEditor则是一个专门用于插入和编辑数学公式的插件,它可以与...

    Framework.Asp.Net.百度编辑器UEditor(前端加后台DLL调用例子).zip

    百度编辑器UEditor(前端加后台DLL调用例子)" 这个标题表明,这是一个关于使用ASP.NET框架,结合百度的富文本编辑器UEditor的示例项目,其中涉及到前端和后端DLL的交互。这个项目可能是为了展示如何在ASP.NET Web应用...

    JSP自定义标签-html在线编辑器

    2. AJAX:用于在后台处理编辑器中的内容更改,如保存或预览HTML。 3. JSON:可能用于在客户端和服务器之间传递数据,特别是当需要保存或加载编辑器状态时。 4. JSP与后端交互:编辑器的保存功能可能需要调用JSP页面...

    网站文章后台编辑器 asp.net

    在这个场景中,"网站文章后台编辑器"是指一个基于ASP.NET开发的工具,用于帮助内容创作者在网站后台便捷地撰写、编辑和管理文章。这种编辑器通常具有丰富的文本格式化选项、图片上传功能、链接插入以及预览等功能,...

    简洁版html编辑器qq编辑器

    该编辑器采用了“所见即所得”(WYSIWYG)的编辑模式,这意味着用户在编辑器中看到的内容就是最终网页显示的效果。这种模式极大地降低了使用门槛,因为用户无需了解HTML语言的细节,就能直接进行排版和格式设置。...

    SpringBoot整合UEditor文本编辑器

    6. **前端集成**:在HTML页面中引入UEditor的JavaScript文件,使用`&lt;script&gt;`标签,并初始化编辑器实例。 7. **测试与调试**:通过浏览器访问页面,验证UEditor是否正常工作,如图片上传、保存、显示等功能。 **四...

    基于wps在线编辑、在线预览后台服务

    这些框架都有成熟的库,如Axios用于HTTP请求,富文本编辑器如Quill或CKEditor支持WPS文档的编辑。 7. **错误处理与日志记录**:为了确保服务的稳定性和可维护性,需要良好的错误处理机制和日志记录系统。SLF4J和...

    java web文本编辑器

    本文将深入探讨Java Web文本编辑器的相关知识点,包括其工作原理、主要功能、常见类型以及如何在JSP中集成和使用。 1. **工作原理** Java Web文本编辑器通常基于JavaScript实现前端部分,利用AJAX技术与后台Java...

    phpcms v9 整合 百度编辑器

    然而,原生的后台编辑器可能在某些方面无法满足所有用户的需求,例如格式化、图片上传等功能可能不够完善。这时,整合第三方编辑器就显得尤为重要。本篇将详细探讨如何将`百度编辑器`(UEditor)整合到`phpcms v9`中...

    百度编辑器织梦后台.zip

    【标题】"百度编辑器织梦后台.zip"指的是在织梦内容管理系统(DedeCMS)的后台集成百度编辑器的教程或资源包。织梦内容管理系统是一款基于PHP+MySQL开发的开源内容管理框架,广泛用于搭建网站。百度编辑器(Ueditor)...

    asp 编辑器

    4. **数据交互**:当用户在编辑器中完成内容编辑后,ASP需要获取编辑器中的HTML内容,通常通过JavaScript的DOM操作获取,然后通过AJAX异步提交到服务器端处理,或直接在表单提交时作为隐藏字段的一部分发送。...

    JS版百度编辑器可直接使用

    - **Web应用**:对于基于Web的应用程序,例如CMS(内容管理系统)或者BBS(论坛),将编辑器集成到后台管理界面,让管理员可以方便地编辑和发布内容。 - **博客系统**:在个人博客系统中,百度编辑器可以作为撰写...

    wangEditor3富文本编辑器demon

    然后,可以通过JavaScript与C#进行交互,例如通过AJAX技术向服务器发送编辑器中的内容,或者接收服务器端的数据更新编辑器显示。在C#端,可以设置Web方法来处理这些请求。 具体步骤如下: 1. **引入编辑器库**:在...

    KindEditor文本编辑器

    4. **图片资源**:可能包含编辑器中使用的图标和其他图形元素。 5. **示例代码**:可能包括如何在项目中集成和调用KindEditor的代码片段。 6. **文档**:可能有关于如何使用和自定义KindEditor的说明文件。 通过这...

    asp.net编辑器

    反之,在显示时,从数据库取出内容,填充到编辑器中。 4. **安全性**:由于编辑器允许用户输入HTML,因此必须考虑XSS(跨站脚本攻击)的安全问题。开发者需要过滤或转义用户输入的不安全内容,防止恶意代码被执行。...

    C# .NET MVC UEditor富文本编辑器

    UEditor会根据这个返回结果更新编辑器中的图片或视频引用。 为了确保安全性,你还需要考虑以下几点: 1. 文件类型检查:限制上传的文件类型,防止恶意文件上传。 2. 文件大小限制:设定上传文件的最大大小,避免...

    新版分类系统后台标签调用插件 for PHP168.rar

    4. **易于集成**:无论是在模板文件中还是在内容编辑器里,用户都能轻松插入这些标签,使内容管理更为便捷。 5. **兼容性**:由于是为PHP168系统量身定制,这款插件能很好地与系统其他组件协同工作,不会引起冲突。...

Global site tag (gtag.js) - Google Analytics