tinymce remove span when submitting prism.js - javascript

So far when I open prism.js in tinymce text editor, it appears fine, it highlights the code, of course because when I inspect, the tag <span> exist inside the <pre> tag. The problem is, when submitted, the <span> tags don't follow any more. They just disappear. What's wrong? Is it famous unsolved problem of prism.js as tinymce plugin? Or am I missing something? I just need the <span> to be there when submitted. That's all.
Please help. Thanks in advance.
/------------- for clarity, here is the plugin code ---------------------/
tinymce.init({
selector: '.content_textarea',
plugins: 'advlist autolink link image lists charmap print preview codesample emoticons',
toolbar: 'undo redo | styleselect | bold italic | numlist bullist | codesample | link image | emoticons',
link_class_list: [
{title: 'None', value: ''},
{title: 'Demo', value: 'btn demo'},
{title: 'Download', value: 'btn download'}
],
codesample_languages: [
{text: 'HTML/XML', value: 'markup'},
{text: 'JavaScript', value: 'javascript'},
{text: 'CSS', value: 'css'},
{text: 'PHP', value: 'php'},
{text: 'Ruby', value: 'ruby'},
{text: 'Python', value: 'python'},
{text: 'Java', value: 'java'},
{text: 'C', value: 'c'},
{text: 'C#', value: 'csharp'},
{text: 'C++', value: 'cpp'}
],
valid_elements: "*[*]",
image_dimensions: false,
image_title: true,
image_caption: true,
// enable automatic uploads of images represented by blob or data URIs
automatic_uploads: true,
// URL of our upload handler (for more details check: https://www.tinymce.com/docs/configure/file-image-upload/#images_upload_url)
images_upload_url: base_url()+'admin_crud/img-upload-tinymce',
// here we add custom filepicker only to Image dialog
file_picker_types: 'image',
// and here's our custom image picker
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
// Note: In modern browsers input[type="file"] is functional without
// even adding it to the DOM, but that might not be the case in some older
// or quirky browsers like IE, so you might want to add it to the DOM
// just in case, and visually hide it. And do not forget do remove it
// once you do not need it anymore.
input.onchange = function() {
var file = this.files[0];
var orig_filename = this.files[0].name;
orig_filename = remove_ext(orig_filename);
// Note: Now we need to register the blob in TinyMCEs image blob
// registry. In the next release this part hopefully won't be
// necessary, as we are looking to handle it internally.
var id = orig_filename + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var blobInfo = blobCache.create(id, file);
blobCache.add(blobInfo);
// call the callback and populate the Title field with the file name
cb(blobInfo.blobUri(), { title: remove_ext(file.name) });
};
input.click();
}
});

Those tags are added by Prism. TinyMCE calls Prism and when you add, edit or view your content inside of TinyMCE you will see the code highlighting. Viewing outside of TinyMCE results in not seeing the code highlights, this is because Prism has not been called.
In order for your code to look like what you saw inside of TinyMCE, you need to add
Prism.highlightAll()
or a variation of it depending on your use case on your page that does not call TinyMCE. See here: https://prismjs.com/extending.html#api

Related

tinyMCE 6 insert link to server side content

I'm upgrading an old internal system used in my academic department. The page that I'm rewriting allows users to modify webpages containing information and content relevant to a course. The old system is using cleditor which I am replacing with the free version of tinyMCE 6.2.0.
One of the functionalities that needs to be replaced is a custom button that brings up a list of URLs to uploaded content and then turns the highlighted text into a link to the selected content (example of this in current system). I have been able to create my own custom button, and I have found the panel and selectbox features, but I haven't found how to populate the list in selectbox using a URL like one can for link_list.
Below is an example of the javascript that I have:
tinymce.init({
selector: '.course_page_editor',
toolbar: 'custContentLink',
setup: (editor) => {
editor.ui.registry.addButton('custContentLink', {
text: 'Insert Content Link',
onAction: (_) => insert_content_link_dialog(tinymce.activeEditor)
});
}
});
function insert_content_link_dialog(editor)
{
editor.windowManager.open({
title: 'Insert Content Link',
body: {
type: 'panel',
items: [{
type: 'selectbox',
name: 'content_list',
label: 'Choose the file that the link should point to:',
size: 5,
//TODO: generate list of uploaded content URLs
items: [
{text: 'Primary', value: 'primary style'},
{text: 'Success', value: 'success style'},
{text: 'Error', value: 'error style'}
],
flex: true
}]
},
onSubmit: function () {
//TODO: replace highlighted text with selected link
},
buttons: [
{
text: 'Close',
type: 'cancel',
onclick: 'close'
},
{
text: 'Add content link',
type: 'submit',
primary: true,
enabled: true
}
]
});
};
How do I create a popup list of links to server side content
My original process was overly complicated. TinyMCE has the link_list functionality which does exactly what I'm looking for. I then created a page to return a JSON array of link items as outlined in this other question I asked.

Quill JavaScript Rich Text Editor restrict tags

I'm trying to use Quill JavaScript Rich Text Editor. I need to configure it to use only a predefined tag set:
b, i, pre, a, br + Emoji
Right now I have configured it in the following way:
var Block = Quill.import('blots/block');
Block.tagName = 'PRE';
Quill.register(Block, true);
var quill = new Quill('#editor-container', {
modules: {
toolbar: true
},
theme: 'snow'
});
As you may see I already have changed the wrapper to PRE tag. How to also configure Quill to use the mentioned restricted tag set? No other tags can be allowed and must be automatically removed if present.
Define formats in the parameters of the constructor, there you can define which formats you want to support.
var quill = new Quill('#editor-container', {
formats: ['bold', 'italic', 'code', 'code-block', 'link'],
...
});
Quill works with Delta and formats, not directly with HTML and tags.
You can set the formats config option to limit the allowed formats.
Here is the list of all formats:
formats = [
// 'background',
'bold',
// 'color',
// 'font',
// 'code',
'italic',
// 'link',
// 'size',
// 'strike',
// 'script',
'underline',
// 'blockquote',
// 'header',
// 'indent',
'list',
// 'align',
// 'direction',
// 'code-block',
// 'formula'
// 'image'
// 'video'
];
You can use this to prevent some formats.

json.net object from directory

Tinymce is a fairly common WYSIWYG editor that allows users to purchase an image/file management system or build your own. I want to upgrade my Content Management system from tinymce 2x to 4x. In 4x the images need to be presented to the tinymce call as a json object in the image_list declaration: http://www.tinymce.com/wiki.php/Configuration:image_list
Based on this format, the goal is to have .Net read the image folder and present the title and value as the filename and 'images/filename' of each file. I've worked at it the past few days and I've made some headway but not to the point of a functional sample. This seems like it would be something that others using .Net and Tinymce would want to use if they roll their own image management system (which I have to do in this case).
This example (see link) seems to get close but my test (see code below) returns null values for the title and value. When I tried to include the other two variables in the example I get error messages that the variables are inaccessible or not available. Converting List of Files into JSON array in C#
Here is the C# script I'm trying to use in creating the JSON variable of image references:
<%# Import Namespace="Newtonsoft.Json" %>
<script runat="server">
public class FileInformation
{
[JsonProperty(PropertyName = "title")]
public string actualFileName {get;set;}
public string value {get;set;}
}
public string image_list()
{
string[] arr = new string[3]; // Initialize
arr[0] = ".jpg"; // Element 1
arr[1] = ".png"; // Element 2
arr[2] = ".gif"; // Element 3
var imgPath = Server.MapPath("~/images/");
var list = new List<FileInformation>();
//string[] fileNames = Directory.GetFiles(imgPath, "*", SearchOption.TopDirectoryOnly);
string[] fileNames = Directory.GetFiles(imgPath);
foreach (string filename in fileNames)
{
FileInfo fileInfo = new FileInfo(filename);
string actualFileName = fileInfo.Name;
string value = fileInfo.Name;
list.Add(new FileInformation(){});
}
var yourJSONString = JsonConvert.SerializeObject(list);
return yourJSONString;
}
...
</script>
Here is the Javascript call in the page:
<script type="text/javascript">
tinymce.init({
image_list: '<%= image_list()%>',
image_class_list: [
{title: 'None', value: ''},
{title: 'Float Right', value: 'img_fright'}
]
});
Abbreviated Source code from the pate where image_list is rendered:
image_list: '[{"title":null,"value":null},{"title":null,"value":null},{"title":null,"value":null}]',
Any thoughts of where this may be going wrong?
Sorry... not quite sure how to edit an answer. This one is a bit more clear an usable with commenting. This one actually filters out specific extensions that you probably want to do and can be used for the documents or media list as well (with some modification). Good luck. I've learned so much here it is good to give back when you can.
public class FileInformation
{
public string title {get;set;}
public string value {get;set;}
}
public string image_list()
{
//Set up the list of acceptible extensions
string[] arr = new string[3]; // Initialize
arr[0] = ".jpg"; // Element 1
arr[1] = ".png"; // Element 2
arr[2] = ".gif"; // Element 3
//Declare the variable
var filePath = "";
//Set the path
filePath = Server.MapPath("~/images/");
//Start the string for the list
var list = new List<FileInformation>();
//Get the filesnames from the path
string[] fileNames = Directory.GetFiles(filePath, "*", SearchOption.TopDirectoryOnly);
//Loop through each of the file names
foreach (string filename in fileNames)
{
//Get the information on the filename
FileInfo fileInfo = new FileInfo(filename);
//Loop through each of extension provided
foreach (var ext in arr) {
//If the extenion on the filename matches one of the list then...
if (fileInfo.Extension == ext) {
//Add the filename and location to the list in the title: filename, value: "images/filename" format
list.Add(new FileInformation(){ title = fileInfo.Name, value = "images/" + fileInfo.Name });
}
}
}
//Convert the list to a JSON string using JSON.net (use the correct framework format)
var yourJSONString = JsonConvert.SerializeObject(list);
//Return the JSON string for use in the javascript call.
return yourJSONString;
}
... And your javascript in the file:
<script src="//tinymce.cachefly.net/4.1/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
encoding: 'xml',
convert_urls: false,
removed_menuitems: 'newdocument',
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"template paste textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | link image | print preview media",
content_css: "",
style_formats: [{ title: 'Bold', inline: 'span', classes: 'Bold' },
{ title: 'Italic', inline: 'span', classes: 'Italic' },
{ title: 'Superscript', inline: 'span', classes: 'Superscript' },
{ title: 'Subscript', inline: 'span', classes: 'Subscript' }],
document_base_url: '',
image_list: <%= image_list()%>,
image_class_list: [
{title: 'None', value: ''},
{title: 'Float Right', value: 'img_fright'}
],
cleanup: false,
image_advtab: true,
templates: [
{title: 'Test template 1', content: '<div row><div class="col-md-6">Content</div><div class="col-md-6">Content</div></div>'},
{title: 'Test template 2', content: 'Test 2'}
]
});
I plan to post the code if I write the json to file, as I want to dynamically be able to load and make the templates available to our users. If you have any example feel free to post here. Otherwise Good Luck!

TinyMce create toolbar dropdown containing more toolbar items

This seems like it ought to be simple to do, but I'm having a hard time figuring it out. I have a tinymce instance, and for various reasons I want to have all the toolbar items on one long line. The problem is that there are slightly too many items for it all to fit so I'd like to create a custom button and put the toolbar items in there. Something like:
tinyMCE.init({
...
setup: function(editor) {
editor.addButton('insertMenu', {
type: 'listbox',
text: 'Insert',
icon: false,
items: 'code link'
});
},
toolbar1: 'insertMenu undo redo | bold italic |alignjustify | ...
Obviously that doesn't work because the items: 'code link' isn't correct for a listbox.. but it I'd hope it's possible to do this sort of thing in tinyMCE. Yes I have looked at examples like http://www.tinymce.com/tryit/3_x/menu_button.php but they always contain text links etc. whereas I just want to reuse the existing toolbar icons and functionality.
You were almost there. You could use something like this if you wanted to define your button inline in the initialiser as you're doing it, or else you might be better off moving the functionality out into a separate plugin and requiring that in your initialiser. http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
editor.addButton('insertMenu', function() {
var items = [{text: 'Option 1', value: 'option1Value'}, {text: 'Option 2', value: 'option2Value'}];
return {
type: 'listbox',
text: 'select box title',
tooltip: 'a tooltip',
values: items,
fixedWidth: true,
onclick: function(e) {
console.log('Value selected: ' + e.control.settings.value)
}
};
});

tinyMCE plugin accessing element

I'm trying to write a tinymce plugin, so I checked out the tutorial "Creating a plugin" on http://www.tinymce.com/. Inserting and Replacing Content is no problem, everything works fine.
Now i want to change the value of the textbox automatically after changing the value of the listbox. As an example, after changing the listbox element, the value of the active element should be written to the textbox above. How can I access this element?
tinymce.PluginManager.add('myexample', function(editor, url) {
// Add a button that opens a window
editor.addButton('myexample',
{
text: 'Example',
onclick: function()
{
// Open window
editor.windowManager.open({
title: 'Example Plugin',
body: [
// Text
{type: 'textbox', name: 'title', label: 'Text', value: 'temp'},
// Listbox
{type: 'listbox', name: 'test', label: 'Ziel',
'values':
[
{text: 'Eins', value: '1'},
{text: 'Zwei', value: '2'}
],
onselect: function(v)
{
console.log(this.value());
// CHANGE THE VALUE OF THE TEXTBOX ...
// ????
}
}
],
onsubmit: function(e)
{
console.log(e.data.title, e.data.test);
}
});
}
});
});
I know this is an old question, but I was facing the same issue and I found this answer in another forum that saved my day.
The standard tinymce way to do this is to save the popup window in a variable:
var win = editor.windowManager.open({ //etc
And then for accessing the element:
win.find('#text'); // where text is the name specified
I hope this can help someone else in the future.
Now I found a solution. The best method is not to use the internal form-designer. You can use an IFrame with an external html-page, then you can work with document.getElementById(...)
Here you can find an example

Categories