JSFiddle - React, Tailwind, and code Playground

by DOK_UA

HTML

<div class="inputForm" style="margin-left: 10px; background-color: #ddd;">
<h1>Addon creater</h1>
<h3>Input the addon name</h3>
<p><input id="addonName" type="text" value="" /></p>
<h3>Input the addon version</h3>
<p><input id="addonVer" type="text" value="1.0" /></p>
<h3>Input the addon youtube tutorial</h3>
<p><input id="addonYLink" type="text" value="" /></p>
</div>
<p><button id="butSet">Show Value</button></p>
<div id="PrintForm"><center>
<p> </p>
<h1>--addonName-- --version--</h1>
<h1>Installing and running --addonName-- photoshop extension.</h1>
<h2 style="color: #ff0000;">Warning!<br />This software will only run in Photoshop CC and beyond.</h2>
<p> </p>
</center>
<p> </p>
<h2>Adobe Extension Manager (CC, CC2014)</h2>
<ul>
<li style="list-style-type: none;">
<ul>
<li>If you have Adobe Extension Manager installed</li>
</ul>
</li>
</ul>
<p><b>On Windows:</b>C:\Program Files\Adobe\Adobe Extension Manager CC\</p>
<p><b>On Mac:</b>/Applications/Adobe Extension Manager CC/</p>
<ul>
<li>or download it from <a href="www.adobe.com/products/extension-manager.html">Еxtension manager</a></li>
<li>Chose the Photoshop version you want to install panel to, goto File &gt; Install Extension and browse for com.andrusevich.--addonName--.zxp file</li>
</ul>
<h2>3rd party ZXP Extension Manager (for users from CC2015)</h2>
<ul>
<li>Goto <a href="http://install.anastasiy.com/">http://install.anastasiy.com/</a>, download it for Win or Mac and follow the instructions</li>
<li>Goto <a href="http://zxpinstaller.com/">http://zxpinstaller.com/</a>, download it for WIn or Mac and follow the instructions</li>
</ul>
<h2>Manual installation (if nothing else works or for pirated Photoshop)</h2>
<ul>
<li style="list-style-type: none;">
<ul>
<li>Rename .zxp to .zip</li>
<li>Create a folder com.andrusevich.--addonName-- in</li>
</ul>
</li>
</ul>
<p><i>~/Library/Application Support/Adobe/CEP/extensions/</i></p>
<ul>
<li style="list-style-type: none;">
<ul>
<li>Manually extract .zip’s content...

CSS

body {background-color: rgb(87, 87, 87);}<br />
                h1   {color: rgb(240, 240, 240);}<br />
                text,p,h1,h2,a,li    {color: rgb(236, 236, 236);}<br />
                text,p,h1,h2,a,li {font-family: Arial, Helvetica, sans-serif }</p>

JavaScript

var addonnNameString = "";
$(document).ready(function(){
  $("button").click(function(){
    //Name string;</p>
   //global replace<br />
    var replaced = $("body").html().replace(/--addonName--/g,$("#addonName").val());
    $("body").html(replaced);
    //Name version<br />
    var strVal = document.getElementById("PrintForm").innerHTML;
    var adVal = strVal.replace("--version--", $("#addonVer").val());
    document.getElementById("PrintForm").innerHTML = adVal;
//Name youtube<br />
var strYou = document.getElementById("PrintForm").innerHTML;
var adYou = strYou.replace("--youtube--", $("#addonYLink").val());
document.getElementById("PrintForm").innerHTML = adYou;
$("#youtubeLink").attr("href", $("#addonYLink").val())
});
});