I want to render tinymce4 on a textarea which is contained in a masked div but I have this error :
FontFamily is undefined
My render script is :
new tinymce.Editor('textarea_id', custom_settings, tinymce.EditorManager).render();
You can see the error in this fiddle, when you click on the "render" button :
http://fiddle.tinymce.com/uLfaab
With tinymce 3 I have no problem to do this.
Is there a way to solve this problem?
Thanks
If the <textarea> that contains TinyMCE is inside of a non-visible <div> then TinyMCE won't be visible either.
If you look at the source of the page (using browser tooling) you will see that TinyMCE is indeed "running" but not visible.
If you want the <textarea> to initially be invisible and then become visible when the button is clicked you can do that via JavaScript in your function behind your button.
I have updated your TMCE Fiddle: http://fiddle.tinymce.com/uLfaab/1
There were two changes...
1 - put an ID on your containing <div> so you can easily target it via JavaScript:
<form method="post" action="dump.php">
<div id="tmceDiv" style="display:none;">
<textarea id="tmce" name="content" class="mceEditorTxtModif"></textarea>
</div>
</form>
2 - Use JavaScript to make the containing <div> visible:
function test() {
new tinymce.Editor("tmce", tmce_settings_bureau, tinymce.EditorManager).render();
// This next line makes the DIV visible!
document.getElementById('tmceDiv').style.display = 'block';
}
Related
I'm new to CKEditor. I'm trying to build a plugin that inserts a new div element which contains some custom content. The user have to see in the editor only a fake element that represent the true generated html content, created through createFakeElement() function.
Here is the onOk() function of the plugin :
onOk: function () {
var dialog = this,
data = {},
container = editor.document.createElement('div');
this.commitContent(data);
container.addClass('insert').setHtml(data.htmldata);
var fakeElement = editor.createFakeElement(container, 'insert', 't_insert', false);
editor.insertElement(fakeElement);
}
The issue is that when I insert the fakeElement in the editor, I can see in the source view that my div is surrounded with a tag :
<p>
<div class="insert">...</div>
</p>
When I re-open the source view a second time, ckeditor cleans the code and then it looks like this :
<p> </p>
<div class="insert">...</div>
<p> </p>
When I try to insert the real element ('container' variable), everything is ok, there is no tags added to the source, the problem seems to be tied to the fake element.
Have you any idea why these tags are added to the source when a fake element is inserted in the editor ?
I'm not sure about plugins and ckeditor, but generally browsers and probably editors then don't allow inline elements to contain block elements, hence paragraph can not have division inside.
The P element represents a paragraph. It cannot contain block-level
elements (including P itself).
We discourage authors from using empty P elements. User agents should
ignore empty P elements.
Source: http://www.w3.org/TR/html401/struct/text.html#h-9.3.1
Background
I am creating a #Name Tagging system for my webpage. and I've succeeded in finding names on keystroke and replace the content with equivalent div class='tag' data-id='User-id'>Name</div>(at least for displaying). Now before submitting those contents from contentEditable div. I modify them in a textarea (which is usually hidden).
Working
As soon as .keyup event occurs on contentEditable all the contents of contentEditable are processed by function MakeItForWeb(contentEditable). Which then Manipulates the contents of textarea which will be processed by server side php script. that php script will strip all the tags and then store data in DB. so before submitting I try to replace all the .tag div with following format of data:
#["id":"User-id","Tag":"User-Name"];
In <textarea>, I have created a regular expression in javascript to achieve the task. and it is working fine, when there is single .tag in single line, You can see it Here.
Problem
When More than 1 .tag occurs in a single line then My regex fails to recognize all of them correctly, and recognize only last of them. And thus whole tagging system crashes, You can see it Here. May be My approach is wrong. Can Experts here help me out please? any suggestion is welcome.
My Efforts(Code)
JavaScript + JQuery:
$(document).ready(function(){
$("body").attr("spellcheck","false");
$("#tarea").keyup(function(e){ // Process KeyUp Event
/* Code to find Names on #N..and create a tag is omitted purposefully as it is working fine */
// Make each tag Un-editable, So that User cant change it
$(".tag").each(function(){
$(this).attr("contentEditable","false");
});
//Manipulate the textarea with equivalent value
MakeItForWeb(this);
}).focus(function(){
//Manipulate the textarea with equivalent value from contentEditable
MakeItForWeb(this);
});
$("#tarea").trigger("keyup"); // Trigger keyUp event as soon as DOM ready.
});
function MakeItForWeb(x){
var htm=$(x).html(); // Contents of contentEditable
htm=htm.split("<br>").join("\n"); // Replace <br> with \n character
htm=htm.split(" ").join(" ");
htm=htm.trim(); // Trim contents
/* Here is My regex which does the mentioned task */
htm=htm.replace(/<div(.*) data-id=\"(.*)\" (.*)>(.*)<\/div>/g,"#['id':'$2','tag':'$4'];");
document.getElementById("opc").value=htm; // <textarea> = ContentEditable processed.
}
Note the Line:
htm=htm.replace(/<div(.*) data-id=\"(.*)\" (.*)>(.*)<\/div>/g,"#['id':'$2','tag':'$4'];");
// This is My Regex.
// where var htm=contentEditable.innerHTML;
HTML:
<div id="tarea" contentEditable="true" class="tarea" autocorrect="false" spellCheck="off">
Hello Says! <div class="tag" data-id="1005">Vedant Terkar</div> , <br />To all <div class="tag" data-id="1006">SO Users</div> :-).
</div>
<!-- This textarea is Usually Hidden -->
<textarea id="opc" rows="5" cols="97">
</textarea>
css is irrelevant to problem, so not posting it.
Hope experts here will help me out. Thanks in advance :-) !
Regex:
<div\b.*?\bdata-id=\"([^"]*)\">([^<]*).*?\/>([^<]*)<div\b.*?\bdata-id=\"([^"]*)\">([^<]*).*
Replacement string:
#['id':'$1','tag':'$2']; , $3#['id':'$4','tag':'$5'];
DEMO
Get the matched group from index 1 and 2. I used Lazy way.
<div class="tag" data-id=\"([^\"]*?)\">([^<>]*?)<\/div>
here is online DEMO
Try this one to get the "Hello Says!" and "To all" as well in 3 catapulting groups.
>\s*([^<>]*)<div class="tag" data-id=\"([^\"]*?)\">([^<>]*?)<\/div>
here is online DEMO
Im trying to get focus to hidden div that shows up after the .show() function is called on it. Iv tried a couple things including show().focus() or splitting it up into
$(".messageDisplayArea").show();
$("#message_display_area").focus();
the div shows up, but the page does not shift focus to it.
<script>
function showMessage(id, row) {
selectRow(row);
$(".messageDisplayArea").show();
$("#message_display_area").focus();
}
</script>
<div class="messageDisplayArea" id="message_display_area" style="display: none;">
<p> Test Test Test </p>
</div>
what am I missing? the page that this is in is decently large and the div appears at the bottom of the page. I want the browser to jump down and put the new div in focus
Replace this line:
$("#message_display_area").focus();
with this line:
window.location.hash = "message_display_area";
As far as you've given us code, what you have should work, as in this fiddle.
http://jsfiddle.net/SuERE/
http://jsfiddle.net/SuERE/1/
HTML:
<button type="button">Show and Focus</button>
<div style='height:700px'></div>
<input type="text" id="input" style='display:none;'/>
Javascript:
$("button").on("click",function(){
$("#input").show();
$("#input").focus();
});
Focus does't imply that your page is scrolled to the element and is actually often used for form controls to gain the cursor.
What you need is actually a scrollToElement() function that calculates the page offset of your newly created div and scrolls the page to that position, a good one is described here : jQuery scroll to element
Another thing you could do is add the tabindex attribute to the div element. This will enable the focus method to execute and find it and automatically move to it.
<div id="message-display-area" tabindex=1000>...</div>
JSFiddle to show it working.
I've got the following HTML code, which essentially pertains to a post where I announce something in just a few lines, end it with "[...]", and add a "Read more" link-button at the bottom. When this button is clicked, additional content that's hidden will fadeIn as the button disappears, leaving visible the introductory text and the one that was hidden -- simple enough. Now, I've already written the code for this, but the complication comes when I try to also remove that "[...]" (from the post where the click button happened) that I included in the sneak peek. Here's the HTML:
<div class="entry">
<p>Welcome. Talk about something briefly and click below for more. [...]</p>
<div class="slide-content">
<p>Hidden content.</p>
</div>
<span id="revealer" class="button">Read more</span>
</div>
Classes "entry" and "button" belong to my CSS file, while "slide-content" belongs to my .js file to control the fadeIn effect. The ID "revealer" also belongs to the .js file for the same purpose. This HTML is wrapped in a div tag with a class of "box". This is the format that each post follows, exactly the same format with the same HTML elements -- every time an announcement needs to be made, it's just a matter of putting the content between the paragraph tags and publish. Here is where my problem comes in, since I can't find a way to remove the "[...]" only in the post where the button has been clicked. I tried doing the following but it resulted in the deletion of all "[...]" throughout multiple posts:
$('.entry p').each(function() {
var textReplace = $(this).text();
$(this).text(textReplace.replace('[...]', ''));
});
Summary:
I need to remove the "[...]" text only from the post where the user has clicked on (the "Read more" button). The idea is to have this removed while at the same time the hidden content fades in.
I've been able to accomplish the above but for all instances of "[...]". I need to sophisticate my selection by modifying my jQuery code or the HTML.
Option 3 is to get rid of this "[...]", but I would like to leave it there to let the user know she has more content to read, and I would like to have that "Read more" button in all posts for consistency.
~Thanks in advance!
First, you mention you have multiple of these. In that case, this:
<span id="revealer" class="button">Read more</span>
will not work. id attribute has to be unique per document, i.e. you can have at most one element with the specific id value.
If you make your HTML (for each of the blocks) like this:
<div class="entry">
<p>Welcome. Talk about something briefly and click below for more. [...]</p>
<div class="slide-content">
<p>Hidden content.</p>
</div>
<span class="revealer button">Read more</span>
</div>
and your JS like this:
function replace(fromp) {
var textReplace = fromp.text();
fromp.text(textReplace.replace('[...]', ''));
}
$('.revealer').click(function() {
var fromp = $(this).siblings().eq(0);
replace(fromp);
});
it will work properly. Working example:
http://jsfiddle.net/G4t7Q/
Hope this helps.
When you run your page initialization script, you could use jquery to select all of the posts and all of the remove buttons and link them up via their click event. I've created a JSFiddle example, but here's the jist of it:
var removers = $(".remover")
var posts = $(".post")
for (var i = 0; i < removers.length; i++) {
$(removers[i]).click( { post: posts[i] },
function(event) {
var textReplace = $(event.data.post).text()
$(event.data.post).text(textReplace.replace('[...]', ''))
}
)
}
This is a simplified example; it assumes the posts and buttons are sorted in the markup.
I am trying to write something in text area when I click on a link.
function writeText(txt){
document.getElementById("writeArea").innerHTML = txt;
}
I would like to pass html tag in place of txt as parameter to this function so that I can get image, link etc inside text area. Is it possible in Javascript? || JQuery will be good?
Pre-thanks.
Or if jquery tag was there for a reason:
$('#writeArea').val(txt);
You should use value:
document.getElementById("writeArea").value = txt;
If you want to render some images and anchor tags on the screen then don't use a textarea. Use any other container like <div>, <span>, <p> etc.
$("#yourelementid").html(yourtext);
will put the text (in your case HTML) inside the element with id yourelementid
HTML
<p id="para1"></p>
jQuery
var txt = "<a href='http://www.google.com'>Google</a>";
$("#para1").html(txt);
See a working sample
You can easily do it in jQuery if you just want to set the text of a textarea:
$("#yourid").val("hello");
See it working: http://jsfiddle.net/quQqH/
If you're looking to have HTML in it then it needs to be a container element (such as a div).
// Html
<div id="yourid"></div>
//JavaScript
$("#yourid").html('My link');
Otherwise, another option is to have a Rich Text Editor (like Yahoo Editor) so that it renders the HTML that's in the textarea input - this will make it user editable. This is slightly more complicated, as you'll need to include the correct files to make the editor work. Then just do something like the following:
var myEditor = new YAHOO.widget.SimpleEditor('yourid', {
height: '200px',
width: '350px',
toolbar: 0 // Hides the toolbar
});
myEditor.render();
$("#yourid").val("Click for <a href='http://yahoo.com'>Yahoo</a>");
You can see this working: http://jsfiddle.net/quQqH/1/. In this case, I've removed the toolbar by setting it to 0 but it is customisable to show different buttons, etc. Just remove that line to display the default toolbar.
just give like this
$("#ID").val("<img src='images/logo.png' />");
If you want to write long text in the textarea, you can use this way:
HTML
<textarea id="theId"></textarea>
jQuery
var a = 'Test textarea content. Google" ';
$("#theId").val(a);
JS FIDDLE