Tinymce editor text alignment in noneditable contet - javascript

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;"
?

Related

TinyMCE 6 execCommand 'mceInsertContent' removes <a href> from inserted content

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.)

Disable Edit Mode on TinyMCE Inline Editing

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,

Creating tool to add blog tags: when the post is submitted the dynamically added tags are ignored

I'm trying to create a simple tool to ease the addition of tags in blog posts (not sure if I can mention the website, therefore i won't do it now).
I've inspected the code and I've noticed that when a tag is added, a new span is created between the divs post-form--tag-editor and tag-input-wrapper
<div class="post-form--tag-editor" data-subview="tagEditor">
-> TAG CODE here !! <span class=""> ::before This is a tag </span> <- TAG CODE here!!!
<span class=""> ::before This is another tag </span>
<div class="tag-input-wrapper" data-js-taginputfieldwrapper="">
<div data-name="tagInput" data-subview="tagInputField">
<div data-js="editor-wrapper" class="editor-wrapper" style="position: relative;">
Right now, my tool is injecting the necessary HTML to create dynamic spans and add new tags. I can see my "injected" tags in the webpage but when I submit the post the "injected" tags do not appear in the live post.
Since I'm able to see the "injected tags" shouldn't I be able to see them too when my post is submitted and live ? Am I using the wrong approach to achieve what I want?
Thank you in advance !

CKEditor: how to force P within DIV?

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

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