I am running into a very unique edge case with my TinyMCE user experience.
I want to be able to
COPY IMAGE (Right click, copy image on any image on the internet)
PASTE IMAGE (CTRL + V) into TinyMCE editor
and have it save a local copy of this image and serve that.
The problem is a user can paste an image being served in S3 bucket and it is only authenticated for a certain amount of time, then days later the image will not show.
I have looked at TinyMCE - File Image Upload documentation to no avail.
Also looked into TinyMCE Paste Plugin, TinyMCE Local Upload Demo, TinyMCE Docs - Upload Images and dated gem TinyMCE-Rails-ImageUpload
Ultimately, I have a feeling that a custom handler for Paste Preprocess will need to be used
My tinymce.yml configuration follows:
menubar: false
statusbar: false
branding: false
toolbar:
- styleselect | bold italic underline strikethrough | indent outdent | blockquote | image | link | codesample | bullist numlist | table | code | undo redo
plugins:
- link
- codesample
- image
- lists
- code
- table
images_upload_url: "/tinymce_assets"
automatic_uploads: true
relative_urls: false
remove_script_host: false
convert_urls: true
table_responsive_width: true
I feel like this type of problem should be common and there should be a simple solution that I am not seeing. However, if not at all possible, would the solution be to create a custom js function that intercepts paste call, check if it is coming from external url, then decide to create a local image copy and give that url?
Thank you, and any help would be appreciated.
Related
I configured HighCharts on our Zeppelin Tool to implement a drill down functionality.
We placed the below jar files and stated the same in the Dependencies
Zeppelin-highcharts-0.6.4.jar
lift-json_2.11-2.6.3.jar
paranamer-2.4.1.jar
We tried executing the below code-
val bank = spark.read.option("header",true).csv("/u01/zepplin/bank/bank2.csv")
bank.show()
+---+-------+
|age|balance|
+---+-------+
| 20| 40000|
| 30| 60000|
| 50| 70000|
| 80| 90000|
+---+-------+
import com.knockdata.spark.highcharts._
import com.knockdata.spark.highcharts.model._
highcharts(bank.series("x" -> "age", "y" -> sum(col("balance"))).orderBy(col("age"))).plot()
But this code is not able to plot anything, giving a blank out put.It just shows the tile(Chart Title).
To rule out the browser compatibility issue I tried this on all the browsers too.
Am I missing something here.Do we have any alternative for High-charts for custom visualization like drill down etc.
Thanks in Advance
I am experimenting with using NativeScript to speed up the process of porting an existing Android app to iOS. The app in question uses a great deal of SVG manipulation in a Cordova webview. To keep things simple I want to port all of my existing Webview side code - in essence the entire existing Cordova www folder and its contents - over to the new NativeScript app. The WebView talks to a custom Cordova plugin which I use to talk with my servers to do such things as get new SVGs to show, keep track of user actions etc.
If I an get through these teething issues I am considering using this component to implement bi-direction communications between by current webview JS code and the, new, NativeScript backend that will replace my current Cordova plugin. Someone here is bound to tell me that I don't need to do that... . However, doing so would mean throwing out the baby with the bathwater and rewriting all of my current Webview ES6/JS/CSS code.
This is pretty much Day 1 for me with NativeScript and I have run into a few issues.
I find that I cannot get rid of the ActionBar even though I have followed the instructions here and set the action bar to hidden.
I can use the following markup in home.component.html
to show external web content. However, what I want to really do is to show the local HTML file that is in the www folder in the following folder hierarchy
app
|
____home
|
____www
|
______ index.html
|
______css
|
______ tpl
|
.....
However, when I use the markup
<Page actionBarHidden="true" >
<WebView src="~/www/index.html"></WebView>
</Page>
I am shown the error message
The webpage at file:///data/data/com.example.myapp/files/app/www/index.html is not available.
I'd be most grateful to anyone who might be able to tell me what I am doing wrong here - and also, how I can get rid of that action bar which is currently showing the app title.
About using local HTML file
Is your local HTML file recognized by Webpack (which is enabled by default in NativeScript)? Try to explicitly add the local HTML file to your webpack.config.js file. This way Webpack will "know" that it will have to bundle this file as well.
new CopyWebpackPlugin([
{ from: { glob: "<path-to-your-custom-file-here>/index.html" } }, // HERE
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
]
Example here
About hiding the ActionBar
NativeScript Core only: Try hiding the action bar directly for the frame that holds the page. See the related documentation here
NativeScript Angular: The page-router-outlet will have an action bar by default (you can hide it by using the Page DI as done here). Otherwise, you could create a router-outlet (instead of page-router-outlet). The router-outler won't have the mobile-specific ActionBar.
In my Docusaurus project my internal links work on my local environment, but when I push to GitLab they no longer work. Instead of replacing the original doc title with the new one it adds it to the url at the end ('https://username.io/test-site/docs/overview/add-a-category.html'). I looked over my config file, but I do not understand why this is happening.
I tried updating the id in the front matter for the page, and making sure it matches the id in the sidebars.json file. I have also added customDocsPath and set it to 'docs/' in the config file, though that is supposed to be the default.
---
id: "process-designer-overview"
title: "Process Designer Overview"
sidebar_label: "Overview"
---
# Process Designer
The Process Designer is a collaborative business process modeling and
design workspace for the business processes, scenarios, roles and tasks
that make up governed data processes.
Use the Process Designer to:
- [Add a Category](add-a-category.html)
- [Add a Process or Scenario](Add%20a%20Process%20or%20Scenario.html)
- [Edit a Process or Scenario](Edit%20a%20Process%20or%20Scenario.html)
I updated the add a category link in parenthesis to an md extension, but that broke the link on my local and it still didn't work on GitLab. I would expect that when a user clicks on the link it would replace the doc title in the url with the new doc title ('https://username.gitlab.io/docs/add-a-category.html') but instead it just tacks it on to the end ('https://username.gitlab.io/docs/process-designer-overview/add-a-category.html') and so the link is broken as that is not where the doc is located.
There were several issues with my links. First, I converted these files from html to markdown using Pandoc and did not add front matter - relying instead on the file name to connect my files to the sidebars. This was fine, except almost all of the file names had spaces in them, which you can see in my code example above. This was causing real issues, so I found a Bash script to replace all of the spaces in my file names with underscores, but now all of my links were broken. I updated all of the links in my files with a search and replace in my code editor, replacing "%20" with "_". I also needed to replace the ".html" extension with ".md" or my project would no longer work locally. Again, I did this with a search and replace in my code editor.
Finally, I ended up adding the front matter because otherwise my sidebar titles were all covered in underscores. Since I was working with 90 files, I didn't want to do this manually. I looked for a while and found a great gist by thebearJew and adjusted it so that it would take the file name and add it as the id, and the first heading and add it as the title and sidebar_label, since as it happens that works for our project. Here is the Bash script I found online to convert the spaces in my file names to underscores if interested:
find $1 -name "* *.md" -type f -print0 | \
while read -d $'\0' f; do mv -v "$f" "${f// /_}"; done
Here is the script I ended up with if anyone else has a similar setup and doesn't want to update a huge amount of files with front matter:
# Given a file path as an argument
# 1. get the file name
# 2. prepend template string to the top of the source file
# 3. resave original source file
# command: find . -name "*.md" -print0 | xargs -0 -I file ./prepend.sh file
filepath="$1"
file_name=$("basename" -a "$filepath")
# Getting the file name (title)
md='.md'
title=${file_name%$md}
heading=$(grep -r "^# \b" ~/Documents/docs/$title.md)
heading1=${heading#*\#}
# Prepend front-matter to files
TEMPLATE="---
id: $title
title: $heading1
sidebar_label: $heading1
---
"
echo "$TEMPLATE" | cat - "$filepath" > temp && mv temp "$filepath"
I have used Tinymce editor in my rails app. When I try to make a text bold and save, the text changes are not reflected.
Gemfile
gem 'tinymce-rails'
congig/tinymce.yml
selector: textarea.table-editor
theme: modern
selector: textarea
toolbar: styleselect | bold italic | undo redo | table | alignleft
aligncenter alignright alignjustify | bullist numlist outdent indent | ink image | print preview media fullpage | forecolor backcolor | emoticons
plugins:
- table
- advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker
- searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking
- save table contextmenu directionality emoticons template paste textcolor
application.js
//= require tinymce
something.html.erb
<%= tinymce_assets %>
<%= tinymce %>
<%= form.text_area :description, :class => "tinymce", id: :course_description %>
show.html.erb
<%= #course.description.html_safe %>
Normally all these wysiwyg editors format your input in to html, markdown etc under the hood and saves to the data base.
If we consider html, when you make a text bold, for an example it maybe adding a <b></b> tag around your text.
I can see you have the code plugin in the list. As per the documentation of the plugin, it should allow you to view the html of your editing changes.
As a test,
Make a text bold in the editor
Switch to Source view and see if your text is surrounded by bold tags.
If yes, make sure you backend saves the same string in to the database. Make sure you dont have any code that strips out the html tags
If no, then the editor is not converting your changes, you may have to check the editor configs.
When I paste a URL into a TinyMCE editor it converts the text into a link.
So http://vimeo.com/18150336 would be come http://vimeo.com/18150336. I would like to keep the plain text. Is their a way to configure TinyMCE to keep the link as plain text.
I do not want to strip out tags as adding a hyperlinks should be an option on the toolbar. It should just not happen by default.
You can use the paste plugin and the setting paste_preprocessing in order to keep the plain text. You might need to check inside the function specified using paste_preprocessing if you got a link or not.
It's been 5 years, So I'm probably using a newer version of TinyMCE, anyway this solution worked for me, Just add this option:
paste_preprocess: function(plugin, args) {
args.content += ' ';
}
So when you initialize the tinymce, it should be something like this:
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "paste",
paste_preprocess: function(plugin, args) {
args.content += ' ';
}
});
This is the page of documentation for TinyMCE V4
It is the TinyMCE plugin autolink which is responsible for automatically creating links on paste. (And write).
https://www.tiny.cloud/docs/plugins/opensource/autolink/