CKEditor: how to force P within DIV? - javascript

In the CMS I'm working on, I need to insert some custom HTML (which works):
var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'>Edit Sidebar Text</div>");
The problem is that when editing what's inside the sidebar element, pressing ENTER duplicates the sidebar DIV instead of adding a P tag within the sidebar. How do I tell the editor to use a paragraph instead?
I expect this:
<div class="sidebar">
Enter sidebar text
<p></p>
</div>
and get this:
<div class="sidebar">
Enter sidebar text</div>
<div class="sidebar">
</div>
I have not made any changes to "entermode" settings.

You have almost guessed the name of the preference:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.forceEnterMode (yes I think that this setting should default to true, but at least we have the option to set it)

In addition to Alfonso's post, the second thing you need to do is insert your own paragraph as part of the wrapping element. That way CK will create a plain <p> tag inside the wrapper instead of <p class="sidebar">.
var element = CKEDITOR.dom.element.createFromHtml("<div class='sidebar'><p>Edit Sidebar Text</p></div>");
Found this clue from here: http://ckeditor.com/forums/CKEditor-3.x/inside

Related

Setting starting DOM in TinyMCE

When I run init() and create an tinymce instance, I want to have some wrapping divs for styling purposes.
For example, imagine this is the initial DOM inside TinyMCE's iframe when the page starts up:
<html>
<body>
<div class="myWrapper">
<div class="myWrapperContainer">
--> User input area <--
</div>
</div>
</body>
</html>
Then when I get the user input content:
var userContent = tinymce.get("myTextarea").getContent();
I don't want the wrapper divs to be included in userContent. I just want the HTML inside the wrapper divs
How should I go about this?

Can div's inside a section tag be appended dynamically so they appear inside the section tag?

I would like to be able to add (append) another set of div's to the section tag below when a user clicks on a button. For example adding the following div's:
<div class="from-me">
<p>this looks great. </p>
</div>
<section>
<div class="from-me">
<p>Hey there! What's up?</p>
</div>
<div class="clear"></div>
<div class="from-them">
<p>Checking out iOS7 you know..</p>
</div>
</section>
What I am trying to create is something similar to a text conversation for an e-learning project. I've had success creating a new div with a javascript function that is run by clicking a button, but I couldn't get it to append inside the section tag. Is this possible or do I need to approach this differently?
Thanks.
-Shawn

How to get child content of div on click?

I have this div structure after clicking inside class "4u" i am calling one click event but dont know how to get data inside <p> tag.
HTML:
<div class="4u 12u(mobile)">
<section>
<header id="dynamicCampingDesc13">
<p>Loren ipsum</p>
</header>
</section>
</div>
Click event:
$(function() {
$(".image").click(function() {
alert($(this).attr('id'));
});
});
First thing, you cannot click on the <a> tag, because of its empty nature. You do not have a clickable area. But although, you can make it clickable by giving some padding or setting width and height through CSS.
Secondly, the way you need to get the contents of the <p> tag is:
$(function() {
$(".image").click(function() {
$(this).next("header").find("p").text();
});
});
Finally, the class naming. The class 4u 12u(mobile) I am not sure if this is valid. It would be better to change it to something like 4u 12u-mobile.

How does nested child directive root element working at the same level of the parent's directive root element?

Hello I’m currently in a situation which I can’t find the solution anywhere,
I would like to know how and if it’s possible to replace a directives root element’s content with one declared from a nested (child) directive.
<div id=”main”>
<nav>
<main-directive></main-directive>
</nav>
</div>
//mainDirective’s template
<div id=”mainDir>
<p>Hello World </p>
<child-directive></child-Directive>
</div>
//childDirective’s template
<div id=”childDir”>
<p>I conquered the world</p>
</div>
What I’m actually trying to do is, when I apply an ng-click from the mainDirective then the childDirective appears over the mainDirective replacing the position of the div where its located so in this case
will be replaced with the root element of the childDirective being
On a side note, when I click a back button, the childDirective hides and the parent's root element is shown again.
->mainDirective->onClick()->childDirective ->OnBackClick() ->mainDirective
an example where this occurs is from here and I am implementing something similar but I do not get the same results as in this source code and after breaking it all down I don’t see what I have wrong.
https://github.com/wuxiaoying/angular-multilevelpushmenu
I try at a much simpler level
plunker
So you can actually use simple JavaScript command:
//mainDirective’s template
<div id=”mainDir>
<p>Hello World </p>
<div id="childcontent"></div>
// This is the new DIV where the Content of the childDir div will be after clicking the button.
</div>
//childDirective’s template
<div id=”childDir”>
<p>I conquered the world</p>
</div>
So make a function which replaces the content from the div childcontent which the content of the childDir
function replacecontent()
{
document.getElementById('childcontent').innerHTML = document.getElementById('childDir').innerHTML;
}
Greetings

How to make a template content non editable in tinymce

I've crated html template file, I put some elements inside that template are non editable.
template.html contains
<body>
<div>This is a sample template </div>
<div contenteditable="false" style="color:red">Read Only Text</div>
</body>
on inserting this template file into the textarea the second div is editable, while inspecting over that div I've seen that the attribute contenteditable="false" is not there on insert, but its there on the preview before the insert of template.
Any help gratefully received!
From this page: http://www.tinymce.com/tryit/noneditable_content.php
Its using a textarea:
<textarea name="content" style="width:100%">
<p>Text with a <span class="mceNonEditable">[non editable]</span> inline element.</p>
<p class="mceNonEditable">Noneditable text block with <span class="mceEditable">[editable]</span> items within.</p>
<p>Text with tokens that isn't [[editable]] since they match the noneditabe_regexp.</p>
</textarea>
The key here is putting a class of mceNonEditable in your element:
span class="mceNonEditable"
Then whatever non-editable content you have, wrap it in greater than and less than:
>You cannot edit me<
Then finally close the element:
/span
I think you can also change the mode (in the example they're using textareas, so I guess you can also use divs or spans) when initializing tinymce:
tinyMCE.init({
mode : "textareas",
noneditable_regexp: /\[\[[^\]]+\]\]/g
});
There's also noneditable_regexp which lets you specify a regular expression of non-editable contents.
I think this is easier than using html entities.
I haven't actually tried it but that's the way I interpret the example in the page.

Categories

Resources