Pre-note: This issue occurs whether or not I already have a textarea on the page.
I have a button that triggers an ajax request first...writing something to a database and returning the key. I use that key in my ID for the textarea that is then dynamically added to page. Keep in mind that tinyMCE is already initialized.
tinymce.init({
selector: ".editor",
setup: function(ed) {
ed.on('change', function(e) {
tinymce.triggerSave();
$('form').trigger('checkform.areYouSure');
});
ed.on('init', function(e) {
autoresize_max_height: 500
});
},
plugins: [
"advlist autolink link responsivefilemanager lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality template paste textcolor colorpicker responsivefilemanager autoresize"
],
toolbar: "undo redo | styleselect | bold italic | forecolor backcolor | alignleft aligncenter alignright | bullist numlist | outdent indent | table | link responsivefilemanager",
image_advtab: true ,
external_filemanager_path:"/filemanager/",
filemanager_title:"Filemanager" ,
external_plugins: { "filemanager" : "/filemanager/plugin.min.js"},
});
After the textarea is dynamically created, I add some default 'Lorem Ipsum' text and call mceAddEditor
tinymce.execCommand('mceAddEditor', false, "custom-html_" + data.c2akey);
data.c2akey is the key returned from the ajax call.
The tinymce instance is created successfully.
Here's the problem:
1) The instance is super tall. Unless I set a static height on the parent container the textarea is, the editor is really tall. Taller than 500px (from autoresize_max_height). Problem with setting a static height on the parent container is that autoresize wont work. Also I dont see the text from the textarea in this new editor.
2) I can not type in this newly created instance. See Can't type in tinyMCE 4 instance after mceAddEditor
So I need help figuring out why the instance is super tall on creating.
Your first problem (The instance is super tall) I've solved as follows:
tinymce.init({
...
init_instance_callback : function(editor) {
$(editor.iframeElement)
.contents()
.find('body')
.css('min-height', editor.targetElm.rows * 9);
}
});
Related
I have one module in which I displayed TinyMCE editor in a modal popup.
On page load, I bind HTML content as text of text area, and after that, I give that text area control as a selector of tinymce editor.
HTML of text area which is present in the modal popup:
<asp:TextBox ID="txtEditorContent" runat="server" AutoPostBack="false" CssClass="editor-content" TextMode="MultiLine" />
I have one function which is executed when there is an active tinymce editor on page and user clicks on a button which is used to open the modal popup in which another tinymce editor is present, which displayed confirmation message box that whether to save the changes or not.
if user clicks yes then i removed the active editor on page using code
tinymce.remove();
But the content of text area is not displayed in TinyMCE editor.
When i opened the modal popup it displayed as below.
I also checked by inspect element in mozilla, it shows me that there is no content in of tinymce.
Javascript fired on opening the modal popup:
<script type="text/javascript">
$(function () {
tinymce.remove();
tinymce.init({
selector: '.editor-content',
menubar: false,
branding: false,
height: 350,
code_dialog_height: 200,
plugins: ['advlist autolink lists charmap print preview anchor textcolor code', 'searchreplace visualblocks code fullscreen', 'insertdatetime table contextmenu paste code help wordcount'],
toolbar: 'insert | undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | table | code ',
});
});
Can anybody tell me what I am missing?
Note: This issue is not reproduced in the Google Chrome and only in Mozilla Firefox.
I need a tooltip for each items the problem is that when I put for example :
title:'<b>Hover over me<b></br>test'the style is not applicated and so in the tooltip the result was <b>Hover over me<b></br>test not Hover over me test.
I want to change the style of every title in the tooltip .
please have you any ideas
Without some further information, it seems you are in the correct path.
As per documentation:
title - string - "Add a title for the item, displayed when holding the mouse on the
item. The title can be an HTML element or a string containing plain
text or HTML."
Working sample below:
var data = new vis.DataSet([{
id: 2,
content: 'Pi and Mash',
start: '2014-08-08',
title: '<b> Bold title </b> <br> Not bold'
},
...
var timeline = new vis.Timeline(container, data, options);
http://jsfiddle.net/sm4r5pvc/
Update vis version. In the older version, we don't have the tooltip. Make sure you are working with v4.21.0 and above
I want to remove the title area from the ionic popup completely. I removed the title tag and tried. but still can see the title space visible. Here is my code.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
scope: $scope
});
Even if I remove the title tag completely, the title area is still visible with a blank space as shown in the image below. I want to remove the entire title space from the ionicPopup. How can I get it? what changes are to be made in the code?
It is because the title is wrapped inside .popup-head which takes the space.
First add a value of custom-class to cssClass property in the Popup object.
var registerPopup = $ionicPopup.show({
templateUrl: 'templates/register_popup.html',
cssClass: 'custom-class', // Add
scope: $scope
});
You can hide it using custom CSS.
.custom-class .popup-head {
display: none;
}
I have problem with TinyMCE. I work in web forms. Icons on client environment are missing. On my local machine everything is OK. I use the newest version of TinyMCE which is 4.0.2. On server there is IIS 7.0. I have setup this for many different ways. I have also tried put editor in <head> section. Effect is always the same. It is my current implementation:
public static string GetTinyMce4JS(string path, string control, int width, int height, bool enableXmlEncoding = false)
{
StringBuilder sb = new StringBuilder();
sb.Append(string.Format("<script src=\"{0}tinymce/js/tinymce/tinymce.min.js\" type=\"text/javascript\"></script>", path));
sb.Append("<script type=\"text/javascript\">");
sb.Append("tinymce.init({");
sb.Append("selector : \".tinymce\",");
sb.Append("theme : \"modern\",");
sb.Append(" menubar: false,");
sb.Append("plugins : [ \"lists hr anchor pagebreak\",");
sb.Append("\"wordcount visualblocks visualchars \",");
sb.Append("\"insertdatetime nonbreaking directionality\",");
sb.Append("\"paste textcolor moxiemanager\"],");
sb.Append("toolbar1: \"newdocument fullpage | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | styleselect formatselect fontselect fontsizeselect\",");
sb.Append("toolbar2: \"cut copy paste | searchreplace | bullist numlist | outdent indent blockquote | undo redo | link unlink anchor image media code | inserttime preview | forecolor backcolor\",");
sb.Append("toolbar3: \"table | hr removeformat | subscript superscript | charmap emoticons | print fullscreen | ltr rtl | spellchecker | visualchars visualblocks nonbreaking template pagebreak restoredraft\",");
sb.Append("});");
sb.Append("</script>");
return sb.ToString();
}
Then I use this function in code behind (invoke on Page_Load):
string tinyJS = ApplicationHelper.GetTinyMce4JS(ResolveUrl("~"), this.TinyMCEEditor.ClientID, 800, 600, false);
this.TinyMCEJS.Text = tinyJS;
And the aspx file:
<asp:Literal ID="TinyMCEJS" runat="server" />
<asp:TextBox ID="TinyMCEEditor" runat="server" TextMode="MultiLine" Height="600px" ClientIDMode="Static" CssClass="tinymce" z-index="200"
Visible="true"></asp:TextBox>
This is how it looks like on client environment:
And the same on my local machine:
I have finally resolved it!! Stupid mistake... I use publish to deploy web application on the server. I have set "Only files needed to run this application" in publish option and this was the reason. Files for Icons were not published.
I try to add a text filed and a button to the grid panel in extjs with following code:
var shopIdInput = new Ext.form.TextField({
emptyText: "请输入商户Id",
width: 200
});
var deleteOneShopCacheBtn = new Ext.Button({
text : '删除商户缓存',
handler: deleteOneShopCache,
minWidth : 100,
cls: "delBtn"
});
......
var grid = new Ext.grid.GridPanel({
store: store,
columns: columns,
bbar: [shopIdInput, deleteOneShopCacheBtn],
buttons: [clearRedressWordCacheBtn, clearSplitWordCacheBtn, clearRegionCacheBtn, clearCategoryCacheBtn, runCommandBtn],
items: [commandForm],
buttonAlign: 'center',
stripeRows: true,
autoExpandColumn: 'serverUrl',
//title: '批量执行指令',
sm: checkboxSelect,
frame: true,
autoHeight: true,
enableColumnHide: false,
renderTo : 'serverInfoList'
});
But the button deleteOneShopCacheBtn in bbar doesn't look like a common button as button clearRedressWordCacheBtn in buttons. It changes to a button when the mouse is on it. I have tried to fix the problem by set the property cls and fail, so what can I do?
I usually just add an icon to the button which helps it stand out. so just set a value for
iconCls: 'mybuttonicon'
and in your css
.mybuttonicon { background-image: url(../path/to/icon) !important;}
the cls config allows you to specify additional classes to which to apply to your renderable object (in your case a button) but does NOT do anything with making it change based on the mouse hovering over it, etc.
What you need is a listener on deleteOneShopCacheBtn and listen to the mouseover event(also see Sencha docs for the list of events a button responds to). You can fire off a function and make your button look like whatever you want. I am currently at work. If you still have this question when I get home tonight I can post some code.
Also see following example:
Button click event Ext JS
}