htmlarea wysiwyg editor - is it possible?

DecSoft NeoPlugins pone sus proyectos de VisualNeo en otro nivel con +1.000 nuevas acciones para sus apps.

Ahorre dinero comprando nuestros paquetes de NeoPlugins. ¡Cinco, Diez e incluso nuestra colección entera a un precio increíble!

¡Eche un vistazo a algunas de preguntas más frecuentes sobre nosotros y nuestros productos!

Diseñe para pantallas pequeñas y distribuya también (sin cambios) en dispositivos como tablets.

DecSoft HTML Compiler es fácil de usar: personalize su proyecto y compile sus apps y sus juegos rápidamente.

Los NeoPlugins de DecSoft tienen versiones "designtime" y "runtime" para reducir el tamaño de sus apps.

Cree apps multiplataforma con DecSoft App Builder, incluyendo Android e iOS, con la misma base de código.

¡Eche un vistazo a nuestro canal de YouTube y suscríbase para recibir notificaciones sobre nuevos vídeos!

DecSoft HTML Compiler incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

DecSoft App Builder integra un asistente de Open AI para ayudarle mientras desarrolla sus apps.

Los plugins oficiales de Apache Cordova se incluyen de serie y hay cientos de ellos disponibles para su uso.

DecSoft App Builder incluye un conveniente Compilador por línea de comandos para compilar sus apps desde la consola.

Compile, convierta sus modernas apps y juegos HTML en programas ejecutables sin dependencias para Microsoft Windows.

Cree apps y expanda sus capacidades usando el lenguaje más popular del mundo: Javascript.

Cree modernas apps y juegos HTML a otro nivel haciendo cosas que incluso las modernas apps y juegos HTML no pueden.

Ahorre tiempo, recursos y dinero creando apps para Android, iOS y más con la misma base de código.

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!

Todo el mundo puede leer el foro de soporte de DecSoft para aprender del mismo, sin embargo, sólo los clientes de DecSoft pueden abrir nuevos hilos. Compre una o más licencias de productos de DecSoft y obtendrá este y otros beneficios.