I am making a blogging application in laravel 5. I am using tinymce for writing post. My application is working for adding new post. But when I am updating posts(which contains html and java script code), then tinymce is not striping html and java script tags.
For example, my post is:
<script>alert("hello");</script>
<h3>heading 3 </h3>
italic text for test
bold and italic for test
Note:
My third line is italic and fourth line is italic and bold. I don't know how to decorate text here on stackoverflow.
Above written code should be stripped and should display as it is.
It is displaying well in browser. When I try to edit this post then I get in tinymce editor
heading 3
italic text for test
bold and italic for test
I want to strip these tags in tinymce editor.
UPDATE:
I am using tinymce by adding this code
<script type="text/javascript" src="{{ asset('/js/tinymce/tinymce.min.js') }}"></script>
<script type="text/javascript">
tinymce.init({
selector : "textarea",
plugins : ["advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table contextmenu paste"],
toolbar : "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
If you still can not understand the question. I embed code in by blog post in tinyMCE which is stripped in browser. When I edit the post then code is not stripped in tinyMCE.
Live demo of this problem is at sweet-blog.herokuapp.com
Related
I'm trying to do multi-column articles in the Joomla Editor using TinyMCE. I was doing it step by step with this tutorial: https://coolcat-creations.com/en/blog/multi-column-editing-for-joomla-authors
Everything was fine till the styling part. It looks like whatever I do in styles it does nothing. I tried multiple locations for the editor.css file, I tried changing custom css link in Joomla. Nothing really helps, I'm stuck. Does anyone has that problem? I was searching for the solutnion but none of them helped...
Will be really glad if someone will direct me to the solution!
My JS:
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste "
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
I am using a JS library called barcode39 to create a barcode image. I already imported the JS library in the static resource and have included the JS in my visualforce page. The barcode is generating fine in the VF page. The problem is I need to render this page as a pdf. When I do that, the barcode image does not appear. I DO NOT want to use the image url from the website barcodeinc because its very unstable. I would like to use this JS library. Can you please let me know what I can do to modify the code below to make the barcode render in pdf as well? Thank you
<apex:page standardController="Opportunity" extensions="LPP_PackingSlip" showHeader="false" sidebar="false" renderAs="pdf" standardStylesheets="false" applyHtmlTag="false">
<apex:includeScript value="{!$Resource.BarcodeScript}"/>
<head>
<body>
<apex:outputText rendered="{!hasPictureDays}">
<!--Header-->
<br/>
<div class="headerSlip">{!Opportunity.Account.Name}</div><br/>
<div class="jobSlip">{!Opportunity.WPA__c}</div>
<center><svg id="barcode"></svg></center>
<br/><br/>
</apex:outputText>
</body>
<script type ="text/javascript">
JsBarcode("#barcode", "{!Opportunity.WPA__c}",{
fontOptions: "both",
font : "OCRB",
textAlign : "center",
Textmargin : 5,
fontSize : 12,
width: 1,
height: 50
});
</script>
</apex:page>
Won't work like that. Visualforce rendering to PDF is done server-side (using a Java library called "Flying Saucer"). There's no browser, no "engine" that can run your JavaScript.
You can ask the user to save the page as PDF. If you need it to be fully automated... there are JS libraries for PDF generation like jspdf? They have bit limited range of features but for basic documents... (do your own research, this is just an example). And watch out for support of non-English characters (Japanese/Chinese/Korean...) - then again, Visualforce PDF generation also struggles with these and only safe font is Arial Unicode MS.
If you need sending an email template with PDF attachment even that library won't help. You'll probably have to look into generating the barcode as image, attaching it to the record maybe (as real File/Attachment?) and then calling the template.
I'm having a problem with CKEditor changing my original paragraph formatting with negative side effects.
I start with a basic paragraph loaded into CKEditor using setData():
<p><span style="font-size:50px">My Text</span></p>
... more document content ...
In the editor, I move the cursor to the end of the phrase "My Text" and press enter (with config.enterMode=CKEDITOR.ENTER_BR setting enabled). Inspecting the markup inside the editor I now see:
<p><span style="font-size:50px">My Text<br><br></span></p>
... more document content ...
Then, when I call getData() to pull the contents from the editor and save the document to a database, the HTML extracted by getData() looks like this:
<p><span style="font-size:50px">My Text</span><br> </p>
... more document content ...
This is a problem because while editing, the <br> tag was inside the <span> and was subject to the 50px font size style. The user saw a 50px blank line before the next piece of document content. After saving the HTML to a database and reloading later the <br> tag is now outside the <span> and is not subject to the 50px font sizing and the blank line appears much smaller than before.
The round trip fidelity of the text formatting is not preserved and the user is frustrated by the results.
Can someone help me understand the results I'm seeing with <br> tags being reformatted and moved around during the editing life cycle, and how I might fix this problem?
Using CKEditor v4.4.1
I have few lines of HTML in my database. I want to edit the content in CKEditor. But when I open that in editor the HTML gets break down. The HTML gets rearranged.
Below is the HTML which is in database:
<span class="sec_title">
<h1><span>Web</span> Engineering</h1>
<hr>
</span>
And when I open it in CKEditor the HTML looks likes below:
<h1><span class="sec_title"><span>Web</span> Engineering</span></h1>
<hr />
Some one please help me. I tried config.allowedContent = true; but it is also not stopping the CKEditor to do the modifications.
CKEditor works with a valid HTML only and <h1> is not a valid content of <span>. Quoting CKEditor basic concepts:
CKEditor is not a tool that will let you input invalid HTML code. CKEditor abides by W3C standards so it will modify code if it is invalid.
I am really doubt that it is impossible to disable text editor in shoutbox (mode full or in popup window).
if i remove this (in shoutbox template):
{parse editor="shout_msg" content="" options="array( 'height' => 100 )"}
then editor is disabled, but i can't send any messages(no input fields).
The question is: how to disable any text editors in popup or full mode. ( for example in root mode only one text field and some buttons. but in full mode we have fully CKEditor or something else..). i want keep only one text input field and only..
I got it. just replace Popup template ( shoutbox ) with hookGlobalShoutbox template. and replace all $d with $data will work. (also the javascript is needed to be inserted at the top)
<script type='text/javascript' src='public/js/shoutbox.js'></script>
<script type='text/javascript' src='public/sounds/soundmanager2-nodebug-jsmin.js'></script>
save and go..
but after that any shout edit cannot be done ..