forum

home / developersection / forums / how to add summernote editor in android studio project?

Ask Question

How to add summernote editor in android studio project?

Arti Mishra 3147 27-Oct-2018

How to add summernote editor in android studio project?

android apps android 
Updated on 02-Jul-2023
Arti Mishra

Arti Mishra

Follow
Student

Can you answer this question?

Answer

3 Answers

Aryan Kumar

Aryan Kumar

02-Jul-2023

Sure. Here are the steps on how to add Summernote editor in Android Studio project:

  1. Add the Summernote editor dependency to your project. You can do this by adding the following line to your project's build.gradle file:

Code snippet

dependencies {
    implementation 'com.github.summernote:summernote-android:0.8.18'
}
  1. Add the Summernote editor layout to your project's layout file. You can do this by adding the following code to your project's activity_main.xml file:

Code snippet

<com.summernote.summernote:summernote
    android:id="@+id/summernote"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. Initialize the Summernote editor in your project's MainActivity.java file. You can do this by adding the following code to your project's MainActivity.java file:

Code snippet

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Initialize the Summernote editor
        Summernote summernote = findViewById(R.id.summernote);
        summernote.setPlaceholder("Enter your text here...");
    }
}
  1. Run the app and test the Summernote editor.

This code will initialize the Summernote editor and set the placeholder text to "Enter your text here...". When you run the app, you will see a Summernote editor in the layout. You can use the Summernote editor to edit text.

You can customize the Summernote editor by setting the following properties:

  • Placeholder: The placeholder text that will be displayed in the Summernote editor.
  • Theme: The theme of the Summernote editor.
  • Plugins: The plugins that will be enabled in the Summernote editor.
  • Language: The language of the Summernote editor.

You can also add other features to the Summernote editor, such as a list of items, a text field, or a progress bar.

ariana pham

ariana pham

09-Dec-2018
Post is removed by the Admin.
Arti Mishra

Arti Mishra

27-Oct-2018
“Summernote” 
Getting started first we know about What is summernote? it is an editor that uses an open source library for posting any text or image. It is a combination of different language like HTML, CSS, javascript, jQuery, Bootstrap..etc.

Here we demonstrate the simple example for adding the summernote editor in our code project.

Add this code to your dependencies 
buildTypes {
        release {
            minifyEnabled true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
..........................
........................
dependencies {
implementation 'com.android.support:appcompat-v7:27.1.1'

    implementation 'com.android.support:support-v4:26.1.0'

    implementation 'com.github.bumptech.glide:glide:4.0.0'
compile 'in.nashapp.androidsummernote:androidsummernote:1.0.5'
}

Add some code in Manifest (For adding images from Device)
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Retrive HTML Data from summernote
String html_data = summernote.getText();

Set HTML Data
summernote.setText("<h2><i>Hello World.</i><h2><br><h3> Summernote Example</h3>");

Activity_main.xml 
<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context="com.example.msclient009.summernoteexample.MainActivity">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:orientation="vertical">



        <TextView

            android:id="@+id/tex1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginBottom="20dp"

            android:layout_marginStart="50dp"

            android:layout_marginTop="20dp"

            android:text="Summernote Example"

            android:textColor="#f00"

            android:textSize="22dp"

            tools:ignore="InvalidId" />

        

        <TextView

            android:id="@+id/tex"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_marginBottom="20dp"

            android:layout_marginStart="50dp"

            android:layout_marginTop="20dp"

            android:text="Scrollable Summernote"

            android:textColor="#f00"

            android:textSize="22dp"

            tools:ignore="InvalidId" />



            <in.nashapp.androidsummernote.Summernote

                android:id="@+id/summernote"

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:layout_marginEnd="5dp"

                android:layout_marginStart="5dp"

                android:layout_marginTop="5dp"

                android:overScrollMode="ifContentScrolls"



                android:scrollbarAlwaysDrawVerticalTrack="true"

                android:scrollbarSize="20dp"

                android:scrollbarStyle="insideInset"

                android:scrollbars="vertical"

                android:verticalScrollbarPosition="right" />

    </LinearLayout>



</ScrollView>

MainActivity.java 

package com.example.msclient009.summernoteexample;

import android.annotation.SuppressLint;

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.MotionEvent;

import android.view.View;

import in.nashapp.androidsummernote.Summernote;



public class MainActivity extends AppCompatActivity implements View.OnTouchListener {

    Summernote summernote;



    @SuppressLint("ClickableViewAccessibility")

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);



        summernote = (Summernote) findViewById(R.id.summernote);

        summernote.setRequestCodeforFilepicker(5);

        summernote.setText("<h2>Hello World.<h2><br><h3> I'am Summernote</h3>");

        summernote.setOnTouchListener(MainActivity.this);

    }



    @Override

    public boolean onTouch(View view, MotionEvent motionEvent) {

        if (summernote.hasFocus()) {

            view.getParent().requestDisallowInterceptTouchEvent(true);

            switch (motionEvent.getAction() & MotionEvent.ACTION_MASK){

                case MotionEvent.ACTION_SCROLL:

                    view.getParent().requestDisallowInterceptTouchEvent(false);

                    return true;

            }

        }



        return false;

    }

}

Output :
How to add summernote editor in android studio project?




"Thanks!!! for Reading"

Liked By