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,
Related
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.)
I am using github-calendar to show my Github contributions on my website. I would like to add a title to the chart like it is shown in this comment. In my case, I just want bold text saying 'Contributions in the past 365 days.'
Screenshot of what I want
I have tried adding text inside the div, but it appears to be overwritten because I don't see it in the DOM.
<!-- Prepare a container for your calendar. -->
<div class="calendar">
<p>Contributions in the past 365 Days</p>
</div>
<script>
GitHubCalendar(
".calendar",
"jsolly", {
global_stats: false,
responsive: true,
});
You might need to fork Bloggify/github-calendar and modify lib/index.js yourself.
For instance, using a insertBefore method to insert an <h2></h2> title before the svg.js-calendar-graph-svg section.
I have a textarea that provides real-time suggestions as user types the text.
These suggestions are displayed in the dropdown menu.
The issue I am having is that the dropdown menu covers part of the DIV that sits right below the textarea.
I need to push down the page content when the dropdown opens, so entire page content is always visible.
HTML code:
<textarea id="tags" class='autoExpand' rows='3' data-min-rows='3'></textarea>
<div id="quickHelpWrapper">
<br><small><b>Quick Help</b></small>
<div id="quickHelp">
Additional Info 1<br>
Additional Info 2<br>
Additional Info 3<br>
Additional Info 4<br>
Additional Info 5<br>
</div>
</div>
Essentially, I need the DIV called quickHelpWrapper, pushed down when textarea dropdown opens.
Example on JSfiddle: https://jsfiddle.net/jarosciak/kjy149p5/
Here is a screenshot:
The jQuery UI autocomplete feature that you are using here positions this element relatively - so you would have to overwrite that. (The position option can’t fix this AFAIK, because that only allows to specify where the element will be positioned in relation to another, but it doesn’t allow to specify “no positioning at all please.”)
You can solve this via these three steps:
Put a container element around the textarea (because we can’t append elements directly to the textarea):
<div id="foo">
<textarea id="tags" class='autoExpand' rows='3' data-min-rows='3'></textarea>
</div>
Add the appendTo option to your autocomplete initialization:
.autocomplete({
delay: 50,
minLength: 1,
multiline: true,
autoFocus: true,
appendTo: '#foo',
source: function(request, response) {
…
And finally, add this to your stylesheet to overwrite the position: relative inline style this plugin sets,
.ui-autocomplete {
position: static !important;
}
Your example, modified accordingly: https://jsfiddle.net/kjy149p5/17/
added css:
.ui-menu.ui-widget.ui-widget-content.ui-autocomplete
{
position:relative;
max-width:524px;
}
linky:
https://jsfiddle.net/kjy149p5/20/
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.