paweld/pas2js
1
0
Fork 0
mirror of https://gitlab.com/freepascal.org/fpc/pas2js.git synced 2025-04-06 07:07:54 +02:00
Code Issues Packages Projects Releases Wiki Activity

* tiny editor

Browse Source
This commit is contained in:
Michaël Van Canneyt 2022-07-17 20:50:01 +02:00
parent 56ec14f407
commit edada9be83
4 changed files with 188 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
demo/tinyeditor/bulma.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

53
demo/tinyeditor/index.html Normal file
View File

@ -0,0 +1,53 @@
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Tiny Editor demo project</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- We need font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<!-- Bulma for some styling -->
<link rel="stylesheet" href="bulma.min.css">
<!-- Local copy of tiny editor -->
<script src="tinyeditor.js"></script>
<!-- Our demo project-->
<script src="tinyeditordemo.js"></script>
</head>
<body>
<div class="hero">
<div class="hero-body has-text-centered">
<h2 class="title is-4">Tiny editor demo</h2>
<p class="">This is simple demo of a <a href="https://github.com/fvilers/tiny-editor">Tiny editor</a>.</p>
<p>edit html, and press the 'Render HTML' button to display the edited html in the lower part of the screen.
</div>
</div>
<div class="box py-5">
<div class="is-flex is-justify-content-center">
<div>
<div class="content">
<div id="editor" style="min-height: 250px">
</div>
</div>
</div>
</div>
</div>
<div class="box py-5">
<div class="block">
<div class="is-flex is-justify-content-center">
<button id="btnShowHTML" class="button is-primary">Render HTML</button>
</div>
</div>
<div class="block">
<div class="is-flex is-justify-content-center">
<div class="content" id="divHTMLContent">
</div>
</div>
</div>
</div>
<script>
window.addEventListener("load", rtl.run);
</script>
</body>
</html>

90
demo/tinyeditor/tinyeditordemo.lpi Normal file
View File

@ -0,0 +1,90 @@
<?xml version="1.0" encoding="UTF-8"?>
<CONFIG>
<ProjectOptions>
<Version Value="12"/>
<General>
<Flags>
<MainUnitHasCreateFormStatements Value="False"/>
<MainUnitHasTitleStatement Value="False"/>
<MainUnitHasScaledStatement Value="False"/>
</Flags>
<SessionStorage Value="InProjectDir"/>
<Title Value="tinyeditordemo"/>
<UseAppBundle Value="False"/>
<ResourceType Value="res"/>
</General>
<CustomData Count="5">
<Item0 Name="MaintainHTML" Value="1"/>
<Item1 Name="Pas2JSProject" Value="1"/>
<Item2 Name="PasJSLocation" Value="$NameOnly($(ProjFile))"/>
<Item3 Name="PasJSWebBrowserProject" Value="1"/>
<Item4 Name="RunAtReady" Value="1"/>
</CustomData>
<BuildModes>
<Item Name="Default" Default="True"/>
</BuildModes>
<PublishOptions>
<Version Value="2"/>
<UseFileFilters Value="True"/>
</PublishOptions>
<RunParams>
<FormatVersion Value="2"/>
</RunParams>
<Units>
<Unit>
<Filename Value="tinyeditordemo.lpr"/>
<IsPartOfProject Value="True"/>
</Unit>
<Unit>
<Filename Value="index.html"/>
<IsPartOfProject Value="True"/>
<CustomData Count="1">
<Item0 Name="PasJSIsProjectHTMLFile" Value="1"/>
</CustomData>
</Unit>
</Units>
</ProjectOptions>
<CompilerOptions>
<Version Value="11"/>
<Target FileExt=".js">
<Filename Value="tinyeditordemo"/>
</Target>
<SearchPaths>
<IncludeFiles Value="$(ProjOutDir)"/>
<UnitOutputDirectory Value="js"/>
</SearchPaths>
<Parsing>
<SyntaxOptions>
<AllowLabel Value="False"/>
<CPPInline Value="False"/>
<UseAnsiStrings Value="False"/>
</SyntaxOptions>
</Parsing>
<CodeGeneration>
<TargetOS Value="browser"/>
</CodeGeneration>
<Linking>
<Debugging>
<GenerateDebugInfo Value="False"/>
<UseLineInfoUnit Value="False"/>
</Debugging>
</Linking>
<Other>
<CustomOptions Value="-Jeutf-8 -Jirtl.js -Jc -Jminclude"/>
<CompilerPath Value="$(pas2js)"/>
</Other>
</CompilerOptions>
<Debugging>
<Exceptions>
<Item>
<Name Value="EAbort"/>
</Item>
<Item>
<Name Value="ECodetoolError"/>
</Item>
<Item>
<Name Value="EFOpenError"/>
</Item>
</Exceptions>
</Debugging>
</CONFIG>

44
demo/tinyeditor/tinyeditordemo.lpr Normal file
View File

@ -0,0 +1,44 @@
program tinyeditordemo;
{$mode objfpc}
uses
BrowserApp, JS, Classes, SysUtils, Web, libtinyeditor;
type
{ TMyApplication }
TMyApplication = class(TBrowserApplication)
private
function DoShowHTML(aEvent: TJSEvent): boolean;
protected
divHTMLContent : TJSHTMLElement;
divEditor : TJSHTMLElement;
btnShowHTML : TJSHTMLButtonElement;
procedure DoRun; override;
public
end;
function TMyApplication.DoShowHTML(aEvent: TJSEvent): boolean;
begin
divHTMLContent.InnerHtml:=divEditor.InnerHTML;
end;
procedure TMyApplication.DoRun;
begin
divHTMLContent:=GetHTMLElement('divHTMLContent');
divEditor:=GetHTMLElement('editor');
btnShowHTML:=TJSHTMLButtonElement(GetHTMLElement('btnShowHTML'));
btnShowHTML.addEventListener('click',@DoShowHTML);
tinyEditor.transformToEditor(divEditor);
end;
var
Application : TMyApplication;
begin
Application:=TMyApplication.Create(nil);
Application.Initialize;
Application.Run;
end.