My custom plugin for tinymce 6 inserts html content like so:
tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="container"><div id="inner">hi</div></div>');
However, the inserted content ends up like:
tinyMCE.activeEditor.execCommand('mceInsertContent', false, '<div id="container"><div id="inner">hi</div></div>');
What is happening?
Does it have anything to do with valid elements?
My config includes:
valid_elements: '+*[*]',
extended_valid_elements: 'a[href|target=_blank|class]'
By default TinyMCE doesn't support block-based anchors, such as a <div> within an <a> tag. Explanation here: https://github.com/tinymce/tinymce/issues/3142#issuecomment-241976643
Possible workarounds:
Use an inline element like <span> instead of <div>
<div id="container"><span id="inner">hi</span></div>
Use valid_children to add the elements you want inside the anchor element. Here's a fiddle to demo how to do that: https://fiddle.tiny.cloud/Lkiaab (Certain things may not work as expected, for example editing links via the link plugin.)
Related
I have a div in my html page with a id:
<div id="home">
I need to put some html like a link so I use jquery and my code is:
$('#home').add('<a href=..../a>);
The problem is that if I go control the DOM with google chrome I can see the element in the div but I can't see the link the page.Anyone can help me?
Use append() to append content to the div.
$('#home').append('<a href=..../a>');
I have a somewhat unique problem. I am working on a CMS for websites, and we are attempting to implement Inline Editing on our sites. We want to use TinyMCE's inline editing feature, where you create a div and that div becomes the editor on initialization.
The HTML:
<div class="editable-text">
<p>My editable text here</p>
</div>
And the javascript:
tinymce.init({
selector: ".editable-text",
inline: true,
plugins: ".....",
toolbar: ".....",
menubar: false
});
The Problem
The problem is, I need to be able to save the page content after a user has edited a page, but Tiny adds in a bunch of extra classes and HTML to my edit area, which I do not want to save:
<div spellcheck="false" style="position: relative;" id="mce_5" class="editable-text mce-content-body" contenteditable="true">
<p>My editable text here</p>
</div>
<input name="mce_5" type="hidden">
I have looked for different solutions on how to "disable" Tiny before saving the content, but the only solutions I have found have been to completely remove the element (in my case, the div with all the content in it that I want to save!). Is there a way to "disable" Tiny (i.e. remove all of the junk it puts in) without also stripping out my content?
Thanks,
I am having issues with my CMS - its seems it doesn't like having an <a> tag within an <a> tag as my Fancy Box 2 set up has.
To test I replaced:
<a class="fancybox" href="#popup">
with
<div class="fancybox" href="#popup">
This solved my original issue, but because its not legitimate mark up and breaks a lot of the other code.
Would anyone know a correct way to modified Fancy Box 2 to do this?
You can always bind fancybox to any element other than the <a> tag with a valid (HTML5) structure and functionality, using the special fancybox's data-* attributes like :
<div class="fancybox" data-fancybox-href="#popup">open fancybox</div>
See JSFIDDLE
I've created a custom tinymce plugin to Add Headers,
(this plugin used to add readonly text into the editor)
these headers are inserted into a div with attribute
contenteditable="false"
Like <div class="headerDiv" contenteditable="false">Marks</div>
(headerDiv is used to set the div as inline)
I havn't use the tinymce noneditable plugin regex , for me it's not working on inserting from a listbox. (please check the images)
The problem arises when i try to align the selected content with noneditable headers,
the headers will displayed on next line. (please check the image)
I've checked the tinymce_src.js, from that i understand how alignment works,
they get the content from the editor and wrap a div around it,
and align that div using text-align property.
In wrapping section they check the selected content has a html tag,
if the tag was found then they split the content into 3
i.e
content before the tag
content with html tag
content after the tag
and wrap this 3 part with a div
Example for tinymce selected content : raw tepmlate Marks
part 1 : <div style="text-align:center">raw tepmlate</div>
part 2 : <div style="text-align:center"><div class="headerDiv" contenteditable="false">Marks</div></div>
part 3 : <div style="text-align:center"> </div>
Any guidance and help is appreciated..!
style="display: inline-block;"
?
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.