zoukankan      html  css  js  c++  java
  • jsp页面集成xhEditor文本编辑器

    经常写博客的都应该接触文本编辑器,现在大多数都是使用Markdown,Markdown是一种可以使用普通文本编辑器编写的标记语言,在文章中通过简单的语法标记就可以实现文字的不同格式,对于Markdown,必须要有一定的语法基础,其实也比较容易,个人还是用惯了比较原始的编辑器,在csdn中提供了Markdown和普通的富文本编辑器xhEditor,xhEditor对于初学者非常简单,选中文字,点击上面的格式按钮,就可以得到想要的格式,插入媒体文件等等都可以。下面介绍在jsp页面中怎样集成xhEditor。

    找到官网http://xheditor.com/,下载最新的版本,对于这种编辑器,大多数都是开源的,在网上搜索富文本编辑器可以搜索到好多,都可以从网站上下载,还有就是这些富文本编辑器都是跨平台的,因为他们几乎都是用javascript脚本语言进行编写,他们的运行时依赖于浏览器的,只要是电脑上安装了合适的浏览器,编辑器都是可以使用的,无论是什么系统。

    我下载的是1.2.2版本,解压得到一个文件夹,里面就是我们需要的文件了,在文件中都会给我们具体使用实例,告诉我们怎么去集成。

    打开这个文件夹,可以看到很多的文件,由于这种编辑器都是脚本语言编写,所以总共也没有多大

    第一个文件夹demos里面就是一些例子,利用浏览器查看源代码就可以知道怎么去用了,点击文件夹打开:

    先看demo01,打开第一个demo后就会发现在第每个demo里都有跳向其他demo的链接。里面有很多的示例,就选择最普通的默认模式,右键查看源代码


    代码中引入了js的脚本代码,在使用时用到了textarea文本框,其中class属性是我们不需要改变的,外面用了一个表单接收传递内容。

    在我们的jsp页面中的head标签中加入

    <script type="text/javascript" src="xheditor-1.2.2/jquery/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
    在body标签中加入一个form表单和textarea标签

    <form method="post" action="">
    <textarea id="elm1" name="elm1" class="xheditor" rows="12" cols="80" style=" 80%">
    </textarea>
    </form>
    我们在表单的action属性中添加要提交的位置,在Servlet中通过request.getParameter获取即可,如果乱码通过request.setCharacterEncoding("UTF-8");设置即可

    运行项目得到:注意示例中给的textarea属性中的name属性是elm1不要写成e1m1,我是直接拿来用了,建议修改一下,便于辨认


  • 相关阅读:
    解题报告:luogu P1156
    解题报告:AT3605
    矩阵乘法与斐波那契数列
    九、模块
    八、异常
    七、文件处理
    六、对象和内存分析
    五、函数和内存分析
    四、控制语句
    三、序列
  • 原文地址:https://www.cnblogs.com/duzhentong/p/8576521.html
Copyright © 2011-2022 走看看