[QUESTION] blockquote

[haophan1996]

hi, i want to custom blockquote that every time user type something in blockquote, i want it to be different color to indicate this is a quote, such as add a box, a color, how can i do it, is there anyway to do so

thank you in advance

[tneotia]

You might be able to change the style of blockquote by injecting custom CSS through JavaScript. If you'd like an example for this let me know, sorry for the late response!

[haophan1996]

You might be able to change the style of blockquote by injecting custom CSS through JavaScript. If you'd like an example for this let me know, sorry for the late response!

yes, please, and I have only 1 more question that how do custom blockquote or youtube, as normal i will input <iframe></iframe> but i want it show different such as <video><\video> and other

thank you very much

[tneotia]

Here is an example for blockquote styling:

HtmlEditor(
  controller: controller,
  callbacks: Callbacks(onInit: () {
    controller.editorController!.evaluateJavascript(source: """
      const style = document.createElement('style');
      style.textContent = 'blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; color: black; };';
      document.head.append(style);
    """);
  }),
),

Result

For changing how the HTML is inserted for elements like video, you can do this:

HtmlEditor(
    controller: controller,
    toolbarOptions: ToolbarOptions(
      mediaUploadInterceptor: (PlatformFile file, InsertFileType type) async {
        if (file.bytes != null) {
          if (type == InsertFileType.video) {
            String base64Data = base64.encode(file.bytes!);
            String base64Image =
            """<video src="data:video/${file.extension};base64,$base64Data" data-filename="${file.name}"/>""";
            controller.insertHtml(base64Image);
            //tell the package we handled on our own
            return false;
          }
        }
        //tell the package to handle cases other than video on its own
        return true;
      },
    ),
  );

You can insert any different type of HTML as long as it can display base64 content. If you need to show it in an iframe then you will have to upload to server and show the URL, otherwise you can use <video> to show base64 data.

Let me know if you have further questions.

[haophan1996]

Here is an example for blockquote styling:

HtmlEditor(
  controller: controller,
  callbacks: Callbacks(onInit: () {
    controller.editorController!.evaluateJavascript(source: """
      const style = document.createElement('style');
      style.textContent = 'blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; color: black; };';
      document.head.append(style);
    """);
  }),
),

Result
For changing how the HTML is inserted for elements like video, you can do this:

HtmlEditor(
    controller: controller,
    toolbarOptions: ToolbarOptions(
      mediaUploadInterceptor: (PlatformFile file, InsertFileType type) async {
        if (file.bytes != null) {
          if (type == InsertFileType.video) {
            String base64Data = base64.encode(file.bytes!);
            String base64Image =
            """<video src="data:video/${file.extension};base64,$base64Data" data-filename="${file.name}"/>""";
            controller.insertHtml(base64Image);
            //tell the package we handled on our own
            return false;
          }
        }
        //tell the package to handle cases other than video on its own
        return true;
      },
    ),
  );

You can insert any different type of HTML as long as it can display base64 content. If you need to show it in an iframe then you will have to upload to server and show the URL, otherwise you can use <video> to show base64 data.

Let me know if you have further questions.

Thank you so much, your help is very helpful

[tneotia]

No problem. If you have any other questions let me know!