300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 如何配置一个最基本的web富文本编辑器?--之wangEditor(验证成功)

如何配置一个最基本的web富文本编辑器?--之wangEditor(验证成功)

时间:2019-04-17 02:30:55

相关推荐

如何配置一个最基本的web富文本编辑器?--之wangEditor(验证成功)

第一步,引用wangEditor的css文件,css文件最好在<head>中引用

<link rel="stylesheet" type="text/css" href="css/wangEditor-1.3.0.min.css">

第二步,引用jquery和wangEditor.js,js文件最好在<body>最下方引用

<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script><script type="text/javascript" src='js/wangEditor-1.3.0.min.js'></script>

第三步,配置富文本框。

<script type="text/javascript">$(function(){$('#textarea1').wangEditor();});</script>

一个完整的配置实例:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><!-- 5.29:wangEditor富文本编辑器:测试成功! --><link rel="stylesheet" type="text/css" href="wangEditor/css/wangEditor-1.3.0.min.css"><title>发帖</title></head><body><form name="myForm" action="ArticleManage.action" method="post"> 标题: <input type="text" name="title" size="32">(限输入15个文字)<br> <!-- 5.16加个id属性 -->内容:<textarea rows="10" id="editor" cols="25" name="content" ></textarea><input type="submit" value="提交"> <input type="reset" value="重置"> </form> <script type="text/javascript" src='wangEditor/js/jquery-1.10.2.min.js'></script><script type="text/javascript" src='wangEditor/js/wangEditor-1.3.0.min.js'></script> <script type="text/javascript">$(function(){$('#editor').wangEditor();});</script></body></html>

我已5月30日用了该文本编辑器,并配置成功(struts等其他框架标签的textarea里没配置成功)。即只适用于普遍的HTML的textarea标签中使用

以上demo是wangEditor的最基本应用。引用css和js文件,为textarea执行一个wangEditor()方法,即可生成富文本框。

效果展示:

更多配置请参见:文档说明

或/doc.html及/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。