jquery怎样jquery 动态添加行tinymce

Tinymce+jQuery.Validation使用产生的BUG
字体:[ ] 类型:转载 时间:
在IE6下,当页面有advanced模式的Tinymce编辑器,并且,并且jquery.validation使用了jquery.metadata时会出现以下问题
出错位置位于jquery.metadata.js的92行左右位置:
代码如下: else if ( elem.getAttribute != undefined ) { // 这行报错 var attr = elem.getAttribute( settings.name ); if ( attr ) data = }
奇怪的是elem是textarea对象,但是竟然没有getAttribute这个方法 解决:试着修改成以下代码,竟然成功了
代码如下: else { data = $(elem).attr(settings.name); }
IE6 + Tinymce3.3 + jQuery.validation + jQuery.metadata 下出现问题 Firefox没有问题,Tinymce编辑器simple主题没有问题。 已经浪费1个小时了没时间研究。。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具TinyMCE 和 jquery.form 结合使用时必须注意的问题
TinyMCE 和 jquery.form 结合使用时必须注意的问题
PHP开发框架
开发工具/编程工具
服务器环境jquery编辑器插件tinyMCE的使用方法
编辑:www.fx114.net
本篇文章主要介绍了"jquery编辑器插件tinyMCE的使用方法",主要涉及到jquery编辑器插件tinyMCE的使用方法方面的内容,对于jquery编辑器插件tinyMCE的使用方法感兴趣的同学可以参考一下。
jquery编辑插件tinyMCE是一个非常容易集成到您系统的一个html编辑插件,它不像FckEditor那样需要针对专门的后台语言集成,tinyMCE既能做到轻松集成asp.net,php,java又能非常容易的进行扩展和二次开发。详细出处参考:http://www.jb51.net/web/78619.html
修改简化文件大小后的案例下载:下载文件到本地 也可以到官方网站下载最新的基于jquery的 http://www.jb51.net/codes/44180.html
1 html:&textarea id=&txtcontent& runat=&server& name=&elm1″ rows=&15″ cols=&80″ style=&width:80%&&&/textarea&
2 js引用:首先引用tiny_mce.js和jquery-1.4.2.min.js
tinyMCE的调用:复制代码代码如下:
&script type=&text/javascript&&
tinyMCE.init({
// 通用参数配置
mode : &textareas&,
theme : &advanced&,
plugins :&pagebreak,style,layer,table,save&,
// 主题参数配置
theme_advanced_buttons1 :&,bold,italic,underline,strikethrough&,
theme_advanced_buttons2 : &&,
theme_advanced_toolbar_location : &top&,
theme_advanced_toolbar_align : &left&,
theme_advanced_statusbar_location : &bottom&,
theme_advanced_resizing : true,
// 在此处可以更换您自己的样式
content_css : &css/word.css&,
external_link_list_url : &lists/link_list.js&,
// Replace values for the template plugin
template_replace_values : {
username : &Some User&,
staffid : &991234″
参数详解:
mode:textareas或者exact
elements:配合mode中exact使用,它的值为html中要使用的textaear的id或name名称
theme:所使用的样式
skin:找到相应的skin目录下样式
skin_variant:skin目录下的文件css选择,如:skin_variant : &black&表示:skins\o2k7\ui_black.css
plugins:plugins文件夹下插件的选择使用
theme_advanced_buttons1:第一行的功能按钮显示,一下以此类推theme_advanced_buttons2等等
向输入框中通过js追加一个图片并显示,js代码如下:
tinyMCE.execCommand(‘mceInsertContent’,false,&&p&&img src=\&../images/house.jpg\& alt=\&\& width=\&588\& height=\&419\& /&&/p&&);
通过js获取输入框内容,代码如下:tinyMCE.getInstanceById(‘txtcontent’).getBody().innerHTML
详细出处参考:http://www.jb51.net/web/78619.html
一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!
二、互相尊重,对自己的言论和行为负责。
本文标题:
本页链接:tinymce 给tinymce4设置简体中文 - 为程序员服务
为程序员服务
给tinymce4设置简体中文
tinymce4发布了,比以前的更简洁更漂亮了,下载下来简单的折腾了一下,发现默认的langs目录下没有文件,可以到这里来下载需要的。
下载语言包之后需要放在&your tinymce path&/js/tinymce/js/langs/目录下面。
然后再配置tinymce时指定language属性即可,例如下面的例子:
&!DOCTYPE html&
&title&tinymce 4 editor&/title&
&script type=&text/javascript& src=&/js/jquery-1.7.2.min.js&&&/script&
&script type=&text/javascript& src=&./js/tinymce/tinymce.min.js&&&/script&
&script type=&text/javascript& src=&./js/tinymce/jquery.tinymce.min.js&&&/script&
&script type=&text/javascript&&
tinymce.init({
selector: &textarea&,
plugins: [
&advlist autolink autosave link image lists charmap print preview hr anchor pagebreak spellchecker&,
&searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking&,
&table contextmenu directionality emoticons template textcolor paste fullpage textcolor&
toolbar1: &undo redo | cut copy paste | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect&,
toolbar2: & searchreplace | bullist numlist | outdent indent blockquote | link unlink anchor image media code | inserttime preview | forecolor backcolor&,
toolbar3: &table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft&,
menubar: false,
toolbar_items_size: 'small',
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
language:'zh_CN'
});&/script&
&form method=&post& action=&somepage&&
&textarea name=&content& style=&width:100%&&&/textarea&
您可能的代码
相关聚客文章
相关专栏文章TinyMCE汉化及本地上传图片功能实例详解
作者:leftcity
字体:[ ] 类型:转载 时间:
这篇文章主要介绍了TinyMCE汉化及本地上传图片功能实例详解的相关资料,由于我们下载下拉的是英文版,需要先汉化,比较简单,需要的朋友可以参考下
TinyMCE我就不多介绍了,这是下载地址:
下载下来是英文版,要汉化也很简单。
首先去网上随便下载个汉化包,然后把汉化包解压后的langs文件夹里的zh_CN.js拷到你下载的TinyMCE的langs文件夹中就行。最后在 tinymce.init中加上”language: "zh_CN","(后面会贴出代码)
本地图片上传我用到了Jquery中的uploadify和UI,所以需要引用jquery.uploadify.min.js和jquery-ui.js
Jquery中uploadify有基于flash和基于HTML两个版本,后者是要$5。。。这个,,我还是用的基于flash的。
那么还需要添加swfobject.js引用。这些引用的下载就不贴了,网上很多很多。
基本介绍完了,下面直接看代码:
&style type="text/css"&
.mceuploadify{
&link rel="stylesheet" href="@Url.Content("~/uploadify/uploadify.css")"/&
&script type="text/javascript" src="@Url.Content("~/Content/js/history.js")"&&/script&
&script type="text/javascript" src="@Url.Content("~/tinymce_4.3.12/tinymce/js/tinymce/tinymce.min.js")"&&/script&
&script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")"&&/script&
&script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui.js")"&&/script&
&script type="text/javascript" src="@Url.Content("~/uploadify/jquery.uploadify.min.js")"&&/script&
&script type="text/javascript" src="@Url.Content("~/uploadify/swfobject.js")"&&/script&
&script type="text/javascript"&
$(document).ready(function () {
var tinymceE
tinymce.init({
selector: "textarea#Content",
auto_focus: "Content",
language: "zh_CN",
theme: "modern",
plugins: [
"advlist autolink lists link image charmap preview",
"searchreplace visualblocks fullscreen",
"insertdatetime media table contextmenu paste",
"emoticons textcolor"
toolbar1: "undo redo | styleselect | fontselect | fontsizeselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent",
toolbar2: "fullscreen preview | forecolor backcolor emoticons | table | link image media | mybutton",
setup: function (editor) {
editor.addButton('mybutton', {
text: '上传图片',
icon: false,
onclick: function () {
tinymceEditor =
$("#uploadofedit").dialog({
modal: false,
resizable: false,
width: 400,
height: 200,
dialogClass: "mceuploadify"
//TinyMCE 会将所有的 font 元素转换成 span 元素
convert_fonts_to_spans: true,
//换行符会被转换成 br 元素
convert_newlines_to_brs: false,
//在换行处 TinyMCE 会用 BR 元素而不是插入段落
force_br_newlines: false,
//当返回或进入 Mozilla/Firefox 时,这个选项可以打开/关闭段落的建立
force_p_newlines: false,
//这个选项控制是否将换行符从输出的 HTML 中去除。选项默认打开,因为许多服务端系统将换行转换成 &br /&,因为文本是在无格式的 textarea 中输入的。使用这个选项可以让所有内容在同一行。
remove_linebreaks: false,
//不能把这个设置去掉,不然图片路径会出错
relative_urls: false,
//不允许拖动大小
resize: false,
font_formats: "宋体=宋体;黑体=黑体;仿宋=仿宋;楷体=楷体;隶书=隶书;幼圆=幼圆;Arial=arial,helvetica,sans-Comic Sans MS=comic sans ms,sans-Courier New=courier new,Tahoma=tahoma,arial,helvetica,sans-Times New Roman=times new roman,Verdana=verdana,Webdings=Wingdings=wingdings,zapf dingbats",
fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt"
$("#tinymceuploadify").uploadify({
'swf': '/uploadify/uploadify.swf',
'buttonText': '上传本地图片',
'uploader': '/Home/Upload',
'auto': true,
'fileTypeExts': '*. *. *.png',
'method': 'post',
'multi': false,
'onUploadSuccess': function (event, data, flag) {
var img = "&img src='../../../UploadImg/" + data + "'&";
tinymceEditor.insertContent(img);
setTimeout(function () {
$("#uploadofedit").dialog('close');
'onUploadError': function () {
setTimeout(function () {
$("#uploadofedit").dialog('close');
alert("上传失败");
&form method="post" action="/Home/"&
&textarea id="content" name="content" style="width: 100%; height: 600"&&/textarea&
&input type="submit" value="提交" /&
&div id='uploadofedit' style="display:"&
&input type='file' name='tinymceuploadify' id='tinymceuploadify' /&
&label&只能上传单张10M以下的 png、jpg、gif 格式的图片&/label&
$("#tinymceuploadify").uploadify({
'swf': '/uploadify/uploadify.swf',
'buttonText': '上传本地图片',
'uploader': '/Home/Upload',
'auto': true,
'fileTypeExts': '*. *. *.png',
'method': 'post',
'multi': false,
'onUploadSuccess': function (event, data, flag) {
var img = "&img src='../../../UploadImg/" + data + "'&";
tinymceEditor.insertContent(img);
setTimeout(function () {
$("#uploadofedit").dialog('close');
'onUploadError': function () {
setTimeout(function () {
$("#uploadofedit").dialog('close');
alert("上传失败");
这段代码中的参数,如‘swf','uploader','fileTypeExts‘这几个重要的参数
得根据自己下载的jquery.uploadify.js的版本来确定。具体可以去看官方的说明文档。
以上所述是小编给大家介绍的TinyMCE汉化及本地上传图片功能实例详解,希望对大家有所帮助,如果大家想了解更多内容敬请关注脚本之家网站。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具

我要回帖

更多关于 jquery 动态添加input 的文章

 

随机推荐