I am reloading content of a div using an ajax request.
<div>
<textarea id="content-value" rows="15" cols="40" class="tinymce" style="width:100%"></textarea>
</div>
Within this div I have a text area that is initialized with tinymce...
tinyMCE.init({
mode: "specific_textareas",
editor_selector: "tinymce",
theme : "advanced",
theme_advanced_buttons1: "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|formatselect,fontsizeselect,|,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
height: "340",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : false
});
After loading the content with an AJAX request, I remove the editor, replace the content, and then attempt to re-add the editor to tinyMCE.
function OnCreateResponse(response) {
if(response.success) {
tinymce.EditorManager.execCommand('mceRemoveControl',true, 'content-value');
$(dlgElem).html(response.html);
tinymce.EditorManager.execCommand('mceAddControl', true, 'content-value');
}
}
}
Upon re-adding tinyMCE gives me the following error
Error: tinyMCE.get("content-value") is
undefined
when executing ...
tinymce.EditorManager.execCommand('mceAddControl', true, 'content-value');
Does anyone have any ideas as to what I am doing wrong?
Related
I'm using Datatables with Scroller plugin and server-side loading. When data are loaded, header columns are resized and often (not always) don't fit to inside columns.
Picture of a situation (http://i.stack.imgur.com/J3zMz.png):
Relevant datatables setting code:
"sScrollY" : window.innerHeight - 270,
"bServerSide" : true,
"sDom" : "frtiS",
"bProcessing" : true,
"bDeferRender" : true,
"bAutoWidth" : true,
"oScroller" : {
"rowHeight" : 33,
"autoHeight" : false,
"serverWait" : 100
},
Is there any way how force header columns to always fit the content (and vice versa)?
Thanks.
try
$(window).load( function () {
$('#myTable').dataTable().fnAdjustColumnSizing( false );
} );
While I am pasting a content from a webpage, the tinymce editor in IE8 doesn't display the content.
Hi, i am adding the image that I got.
My issue is
1.I have copy content from the webpage http://ch.tbe.taleo.net/CH02/ats/careers/requisition.jsp?org=TRAILERPARK&cws=1&rid=148
and try to paste in to my tinymce editor which is open in Ie8..
2.the result is shown as like in the image as red box
Refere to Adding new fonts to TinyMCE font options
the site you're copying from uses (see the source):
#font-face
{
font-family: "Museo Slab W01 1000";
src: url("http://www.trailerpark.com/Fonts/ee02ec61-b42e-49bb-9942-0793380267f5.eot?iefix");
src:
url("http://www.trailerpark.com/Fonts/f6e64e68-be62-481f-bcf3-923028fc62e0.svg#f6e64e68-be62-481f-bcf3-923028fc62e0") format("svg"),
url("http://www.trailerpark.com/Fonts/b6bcb198-882f-4f57-a02c-07e8155aab5f.woff") format("woff"),
url("http://www.trailerpark.com/Fonts/cfa01f25-bb4c-4a09-8ba3-8afafcbb3508.ttf") format("truetype");
}
Use the method type : encoding : "raw"
function exilTinyMCEInit(args) {
tinyMCE.init({
mode : "exact",
theme : "advanced",
plugins : "paste",
elements : args,
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,bullist,numlist,undo,redo",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "bottom",
theme_advanced_toolbar_align : "center",
theme_advanced_resizing : false,
onchange_callback : "exilTinyMCEOnChangeHandler",
encoding : "raw",
setup : function(ed) {
var curElement = P2.getFieldObject(ed.id);
if (curElement.disabled || curElement.readOnly) {
ed.settings.readonly = true;
} else {
ed.settings.readonly = false;
}
}
});
}
I am using an inline editor ipweditor tool which internally use tinyMCE editor. On their demo page it is using old version of tinyMCE which is not working in my IE. So I updated tinyMCE with latest version.
In old version of TinyMCE it was returning me defined content with all the HTML tags, while in new version it is returning me only text without HTML tags.
Here is the link of jsFiddle demo. Anyone know how do I configure tinyMCE so it return me HTML tags also.
HTML
<div style="display:none">
<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>
</div>
<div style="border: solid thin gray; padding:5px;">
<div class="my_text"><b> <span>Click me! I am editable and WYSIWYG!!!</span></b>
</div>
Javascript
$(document).ready(function () {
var ed = new tinymce.Editor('content', {
mode: "exact",
theme: "advanced",
plugins: "emotions,table",
theme_advanced_toolbar_location: "top",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
theme_advanced_buttons1: "bold,italic,underline,fontselect,fontsizeselect,forecolor,backcolor,|,code,",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
table_default_cellspacing: 0,
table_default_border: 1,
remove_linebreaks: false
});
$('.my_text').editable({
type: 'wysiwyg',
editor: ed,
onSubmit: function submitData(content) {
alert(content.current);
},
submit: 'save',
cancel: 'cancel'
});
});
It's always not preferable to make any modification in plugin library, but this really need some modification. The problem was with 'ipweditor.js' tool. It's creating new tinyMCE editor object internally and getting response in "text" format from tinyMCE.
var r =options.editor.getContent({format : 'text'});
We need to replace 'text' with 'html'
var r =options.editor.getContent({format : 'html'});
It's more preferable to make this format setting also dynamic so append a setting variable in inital settings and fetch value from there.
var defaults = {
onEdit: null,
onSubmit: null,
onCancel: null,
editClass: null,
submit: null,
cancel: null,
type: 'text', //text, textarea or select
submitBy: 'blur', //blur,change,dblclick,click
editBy: 'click',
editor: 'non',
options: null,
format:'text'
}
var options = $.extend(defaults, options);
and now retrieve using the format defined in setting.
var r =options.editor.getContent({format : options.format});
You can use content.previous. Here is a modified fiddle.
Please help. I use tinyMCE as inline editor. So I need that when user in edit mode press enter then will be <br /> not <p>. I read manual and FAQ and try
tinyMCE.init({
'height' : '100%',
'widht':'100%',
'content_css' : styles + ',/sdtc-new/nc/interface/common/css/mce-editor.css',
'mode' : "specific_textareas",
'editor_selector' : prefix + o.id,
'theme':'advanced',
theme_advanced_buttons1: o.buttons.join(','),
theme_advanced_buttons2 : "",
**theme_advanced_buttons3 : "",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '' // Needed for 3.x**
});
But it's not work . Actually some time it's work like when I delete all conetent in edit area and type new text. But i need that it works all time. Please help. Version of tinyMCE 3.4.4
You will need to set
tinyMCE.init({
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false
...
});
Here is a helpfull section of the tinymce FAQ.
I try to create template and this template should be from 1 element - textarea, but this textarea should be extended to TinyMCE control.
I try to do it via following ascx control:
<textarea id="SubComment" name="SubComment" style="width: 80%">
<% = Html.Encode(ViewData.TemplateInfo.FormattedModelValue) %></textarea>
<script type="text/javascript" src="/Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,nonbreaking,xhtmlxtras,template,imagemanager,videoupload",
// Theme options
theme_advanced_buttons1: <% = txtAdvButtons %>,
theme_advanced_buttons2: "tablecontrols",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "",
theme_advanced_resizing: true,
onchange_callback: "changed",
// Example content CSS (should be your site CSS)
content_css: "css/example.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "js/template_list.js",
external_link_list_url: "js/link_list.js",
external_image_list_url: "js/image_list.js",
media_external_list_url: "js/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "Some User",
staffid: "991234"
},
setup: function(editor) {
editor.addButton('myupload', {
title: 'Insert image',
image: '/tiny_mce/plugins/imagemanager/pages/im/img/insertimage.gif',
onclick: function() {
mcImageManager.upload({
path: '{0}',
onupload: function(info) {
var i, html = '';
for (i = 0; i < info.files.length; i++)
html += '<img src="' + info.files[i].url + '" />';
editor.execCommand('mceInsertContent', false, html);
}
});
}
});
}
});
</script>
but when I try to use this template I see simple textarea. How to apply this javascript extention (it works correctly out of ascx control)?
Thanks
So I read up on the documentation for tinyMCE and it turns out that the code you posted there should be placed in the Head tag or another script file.
Change your textarea to this:
<textarea name="SubComment" class="tinyMCETextArea" style="width: 80%">
And in your tinyMCE initialization code:
$(function(){
tinyMCE.init({
/// all your options
editor_selector: "tinyMCETextArea",
/// More stuff
});
});