技术标签: 前端开发基础 富文本 前端 html javascript
本文推荐两款简单的富文本编辑器【KindEditor,NicEdit】用于获得所见即所得的编辑效果,本文仅供学习分享使用,如有不足之处,还请指正。
这两款编辑器都是采用JavaScript编写,不需要引用dll,可以与主流后端编程语言【Java , .NET,PHP,ASP等】无缝对接,体积小,可以将现有的TextArea变成富文本编辑器。下面来分别介绍下:
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
KindEditor,如下图所示,
如何获取获取编辑后的内容【KindEditor的可视化操作在新创建的iframe上执行,代码模式下的textarea框也是新创建的,所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。】,可以采用如下代码:
// 取得HTML内容
html = editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById('editor_id').value; // 原生API
html = K('#editor_id').val(); // KindEditor Node API
html = $('#editor_id').val(); // jQuery
// 设置HTML内容
editor.html('HTML内容');
关于本例KindEditor的Html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>KindEditor</title>
<link rel="stylesheet" href="kindeditor/themes/qq/qq.css" />
<link rel="stylesheet" href="kindeditor/plugins/code/prettify.css" />
<script charset="UTF-8" src="kindeditor/kindeditor-all-min.js"></script>
<script charset="UTF-8" src="kindeditor/lang/zh-CN.js"></script>
<script charset="UTF-8" src="kindeditor/plugins/code/prettify.js"></script>
<script type="text/javascript">
var editor1;
KindEditor.ready(function(K){
editor1=K.create('#t1',{
cssPath:'kindeditor/plugins/code/prettify.css',
// uploadJson:'../asp.net/upload_json.ashx',
// fileManagerJson:'../asp.net/file_manager_json.ashx',
allowFileManager:true,
afterCreate:function(){
var self=this;
// K.ctrl(doument,13,function(){
// self.sync();
// K('form[name=example]')[0].submit();
// });
// K.ctrl(self.edit.doc,13,function(){
// self.sync();
// K('form[name=example]')[0].submit();
// });
}
});
prettyPrint();
});
function preSave(){
var html = editor1.html();
editor1.sync();
var s =document.getElementById("t1").value;
document.getElementById("t2").value = s;
alert(s);
return false;
}
</script>
</head>
<body>
<form id="example" name="example">
<label>详细内容:</label>
<textarea id="t1" name="t1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;">
</textarea>
<input type="hidden" id="t2" value="" />
<input type="submit" id="submit" value="提交" onclick="return preSave();" />
</form>
</body>
</html>
NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing.
关于如何获取编辑器后的内容【这里用textarea的id和值是获取不了的,因为nicedit会隐藏原有的textarea,并生成自带的输入框,这是要获取框内文本就需要通过其生成的类名去获取】:可以采用document.getElementsByClassName("nicEdit-main")[0].innerHTML;方式获取
关于本例中NicEdit的Html代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NicEdit</title>
<script type="text/javascript" src="NicEdit/nicEdit.js"></script>
<script type="text/javascript">
var editor1;
bkLib.onDomLoaded(function(){
editor1 = new nicEditor({
fullPanel:true,
iconsPath : 'NicEdit/nicEditorIcons.gif'
}).panelInstance("t1");
});
function preSave(){
var s= document.getElementsByClassName("nicEdit-main")[0].innerHTML;
document.getElementById("t2").value=s;
alert(s);
return false;
}
</script>
</head>
<body>
<form id="example" name="example">
<label>详细内容:</label>
<textarea id="t1" name="t1" style="width:700px;height:300px;"></textarea>
<input type="hidden" id="t2" name="t2" />
<input type="submit" value="提交" id="submit" name="submit" onclick="return preSave();" />
</form>
</body>
</html>
本文旨在抛砖引玉,最好的学习手册(包括下载地址)就是官网。
KindEditor:http://kindeditor.net/demo.php
NicEdit:http://nicedit.com/index.php
文章浏览阅读9.1k次,点赞8次,收藏11次。IDEA Mapper文件直接跳转到xml文件的方法(安装插件MyBatisX)_mapper跳转xml的插件
文章浏览阅读3.7k次,点赞3次,收藏17次。说明本文主要使用python编程,实现解析wav语音文件,得到.wav语音文件的声道数,量化位数,采样频率,采样点数。编写python程序使用pycharm。下面简单介绍一下wav文件结构。一 解析.wav文件原理WAVE文件本质上就是一种RIFF格式,它可以抽象成一颗树(数据结构的一种)来看。 如图所示,从上到下分别对应着二进制数据在文件中相对于起始位置的偏移量。每一个格子对应一..._python查看.wav编码格式
文章浏览阅读65次。http://people.csail.mit.edu/jacobe/software.html转载于:https://www.cnblogs.com/stoneresearch/archive/2011/09/03/4336539.html_dpmm饭圈
文章浏览阅读1.1w次。cp操作请跳到第10节1.open内建打开文件函数作为打开文件的“钥匙”,内建函数open()提供了初始化输入/输出(I/O)操作的通用结接口成功打开文件后会返回一个文件对象,如果打开失败会引发一个错误示例:file_object = open(file_name,mode='r')file_object 是python的变量名用来保存文件对象mode是打开的方式,以读..._python读取linux文件
文章浏览阅读208次。1. 引言在无需可信第三方的情况下,实现不可预测的伪随机数的方案有:VRFVDFCommit-reveal当前,Celo项目采用的是简单的commit-reveal方案来随机选择Validator.对于某特定Validator propose的第nnn个区块,该Validator会在该区块内附加值(rn,sn)(r_n,s_n)(rn,sn),使得keccak256(rn)=sn−1\text{keccak256}(r_n)=s_{n-1}keccak256(rn)=sn−1。对于_uint(keccak256(abi.encodepacked(blockhash(block.number - 1), gasleft())))
文章浏览阅读1.4k次。在网页中,对于已经开启定位的元素可以设置元素层级,如果定位的元素层级是一样的, 下边的元素会盖住上边,在定位的情况下,通过z-index属性设置元素的层级,属性值:是一个正整数,层级越高,优先级也就越高 .box{ width: 200px; height: 200px; } .box1{ background-color: rebeccapurple; position:relative; _html怎么调层级
文章浏览阅读757次。1)常用的画区域,生成区域 (draw_circle,gen_circle,draw_ellipse, gen_ellipse,draw_rectangle1, gen_rectangle1, draw_rectangle2, gen_rectangle2, draw_region, draw_line,gen_region_line, gen_region points等);draw_算子,运行到该行后,需用鼠标画出需要形状,然后单击右键,停止并确认绘制;矩形轮廓边缘 像素为单位。_wpf halcon 绘制roi
文章浏览阅读1k次。可视化可发表的期刊会议_vis会议
文章浏览阅读2.9k次,点赞5次,收藏32次。Python将txt文本文件写入Mysql数据库import pymysqlimport re#数据库连接con=pymysql.connect( host='localhost', port=3306, user='root', passwd='123456', db='case_data', charset='utf8', )def insert(con,case_ID,case_process): cue = con.cur_python将txt写入mysql的表中
文章浏览阅读5k次,点赞24次,收藏68次。广度优先搜索(Breadth-First Search,BFS)是一种图遍历算法,用于系统地遍历或搜索图(或树)中的所有节点。BFS的核心思想是从起始节点开始,首先访问其所有相邻节点,然后逐层向外扩展,逐一访问相邻节点的相邻节点,以此类推。这意味着BFS会优先探索距离起始节点最近的节点,然后再逐渐扩展到距离更远的节点。BFS通常用于查找最短路径、解决迷宫问题、检测图是否连通以及广泛的图问题。BFS算法的步骤如下:初始化:选择一个起始节点,将其标记为已访问,并将其放入队列中(作为起始节点)。_python bfs
文章浏览阅读113次。Python的序列化是指把变量从内存中变为可以储存/传输的数据/文件的过程. 在Python中叫pickling,在其他语言中也被称之为serialization,marshalling,flattening等等,都是一个意思。序列化之后,就可以把序列化后的内容写入磁盘,或者通过网络传输到别的机器上。反过来,把变量内容从序列化的对象重新读到内存里称之为反序列化,即unpickling。在Pytho..._cpickle.dump(obj, f, protocol)
文章浏览阅读3.1k次。static<T>Stream<T>generate(Supplier<? extends T>s)该方法主要用于生成一个无限连续的无序流,流中的元素由用户定义的supplier函数生成。看个简单例子:运行结果:aa该方法一般配合limit方法使用,在这个例子中我们使用limit方法限制这个无限流的长度为2,因此最终打印出两个a。加入我们不使用limit方法限制流长度会出现什么情况?测试一下。Stream<String> ..._stream.generate