几种常用网页文本编辑器总结
文本编辑器应用总结
一.
lhgeditor组件文件结构:
1.
2.
3.
以上三个文件为组件所必须的三个文件,组件包中其它以“_”开头的文件为示例的演示文件,实际使用中不需要这些文件。当然框架核心文件lhgcore.js是每个组件都必须用到的文件,记得加载组件前先要加载此文件。
lhgeditor组件使用说明:
1.
2.
例:
<script
window.onload
{
}
</script>
<form
<div>
<textarea
lhgeditor小型在线编辑器</textarea>
</div>
<input
</form>
(1)
二.
<script
bkLib.onDomLoaded(function()
new
new
new
new
'superscript','html','image']}).panelInstance('area4');
new
});
</script>
//默认模式
//new
<textarea
//All
//new
<textarea
//new
<textarea
(3)
//自定义按钮
//new
'superscript','html','image']}).panelInstance('area4');
<textarea
(4)
//设置文本编辑器的最大高度
//new
<textarea
</textarea>
(5)
三.
(1)
(2)
默认模式
<script
<script
<script>
var
KindEditor.ready(function(K)
editor
resizeType
allowPreviewEmoticons
allowImageUpload
items
});
});
</script>
<textarea
</textarea>
(6)
Multi
<script
<script>
var
KindEditor.ready(function(K)
K('select[name=lang]').change(function()
if
editor.remove();
editor
}
editor
langType
});
});
K('select[name=lang]').change();
});
</script>
<form>
<p>
<select
<option
<option
<option
<option
</select>
</p>
</form>
(7)
粘贴设置:
<script
<script
<script>
KindEditor.ready(function(K)
K.create('#content1',
pasteType
});
K.create('#content2',
pasteType
});
K.create('#content3',
pasteType
});
});
</script>
<textarea
visibility:hidden;">
</textarea>
(8)
</textarea>
(9)
HTML粘贴
<textarea
visibility:hidden;"></textarea>
(10)
自定义插件
<script
<script
<script>
//
KindEditor.lang({
example1
});
KindEditor.plugin('example1',
var
self.clickToolbar(name,
self.insertHtml('<strong>测试内容</strong>');
});
});
//
KindEditor.lang({
example2
});
KindEditor.plugin('example2',
var
function
var
if
cmd.wrap('<span
text-decoration:line-through;"></span>');
}
cmd.wrap('<span
}
cmd.select();
self.hideMenu();
}
self.clickToolbar(name,
var
name
width
});
menu.addItem({
title
click
click('red');
}
});
menu.addItem({
title
click
click('green');
}
});
menu.addItem({
title
click
click('yellow');
}
});
menu.addItem({
title
click
click('adv_strikethrough');
}
});
});
});
KindEditor.ready(function(K)
K.create('#content1',
cssPath
items
});
});
</script>
<textarea
(11)
单独调用组件
上传图片弹出框
<script
<script
<script>
KindEditor.ready(function(K)
var
allowFileManager
});
K('#image').click(function()
editor.loadPlugin('image',
editor.plugin.imageDialog({
imageUrl
clickFn
K('#url').val(url);
editor.hideDialog();
}
});
});
});
});
</script>
<input
(12)
取色器
<script
<script>
KindEditor.ready(function(K)
var
K('#colorpicker').bind('click',
if
colorpicker.remove();
colorpicker
}
var
colorpicker
x
y
z
selectedColor
noColor
click
K('#color').val(color);
colorpicker.remove();
colorpicker
}
});
});
});
</script>
<input
(13)
四.
使用步骤:
1.把edit.htm
2.把想要使用的地方包含edit.jsp就行了
<!--富文本编辑器-->
注意事项:
在需要引入编辑器的页面中的onload事件,要结合edit.jsp中的事件
五.
(1)
注:如果您网站中没有使用jQuery框架,也请一并上传jquery文件夹中的jquery-1.4.4.min.js
(2)
<script
<script
注:如果jQuery之前已经在项目页面中使用,请勿重复添加引用代码
(3).
方法1:在textarea上添加属性:
例如:<textarea
方法2:在您的页面初始JS代码里加上:
$('#elm1').xheditor();
例如:
$({
$('#elm1').xheditor();
});
相应的卸载编辑器的代码为
$('#elm1').xheditor(false);
例:
自定义按钮
<script
<script
<script
$(pageInit);
function
{
$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});
$('#elm1').xheditor({tools:'full'});
$('#elm2').xheditor({tools:'mfull'});
$('#elm3').xheditor({tools:'simple'});
$('#elm4').xheditor({tools:'mini'});
$('#elm5').xheditor({tools:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'});
$('#elm6').xheditor({tools:'Cut,Copy,Paste,Pastetext,/,Source,Fullscreen,About'});
}
function
</script>
1,full(完全):<br
<textarea
</textarea>
2,mfull(多行完全):<br
<textarea
</textarea>
3,simple(简单):<br
<textarea
</textarea>
(16)
4,mini(迷你):<br
<textarea
</textarea>
<textarea
</textarea>
6,自定义多行模式:<br
(19)
皮肤选择
注:为了保持项目精简,同一个页面只能调用一个皮肤,当同一界面同时调用多个皮肤时,最后一个皮肤的按钮面板样式会影响之前的
<script
<script
<script
$(pageInit);
function
{
$.extend(xheditor.settings,{shortcuts:{'ctrl+enter':submitForm}});
$('#elm1').xheditor({skin:'default'});
$('#elm2').xheditor({skin:'o2007blue'});
$('#elm3').xheditor({skin:'o2007silver'});
$('#elm4').xheditor({skin:'vista'});
$('#elm5').xheditor({skin:'nostyle'});
}
function
</script>
1,默认皮肤:<br/>
<textarea
</textarea>
(20)
2,Office
<textarea
</textarea>
(21)
3,Office
<textarea
</textarea>
(22)
4,Vista:<br
<textarea
</textarea>
5,NoStyle:<br
<textarea
</textarea>
(24)
六.
使用:
tinyMCE.init({
mode
theme
skin
});
默认模式
<script
<script
tinyMCE.init({
mode
theme
});
</script>
<textarea
</textarea>
皮肤设置
<script
<script
tinyMCE.init({
//
mode
elements
theme
plugins
advlink,emotions,iespell,insertdatetime,preview,media,searchreple,print,contextmenu,paste,directionality,fullscreen,noneditable,
visualchars,nonbreaking,xhtmlxtras,template,inlinepopups,autosa",
//
numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,prevw,|,forecolor,backcolor",
theme_advanced_buttons3
charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",
theme_advanced_buttons4
styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,no,
template,pagebreak,restoredraft",
theme_advanced_resizing
//
content_css
//
//
template_replace_values
username
staffid
}
});
</scritp>
<textarea
(26)
<script
<script
//
tinyMCE.init({
//
mode
elements
theme
skin
plugins
emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreg,xhtmlxtras,template,inlinepopups,autosave",
//
theme_advanced_buttons1
justifyleft,justifycenter,justifyright,justifyfull,styleselect,
formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2
bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3
charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullsc",
theme_advanced_buttons4
styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,
nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location
theme_advanced_toolbar_align
theme_advanced_statusbar_location
theme_advanced_resizing
//
content_css
//
template_external_list_url
external_link_list_url
external_image_list_url
media_external_list_url
//
template_replace_values
username
staffid
}
});
</script>
<textarea
</textarea>
(27)
<script
<script
//
tinyMCE.init({
//
mode
elements
theme
skin
skin_variant
plugins
iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,
paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,
xhtmlxtras,template,inlinepopups,autosave",
//
theme_advanced_buttons1
,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2
bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,
inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3
sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4
styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchas,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location
theme_advanced_toolbar_align
theme_advanced_statusbar_location
theme_advanced_resizing
//
content_css
//
template_external_list_url
external_link_list_url
external_image_list_url
media_external_list_url
//
template_replace_values
username
staffid
}
});
</script>
<textarea
</textarea>
<script
<script
//
tinyMCE.init({
//
mode
elements
theme
skin
skin_variant
plugins
iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,
paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,
xhtmlxtras,template,inlinepopups,autosave",
//
theme_advanced_buttons1
,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2
,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,
redo,|,link,unlink,anchor,image,cleanup,help,code,|,
insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3
sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4
,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft",
theme_advanced_toolbar_location
theme_advanced_toolbar_align
theme_advanced_statusbar_location
theme_advanced_resizing
//
content_css
//
template_external_list_url
external_link_list_url
external_image_list_url
media_external_list_url
//
template_replace_values
username
staffid
}
});
</script>
<textarea
</textarea>
七.
1.避免了重复加载源码高亮的核心代码
2.修复了word粘贴table过滤出错问题
3.修复插入地图会出现style="undefined"的问题
4.优化了list,多个相邻的属性一直的list会合并
5.可以在列表中的一行里产生多行的效果(通过回车再回退操作),类似office的效果
6.添加自定义样式功能
7.修了在chrome下右键删除td里的图片会把整个td删除的问题
8.改进了不同的页面调用一个editor,URL问题
9.增加了颜色选择器的颜色
10.改进了提供的后台程序的安全性
11.代码高亮支持折行
12.改进了源码编辑模式下的性能(ie下),并且支持自动换行
13.修改了在destroy之后会在ie下报错的问题
14.给初始化容器name值,那么在后台取值的键值就是name给定的值,方便多实例在一个form下提交
15.支持插入script/style这样的标签
16.修复了列表里插入浮动图片,图片不占位问题
17.源码模式下,去掉了pre中的
18.完善了_example下的demo例子
19.base64的图片被过滤掉了
例:
简单应用
<script
<script
//
<script
几种常用网页文本编辑器总结相关推荐
- Ubuntu下几种常用的文本编辑器
常见的基于控制台的文本编辑器有以下几种: emacs 综合性的GNU emacs 编辑环境 nano 一个类似于经典的pico的文本编辑器,内置了一个pi ...
- 安装VSCode作为常用的文本编辑器
作为程序员,跟文本编辑器打交道那是天天都在做的事情,一个趁手的文本编辑器能大大地提供工作效率,减少996福报. 笔者使用过各种文本编辑器,或是xx版,或是免费版,多多少少都有一些不便之处,如今 VS ...
- python文字编辑器推荐_推荐5个常用的文本编辑器
1. UltraEdit UltraEdit是一款商业软件,自从1994年开始投入市场.但是,根据用途的不同,用户可享15日或30日的免费试用期.这款软件广泛被开发人员所接受,2006年Softped ...
- android 富文本框架_五种JavaScript富文本编辑器,总有一款适合你
全文共2099字,预计学习时长4分钟 也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商 ...
- 五种JavaScript富文本编辑器,总有一款适合你
也许,你时常会遇到要开发基于Web的文本编辑器的情况.有时候,只需实现一个简约且轻量级的应用程序,不必有其他任何不必要的功能.而有时候,你的首要任务是保护用户的商业机密. 在这样的情况下,如果想知道& ...
- linux下编辑文件实验,Linux上最常用的文本编辑器vi/vim使用教程
vi(vim)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim).vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率.vi是"visual interfa ...
- 网页文本编辑器插入网页中无法正常显示运行
问题现象:网页编辑器插入后不能够正常运行 解决办法:浏览器换成兼容模式+选择浏览器版本,或者使用搜狗浏览器+兼容模式 可能程度:基本IE6以上都会会出现此问题 最近在做一个网页,需要文本编辑内容部分, ...
- 常用linux文本编辑器nano,linux常用文本編輯器nano/vi/vim
linux下有很多文本編輯器,其中系統(不管哪個分支)都會自帶nano和vi這兩個最基本的編輯器.vim相當於vi的升級版.這里我們依次來講解這幾個編輯器的用法. 1.nano 直接在命令行中敲入na ...
- linux常用的文本编辑器(tr,uniq,sort,sed,awt)
sort命令文本排序工具 sort只影响输出结果,不影响源文件 sort以行为单位,以每行的ascii码值得大小进行升序排序. 格式:sort 待排序文件:将文件内的文本内容进行排序,a到z的这种 . ...
最新文章
- java中运算符_JAVA中的运算符
- 管理Vim插件的插件——Vundle
- 信息系统项目管理知识--企业信息化
- 点击展开 表格_CAD怎么将excel表格的数据导入并且实时更新?
- Js+Css打造的红色经典伸缩菜单代码
- Nik Collection 4 for Mac可独立使用的ps滤镜工具
- 动态规划题目-------蓝桥杯真题-------蓝桥杯备战
- Rxjava2.X的一些讲解
- Apabi Reader 4.0.1正式发布!
- Axure RP 使用基础教程
- Spring AOP实现原理简介
- 关于cdd文件的配置
- 6羽的调侃并不彻底的激怒武青云
- 中央广播电视大学中等专业办公设备使用与维护
- 25 - 线程池和指令系统
- laydate设置只选择年月
- opencv模拟景深效果
- SEO优化之—关键词批量查询工具
- 【一句日历】2019年5月
- 微信支付不成功的几个原因