Can anyone tell me how to get TinyMCE to stop converting my URLs to relative links in Plone?
For example, if I enter this in the HTML source:
<img src="/images/dir/subdir/my_image.png" />
it will convert it to:
<img src="../../../my_image.png" />
I've edited tiny_mce.js (in portal_skins) to set:
convert_urls:false,
relative_urls:false,
but to no effect. I've read all similar posts here, but none really answer this question.
It's fine if it does the relative thing when users are picking images by browsing the filesystem (i.e. the catalog). I just want it to respect what I type in the html box ... so that I have the option of forcing an absolute path if I deem it appropriate. This is the standard behavior in kupu.
Any ideas?
Set convert_urls: false in tiny_mce_init.js, not tiny_mce.js. Early in tiny_mce_init.js you'll see a call to window.tinyMCE.init passing a bunch of initialisation options. In the Products.TinyMCE I'm looking at, the last option is fix_list_elements: false. Add your option there.
Edit: tiny_mce_init.js is no longer used in Products.TinyMCE 1.3.x (Plone 4.3). Instead, override the tinymce-jsonconfiguration browser view, e.g.:
Assuming you have a package with a browser layer, add in browser/configure.zcml:
<browser:page
for="*"
name="tinymce-jsonconfiguration"
class=".tinymce.TinyMCEBrowserView"
permission="zope2.View"
attribute="jsonConfiguration"
layer="..interfaces.IMyBrowserLayer"
/>
Then add browser/tinymce.py:
try:
import simplejson as json
except ImportError:
import json
from Acquisition import aq_inner
from Products.CMFCore.utils import getToolByName
from Products.TinyMCE.browser.browser import TinyMCEBrowserView as View
from Products.TinyMCE.browser.interfaces.browser import ITinyMCEBrowserView
from zope.interface import implements
class TinyMCEBrowserView(View):
implements(ITinyMCEBrowserView)
def jsonConfiguration(self, field):
"""Return the configuration in JSON"""
utility = getToolByName(aq_inner(self.context), 'portal_tinymce')
config = utility.getConfiguration(context=self.context,
field=field,
request=self.request)
config['convert_urls'] = False
return json.dumps(config)
You should add these configs into tinymce.init:
relative_urls: false,
convert_urls: false,
remove_script_host : false,
ref: https://www.tiny.cloud/docs/configure/url-handling/
An other solution is to configure TinyMCE with the control panel to use UID for every links and images, instead of path, so you don't modify any existing javascripts and don't have any relative url displayed.
In Plone 5 is possible disable TinyMCE absolute to relative URL adding variables in Advanced tab of TinyMCE Settings
Site setup > TinyMCE > Advaced
{"relative_urls": false, "convert_urls": false, "remove_script_host": false}
Further variables are available in Products/CMFPlone/static/components/tinymce-builded/js/tinymce/tinymce.js
...
popup_css: '',
plugins: '',
document_base_url: documentBaseUrl,
add_form_submit_trigger: true,
submit_patch: true,
add_unload_trigger: true,
convert_urls: true,
relative_urls: true,
remove_script_host: true,
object_resizing: true,
...
Related
I have a Vue project. When I go into my VS Code settings, I see an extension called "Vetur". I believe Vetur is what takes care of all code formatting for me. Under settings, when I click into Vetur, it gives me a list of different formatters for JS, CSS, HTML, etc. as they appear within Vue files. Here's a picture:
Picture of Vetur settings
The default formatter set for most things is something called prettier.
However, when I go into settings (which takes me to a file called settings.json), I don't see the word "prettier" there at all! Instead, I see a bunch of settings for other formatters that weren't selected (such as js-beautify-html), and the closest thing to the word "prettier" is the word "prettyhtml".
In the dropdown list for HTML, I do see an option for "prettyhtml", but it warns me that it's deprecated. Here's a screenshot: prettyhtml shown as a dropdown option but says it's deprecated.
When I go into this settings.json, I see this part:
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-expand-multiline"
},
"prettyhtml": {
"printWidth": 100,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
}
}
Is "prettyhtml" the same thing as "prettier"?
If not, then why doesn't anything appear in settings.json for "prettier"? There are exactly zero string matches for the word "prettier" in settings.json.
This is all very confusing! Thanks.
Can you please tell me how to remove below message on VS code editor?
The attribute name of [ *ngIf ] must be in lowercase.
Above message shows on below code
<div *ngIf="isBornOn">
</div>
I think it has to do with the vscode-htmlhint plugin, try disable it.
If that removed the warning you can disable just that rule by setting attr-lowercase to false.
Read more about the configuration of this plugin here
In VSCode you can set the following settings to disable it.:
"htmlhint.options": {
"attr-lowercase": false
}
If don't want lose warning when use attributes that don't follow lower case rule. Instead of, you can define an attribute white list:
"htmlhint.options": {
"attr-lowercase": [
"*ngIf",
"ngIf",
"*ngFor",
"ngFor",
"ngSwitch",
"ngModel"
],
"doctype-first": false
},
Also can add doctype-first to avoid that message on every component.
Anyone looking to solve this from another IDE such as Eclipse or Codemix, simply create a file called .htmlhintrc place this in /<angular-project>/src/.htmlhintrc
and change the values as you see fit, mine are:
{
"tagname-lowercase": false,
"attr-lowercase": false,
"attr-value-double-quotes": true,
"doctype-first": false,
"tag-pair": true,
"spec-char-escape": true,
"id-unique": true,
"src-not-empty": true,
"attr-no-duplication": true,
"title-require": true
}
Re-open the tab if not automatically resolved or then restart the IDE.
Under VS Code - Extensions (left sidebar - box-shaped icon) - Disable this plugin or uninstall if required.
Then Reboot
I want to add a markdown editor for users to post their answers into my page. I've found TinyMCE but there is a problem with it: I don't know how to implement markdown editor with TinyMCE.
Is there anybody who has experience with this? Please show me how to setup a markdown editor with it.
It looks like the Text Pattern Plugin can do this:
This plugin matches special patterns in the text and applies formats or executed commands on these patterns.
…
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: 'textpattern',
textpattern_patterns: [
{start: '*', end: '*', format: 'italic'},
{start: '**', end: '**', format: 'bold'},
{start: '#', format: 'h1'},
{start: '##', format: 'h2'},
{start: '###', format: 'h3'},
{start: '####', format: 'h4'},
{start: '#####', format: 'h5'},
{start: '######', format: 'h6'},
{start: '1. ', cmd: 'InsertOrderedList'},
{start: '* ', cmd: 'InsertUnorderedList'},
{start: '- ', cmd: 'InsertUnorderedList'}
]
});
Note that the plugins key here fixes a typo in the upstream documentation, which uses plugin instead.
TinyMCE does not currently support a markdown mode with their editor, however I just recently was in the situation where I needed a markdown editor and wanted to use tinymce for it.
You will have to add a markdown package to your project. I recommend MarkdownIt, which I found from this list of recommendations. You can use any one of the recommendations from the link, just change the MarkdownIt usage with your markdown library in the code examples below.
I do not recommend Chris' approach because it's not very user friendly - the user needs the ability to save text with markdown in it and expect it to render the proper element when it is rendered. To have to press space or enter after each element to watch it change into a WYSIWYG style element is not user friendly. As such, if you take this approach you should actually remove the textpattern plugin and the textpattern_patterns configuration.
What you will want to do is to configure the setup function in your tiny config to listen to change events, and then pass the content through your markdown parser before returning the value to whatever needs it. You will also want to set menubar, toolbar, and statusbar to false.
var editorHandlerTimeout;
var MarkdownIt = require('markdown-it')
tinymce.init({
el: 'el',
menubar: false,
toolbar: false,
statusbar: false,
setup: function (editor) {
editor.on('paste change input undo redo', function() {
// the timeout is to throttle how often this runs while typing
clearTimeout(vm.editorHandlerTimeout);
vm.editorHandlerTimeout = setTimeout(function () {
var md = new MarkdownIt() // or any other markdown library
var contentFromEditor = editor.getContent()
//MarkdownIt adds its own paragraph tags, so strip the ones from tinymce
if (contentFromEditor.startsWith('<p>'))
contentFromEditor = contentFromEditor.substring(3)
if (contentFromEditor.endsWith('</p>'))
contentFromEditor = contentFromEditor.substring(0, contentFromEditor.length - 4)
var contentFromMdIt = md.render(contentFromEditor)
// markdown-it inserts the html encoded values for these (this might be a bug), so we will want to replace them since we will be rendering as html
contentFromMdIt = contentFromMdIt.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/&/g, '&')
// time to do something with your rendered markdown text
// im in vuejs, so I emit the result as 'input' which allows my markdown editor to work as a v-model
vm.$emit('input', contentFromMdIt)
})
})
})
})
Also, it is highly recommended to add a preview to your markdown editor, as the majority of users are unfamiliar with markdown. Make the preview feature simple and accessible, and just render their output as html so they can see what is happening.
Seems TinyMCE has a Markdown plugin for their editor now
https://github.com/vaidhyanathan93/Markdownfortinymce/blob/master/markdown/plugin.js
https://www.tiny.cloud/labs/markdown/
Tiny Markdown is a markdown syntax plugin for TinyMCE, providing
flexible rich text and markdown content creation options for authors,
and also provides robust, reliable markdown output for developer
projects.
I currently have my extended_valid_elements set up as follows.
using EPiServer.Editor.TinyMCE;
namespace Customer.Web.Templates.Plugins.TinyMCE
{
[TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*]' }")]
public class ExtendedValidElements
{
}
}
However, I need to add the ability to enter an extra entry next to a link, as the tinyMCE is currently stripping it out.
I cant seem to get the syntax right without crashing the edit mode of the site... my logic would suggest 'iframe[*]','a[data-lightbox]' }")] should do the trick, but it doesn't. I just get an error.
Any ideas? Many Thanks.
Marc.
According to the TinyMCE documentation,
When adding a new attribute by specifying an existing element rule
(e.g. img), the entire rule for that element is over-ridden so be sure
to include all valid attributes not just the one you wish to add.
So try
EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*], a[name|href|target|title|data-lightbox]' }")]
I would consider using an asterisk in place of the word 'lightbox' to allow any data attribute to be used.
if that doesn't work, you can find more information at about valid_elements and extended_valid_elements on the TinyMCE site.
Hope this helps
Everytime i add an image to tinyMCE it converts the image URL to something stupid (removes the hostname and adds ../ or whatever it needs) , so i won't be able to use the image created by tinymce in any other level of the site !
can this be fixed somehow ? relative_urls: "false", not working
Thanks
Use this in your javascript initialization:
relative_urls : false,
remove_script_host : false,
convert_urls : true,
Get TinyMCE to use full image url instead of relative one
Before initializing tinymce i set the following variable
var system_url = "http://myserver.com/workspace/codebase/html/";
so that i am able to use system_url later for adressing images and other files like this
content_css: system_url+'js/tiny_mce/css/green.css',