htmlarea wysiwyg editor - is it possible?

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Take a look at some frequently asked questions about us and our products!

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

Peter Bradstreet

Hi David,

I would like to offer a small simple html editor attached to an html area in the app to allow the user to do some very basic html formatting. I have been looking at a product called CLEditor and it looks like a pretty basic implementation. If you look at the example at https://premiumsoftware.net/cleditor/simpledemo you can view the html involved. I have downloaded the referenced assets and have the page working locally in an html file.

I decided to see if I could get it working in the Agenda sample so I added a reference to jquery.cleditor.css and jquery.cleditor.min.js and the toolbar images but am assuming that jquery.min.js is already referenced by AB so doesn't need to be added? Then I added the following code to the show view event:

StartJS
  $(document).ready(function () { $("#EditNotesTextarea").cleditor(); });

EndJS

When I view the app, it does show the wysiwyg editor in the Edit view but there seems to be an issue with the index layer and I am not sure if the wysiwyg editor is cleanly attached to the html area. Would you have a few minutes to take a look at what I have done and let me know if what I am trying to do is possible and if so, where I am going wrong?

Thanks, Pete

p.s. You can download my sample file at https://mymarina.online/iPort/decsoft/AgendaCLEditor.zip

DecSoft

Hello Peter,

Unfortunately, it's not as easy as can appear. The point is that this kind of editor made various changes and add certain style in the HTML that break the app's layout. But it's a question of a bit of CSS? Well... not really... for example, if you replace the editor inicialization code by this other:


StartJS
  var
    textarea = $('#EditNotesTextarea'),
    top = textarea.css('top'),
    left = textarea.css('left'),
    width = textarea.css('width'),
    height = textarea.css('height');

  textarea.cleditor();

  var
    editor = $('.cleditorMain');

  editor.css('top', top);
  editor.css('left', left);
  editor.css('width', (parseFloat(width) - 5) + 'px');
  editor.css('height', height);
  editor.css('position', 'absolute');

EndJS

... we (apparently) avoid the "wrong position" of the editor, which, probably we wanted in the place of the original textarea. But, if you try the above code, even when apparently works... certainly don't work completely as expected, or, some other issues appear.

And this require more time in order to check what can happen... or maybe look for another possible editor, maybe more friendly for us. Or maybe we must try to avoid the usage of a textarea... and try to use an HTML control, since this editors works also in this way.

Let me to try to take a look, Peter... if I have some time tomorrow I will try to test more editors (since I already try some of them...) and how can be the best way to achieve it, probably by using an HTML control... but this is mental note to me too... because probably this can be a better approach (for us, at least) than use an existing Textarea.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David,

I really appreciate you looking into it. Another one that I was looking at was Summernote which might be a good candidate since they specifically mention Bootstrap 4 and Angular: https://summernote.org

Cheers,

Pete

DecSoft

Hello Peter,

Please, take a look at the below app sample, who use the Summernote editor. Copy the below XML, save it as "MyApp.ab", open that file with App Builder and run the app:

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.36">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Icon></Icon>
    <Width>320</Width>
    <Height>480</Height>
    <Scale>1</Scale>
    <Zoom>1</Zoom>
    <Theme>Default</Theme>
    <Themes></Themes>
    <Plugins></Plugins>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <LanguageCode>en</LanguageCode>
    <TextDirection>ltr</TextDirection>
    <Created>2019-04-28T16:40:50.546</Created>
    <Modified>2019-04-28T17:21:26.778</Modified>
    <BuildNumber>0</BuildNumber>
    <AutoBuildNumber>0</AutoBuildNumber>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Electron />
      <Android />
      <IOS />
      <Windows />
      <Phonegap>
        <CLIVersion>9.0.0</CLIVersion>
      </Phonegap>
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS

 $('#summernote').summernote({
   placeholder: 'Hello stand alone ui',
   tabsize: 2,
   height: 300
 });

EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>464</Height>
          <Html>
            <![CDATA[<div id="summernote"></div>]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles>
      <Path Query="">https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.css</Path>
    </Styles>
    <Scripts>
      <Path Query="">https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-lite.js</Path>
    </Scripts>
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.36 (4/27/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

As you can see, using an HTML control to place the editor, it's quite better than try to use the Textarea replacement approach. This is because, also with Summernote, when use a textarea in order to be replaced with the editor, the editor become wrong positioning, and, even when maybe we can try to fix this using CSS, probably it's not as easy as appear (see my previous post in this thread), and, on the other hand, apparently the HTML control can give us a more or less good usage of the editor.

Look at the above app sample. Probably we must calculate a "height" for the editor, or probably apply some possible CSS... and, of course, since we don't use a Textarea, we can't use any existing variable, but, in order to set and get the content of the editor, we must use the editor's API. But honestly I think this is the way, Peter, since the Textarea replacement appear to not work as expected in our case.

Supose that we find difficulties to integrate the editor along other controls in the view, since we use an HTML control, that may finally don't fit exactly the place that we wanted. Here may we can take at least two approaches: the first one, include other possible required input text controls also inside the HTML control. Or, maybe include a button and not the editor, and, when the user press that button, shown the editor in a new view (maybe modal), since maybe the editor can be more easily fit an entire view. Both of these approaches are correct, in my opinion. *

* If we can't fit the editor along other controls... but this don't mean that maybe that is possible: depend on the controls that we want to use, their positions, etc. Remember that an HTML control (our editor container) can be have their "overflow-y" CSS rule in "auto", and, doing this, we can control the position of the HTML control in a more accurate way, since everything that go "beyond" that position, is "hidden" but available in the HTML control by using their scrollbar.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David, Thanks so much! I will have a go getting it to play nicely in the Agenda sample and then if successful move it into my app. The editor is really quite slick and I think that it is a good add on for AB. I will send you a copy of the Agenda app in case you want to use it as a sample once I hopefully get it working. Cheers, Pete

DecSoft

Hello Peter,

Good to know! Please, sorry for the delay... it's a problem here in my hosting with the E-Mail relay... I already open a ticket and hope the problems go on as quickly as possible. :-(

Purchase one or more licenses of our products if they are useful to you!

DecSoft

Hello Peter,

Please, upgrade your AB copy. We reach the 190 app samples with the current release, one of these, the new WYSIWYG app sample. This app sample uses SummerNote to provide a WYSIWYG editor to our apps, and, shown how we can initialize it with some specific contents, and how to retrieve the contents from the editor, in order to be uploaded to the app's server, for example.

In fact, we go a little beyond with this app sample. Let me to explain a bit. In the sample that I prepare for you above, and, in order to allow me to copy it here as XML, we use the SummerNote script and style from a thirdparty server, that is, we use URLs to retrieve, link and use these required files. When I start to prepare the sample to be included in App Builder, I note that the style file requires by itself a couple of font files.

The above represent a problem, because, we can use the app's file manager to specify an app's local script and style, but, then these files are placed into the "app/scripts/" and "app/styles/" folders, and, in the case of the SummerNote style, can't find the appropriate font files in the expected place, so the editor cannot be properly initialized nor used.

To avoid the above problem, the current release of AB allows to specify app's relative paths using the app's file manager. So, as you can see in the new WYSIWYG app sample, what we do is to use the file manager "Folder" tab, in order to include the entire "summercode" directory. Then, we specify app's relative paths for the required style and script, and, now yes, all works as expected, since all the required font files (for example) exists in the place that the SummerNote expected.

Probably you reach the described problem if you start to use local files for SummerNote (which probably it's quite recommended, since it's perfectly possible, easy to do (right now) and do not depend on any server), so I hope the introduced changes are good for you and others too.

Purchase one or more licenses of our products if they are useful to you!

Peter Bradstreet

Hi David, Thank you so much! I had just finished struggling with the font issue and had resorted to copying the fonts into the correct folder in the compiled folder so your solution is a much better one. Thanks, also for pointing the way to how to set and get the values of the editor, it will speed things up for me greatly. Cheers, Pete

Peter Bradstreet

Hi David, I have this working now by working with the Agenda sample. Here is a copy of it in case you have any use for it. The wysiwyg editor picks up the value from local storage and updates it. Cheers, Pete Download zip file

DecSoft

Thanks for sharing, Peter. :-)

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.