Rich text editor (WYSIWYG)

[bojan88]

Can you integrate rich text editor? I would recommend http://hackerwins.github.io/summernote/
The best feature is that it saves images directly in the content of the field using base64 encoding, so you don't need to implement this at all.

[yogiben]

Looks good.

All of the forms are generated by autoform. You might have to smile sweetly at @aldeed for this one.

If you're desperate to get it working now, you could create an autoform file input template and then customise the admin route. I might get around to this at one point, but not in the next month.

[bojan88]

I cloned your repository, so I'm using this as local package with some changes and Summernote editor integrated.
I would try to implement this in your code and give you a pull request if you're interested so that other people can use it easily.

[yogiben]

Yes. That would be most good.

It needs to be properly integrated with autoform; I don't want to diverge.
Am 27.09.2014 20:09 schrieb "bojan88" [email protected]:

I cloned your repository, so I'm using this as local package with some
changes and Summernote editor integrated.
I would try to implement this in your code and give you a pull request if
you're interested so that other people can use it easily.

—
Reply to this email directly or view it on GitHub
#11 (comment).

[yogiben]

Any news on this? How did you manage it by the way?

[dcsan]

I'm interested in how you do this too. my use case is more for markdown editing, so i wanted to integrate the ACE editor. however this seems maybe more like an autoform related development?

ideally you could just set one field to be a markdown editor, and keep the rest of the functionality as is. if you guys have any advice where to start with this i'd appreciate it. I have integrated reactive-ace already and it's a bit tricky because of lots of external asset files needed and package namespacing at build time.

[aldeed]

autoform 4.0 (not yet official, but there are RC releases) has support for defining custom input types. You can then just do type="my-custom-type" on your input field to get any custom widget, or you can set the type in your schema to work seamlessly with yogiben:admin.

So I would envision someone can create markdown textbox and wysiwyg textbox packages that provide custom autoform types for this. If interested in doing so, I can help guide you.

[bojan88]

I added Summernote in my project.

You need to add summernote.js and summernote.css files in your project first.
In simple scheme:

content: {
    type: String,
    autoform: {
      rows: 10,
      class: "editor"
    }
  },

And to render the editor:

Template.AdminDashboardNew.rendered = function() {
  initEditor();
};

Template.AdminDashboardEdit.rendered = function() {
  initEditor();
};

function initEditor() {
  $('.editor').summernote({
    // summernote options
  });
};

Summernote stores base64 encoded images in database.
This is not the best solution because meteor collection documents will have full image in "content" field in my example.
You can customize it with:

onImageUpload: function(files, editor, $editable) {
    // store image with collectionFs for example.
   editor.insertImage($editable, url); //insert the image in editor stored in server - url is the url of the image
}

@yogiben if you think this is a good solution, you can integrate it in your package and update the readme file.

[rwatts3]

Personally I'd like to see the new tinymce baked in rather than summer note. The new tinymce lets you choose between inline editing on content or a normal WYSIWIG. A developer could set a session scope and a helper for the targeted class of elements they want there user to edit then once they click a button it would trigger those classes thus allowing them to edit specific content inline from the front end.

This makes a good dual threat solution

[rwatts3]

@bojan88 where did you put your summer note files ?

[bojan88]

@rwatts3 You can put it anywhere in the client folder.

[yogiben]

Within a week, Aldeed will have implemented a new feature that lets us define templates in the schema.

This means that instead of writing custom templates (in 90% of cases) we'll be able to define the custom template and it will be rendered.

Meteor-Community-Packages/meteor-autoform#410

This could be wysiwyg editors, map inputs, file upload. Once that happens, these issues will become a lot easier.

[rwatts3]

With @aldeed 's update how would one implement what @bojan88 has done above ?

[rwatts3]

@yogiben are you going to be implementing @bojan88 's updates into the core ? I see that there are a couple summernote packages in atmosphere however if we can get a native editor in the meteor-admin with options like @bojan88 has done I believe this will be most resourceful.

[yogiben]

I would not update @bojan88 's package into the core.

Instead, I would encourage him to publish an 'autoform' package that provided an extra input type. When af 4.0.0 is released, it will be easy to define the schema such that it uses this template.

[aldeed]

Agree. Someone can release summernote and/or tinymce as separate add-on packages. See the bootstrap-datepicker package I made for an example.

It's possible that core changes will be needed as people try making more custom input type packages, and I'm happy to make those changes as valid use cases present themselves.

[rwatts3]

@bojan88 I did your method above to add the template.
However when I go look at the post on the front end it actually shows the

tags from the editor rather than rendering them. Is there something You did to get this working ?

[bojan88]

@rwatts3 You have to use triple curly braces in template, so instead {{content}} it's {{{content}}}

[rwatts3]

Thank you @bojan88

[rwatts3]

I'm thinking about working on an extension package to bring more CMS like features to meteor-admin, would you be interested in contributing to something like that. @bojan88

[aldeed]

I happened to see this a few days ago, too: https://atmospherejs.com/nicolaslopezj/cms

I definitely don't have time to be involved very much, but merging parallel projects could speed up realization of an autoform-backed CMS. I think it makes sense to potentially have a few related packages rather than dumping all the features into one.

@nicolaslopezj

[yogiben]

@aldeed are there any rich text editor custom inputs for autoform?

If not, I will build one for meteor-admin. @rwatts3 do you find summernote to be the best available?

[dcsan]

do people really want rich text over Markdown? or are you thinking to just add a generic embedded editor that can handle WYSIWYG and not?

I've used ACE and it's pretty decent, did a comparison at the time but haven't really tried others.
the mad-eye guys are experts on that type of thing
https://github.com/mad-eye/meteor-reactive-ace

[yogiben]

I think we can give people a variety.

Each should be its own package and define a new custom input type for autoform.

[aldeed]

I don't know of any yet. I'd like to add a list of the custom input type packages to the autoform docs as people create them.

[rwatts3]

@yogiben so far summer note looks and feels good in the admin panel. One thing to note is when you are editing posts on the front end it will render in rich text so summernote class will need to be added to all possible update locations.

I'm currently working on a tinymce package for meteor admin. Eventually I would like to update the package so that in a settings collection the user can select which ever editor their like tinymce summernote markdown or any other popular ones.

[rwatts3]

I do have a side question however. Has anyone thought of or is there a package extension for meteor admin that allows media gallery. So users can add images to their posts with ease

[dcsan]

that involves a bit more work on the infra side. for deployments at meteor.com the images could vanish on the local filesystem, so you probably want to have an option to configure an S3 bucket etc...

[rwatts3]

Understood so this is something that hasn't been implemented altogether not just with meteor-admin. Hmm sounds like a new package idea to me.

[nicolaslopezj]

@rwatts3

here

You can check the source to make one compatible with meteor-admin

[rwatts3]

@yogiben

I have created a package called watts:admin-editor with summernote as the editor. I plan to extend the package so that I add other options and the users will be able to distinguish between which editor they would like to use.

[dandv]

Hey guys, I've sent a PR to summernote for an official Meteor integration, and it's now live.

https://atmospherejs.com/summernote/summernote

BTW, we now have a bunch of major libraries integrating with Meteor straight from their repo: d3, moment, font-awesome, hammer, Sortable etc.

[yogiben]

@rwatts3 I recently authored a custom input type for autoform for file upload.

It's a good way to integrate a custom input type. Take a look and see what you think.

[rwatts3]

Thanks @yogiben I will give this a look. In the meantime I like the updates you did to the meteor-admin package.

[mpowaga]

@rwatts3 I've created autoform-summernote package which seems to work well with meteor-admin. You just need to set afFieldInput to 'summernote' in your schema.