jihong88 / suneditor Goto Github PK

Hi, i want to use your editor in one of my project but is it possible to prevent the editor of adding <p> Tags? Everytime i want to edit a text, it adds one more <p></p> at the beginning and at the end of the document. So when i edit a text 5 times it looks like

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>Here is my text</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>

i have edited

            if (element.value.length > 0) {
                this.contentWindow.document.body.innerHTML = '<p>' + element.value + '</p>';
            } else {
                this.contentWindow.document.body.innerHTML = '<p>&#65279</p>';
            }

to

            if (element.value.length > 0) {
                this.contentWindow.document.body.innerHTML = element.value;
            } else {
                //this.contentWindow.document.body.innerHTML = '<p>&#65279</p>';
            }

is there another (good practice) way?

Hi,

I have used your editor. It works well,
But I got an issue. I have inserted icon font like Font Awesome via link button. The text is '' but I got result: '<i class="fab fa-youtube"></i>'
So web browser renders incorrect.

Any chance on adding support for mentions?

For example, if I type "@john" a popup list would display letting me choose a specific person from a list?

Once I choose a person, then maybe insert their name with a styled background color?

The popup list should be closable by pressing ESC and navigable by keyboard arrow keys.

안녕하세요.

SUNEDITOR 라이브러리 사용 중 문의 사항이 있어서 이슈 등록합니다.

라이브러리 기능 사용 중, 툴바에 커스텀 버튼을 만들고자 할 때 plugins을 import 해서 쓰도록 가이드가 나와있습니다.

라이브러리 사용 개발 환경 상, 구현 해 놓으신 import/export modules 패턴을 사용하기 제한되는데 혹시 각 import module이 모두 하나의 파일에 통합된 상태로 사용하는 방법 혹은 module을 사용하지 않고 해당 기능을 사용할 수 있는 방법 가이드 문의 드립니다.

감사합니다.

不错的脚本，就是图标有点丑，考虑下用 fontawesome的图标。

Hy JiHong, is there a way i could add custom button ?.

방금전에 사용해보려고 했는데 기본 witdth값이 정해져 있지 않나 봅니당

또 공홈에서 width와 height에 대한 설명이 바뀐거 같습니다!

Hi,

I think that nearly everyone needs a save-button - it would be great to have a out-of-the-box solution ...

Regards

Hi,
is it possible to set the height after creation of the control.
I can't set the textarea height or the editor height.
Also it would be great thing to add and delete buttons after editor creation.

1. Setting Editor Properties
2. Adding/Removing Buttons

When clicking on an image in the editor you get options to resize it by 100%, 75%, 50%, and 25%.

Is there a possibility to allow a custom size in pixels?

Maybe make it part of the same dialog that displays when you click the Picture button on the image?

In the screenshot below I added a Size drop down that contains options for 100%, 75%, 50%, 25%, and Custom.

Choosing the Custom option would display Height and Width fields, as shown below.

The check box between the Height and Width would allow the user to maintain the aspect ratio, so that if they changed the Height OR Width, the other value would be adjusted automatically and keep the image from being distorted.

The refresh icon simply swaps the Height and Width values with each other.

I'm not sure of my availability, but I might be able to implement this, if you're accepting pull requests?

Hello jihong,
I hope you will register this repo to bower, it will make easier to search and install.

And thanks for your efforts to make SunEditor, i'm sure your's is one of top best Web based text editor.

Hi JiHong88,

When TD title is too long, html is breaked in source with v2.14.0

To reproduce :

Paste in source mode:

<table><tr><th colspan="5" align="left">error test : ok when title is shoten :</th></tr>
<tr><th colspan="5" align="left">Call Stack fake</th></tr>
<tr><th align="center">#</th><th align="left">Time</th><th align="left">Memory</th><th align="left">Function</th><th align="left">Location</th></tr>
<tr><td align="center">1</td><td align="center">0.0125</td><td align="right">231976</td><td>{main}(  )</td><td title="/PluXml-5.7/index.php">../index.php<strong>:</strong>0</td></tr>
<tr><td align="center">2</td><td align="center">0.0507</td><td align="right">366792</td><td>plxMotor::getInstance(  )</td><td title="/PluXml-5.7/index.php">../index.php<strong>:</strong>30</td></tr>
<tr><td align="center">3</td><td align="center">0.0507</td><td align="right">368680</td><td>plxMotor-&gt;__construct(  )</td><td title="/PluXml-5.7/core/lib/class.plx.motor.php">../class.plx.motor.php<strong>:</strong>53</td></tr>
<tr><td align="center">4</td><td align="center">0.0528</td><td align="right">380656</td><td>plxPlugins-&gt;loadPlugins(  )</td><td title="/PluXml-5.7/core/lib/class.plx.motor.php">../class.plx.motor.php<strong>:</strong>94</td></tr>
<tr><td align="center">5</td><td align="center">0.0533</td><td align="right">417808</td><td>plxPlugins::getInstance(  )</td><td title="/PluXml-5.7/core/lib/class.plx.plugins.php">../class.plx.plugins.php<strong>:</strong>86</td></tr>
</tbody></table>



<table><tr><th colspan="5" align="left">error test : nook when title is ??? :</th></tr>
<tr><th colspan="5" align="left">Call Stack fake</th></tr>
<tr><th align="center">#</th><th align="left">Time</th><th align="left">Memory</th><th align="left">Function</th><th align="left">Location</th></tr>
<tr><td align="center">1</td><td align="center">0.0125</td><td align="right">231976</td><td>{main}(  )</td><td title="/var/www/PluXml-5.7/index.php">../index.php<strong>:</strong>0</td></tr>
<tr><td align="center">2</td><td align="center">0.0507</td><td align="right">366792</td><td>plxMotor::getInstance(  )</td><td title="/var/www/PluXml-5.7/index.php">../index.php<strong>:</strong>30</td></tr>
<tr><td align="center">3</td><td align="center">0.0507</td><td align="right">368680</td><td>plxMotor-&gt;__construct(  )</td><td title="/var/www/PluXml-5.7/core/lib/class.plx.motor.php">../class.plx.motor.php<strong>:</strong>53</td></tr>
<tr><td align="center">4</td><td align="center">0.0528</td><td align="right">380656</td><td>plxPlugins-&gt;loadPlugins(  )</td><td title="/var/www/PluXml-5.7/core/lib/class.plx.motor.php">../class.plx.motor.php<strong>:</strong>94</td></tr>
<tr><td align="center">5</td><td align="center">0.0533</td><td align="right">417808</td><td>plxPlugins::getInstance(  )</td><td title="/var/www/PluXml-5.7/core/lib/class.plx.plugins.php">../class.plx.plugins.php<strong>:</strong>86</td></tr>
</tbody></table>

return to normal, the second table have lost TR
return to source mode and titles of 2nd table like this :
<td title="/em>

FULL SOURCE CODE:

<table>
<tbody>
<tr>
<th colspan="5" align="left">
error test : ok when title is shoten :</th>
</tr>
<tr>
<th colspan="5" align="left">
Call Stack fake</th>
</tr>
<tr>
<th align="center">
#</th>
<th align="left">
Time</th>
<th align="left">
Memory</th>
<th align="left">
Function</th>
<th align="left">
Location</th>
</tr>
<tr>
  <td align="center">1</td>
  <td align="center">0.0125</td>
  <td align="right">231976</td>
  <td>{main}(  )</td>
  <td title="/PluXml-5.7/index.php">../index.php<strong>:</strong>0</td>
</tr>
<tr>
  <td align="center">2</td>
  <td align="center">0.0507</td>
  <td align="right">366792</td>
  <td>plxMotor::getInstance(  )</td>
  <td title="/PluXml-5.7/index.php">../index.php<strong>:</strong>30</td>
</tr>
<tr>
  <td align="center">3</td>
  <td align="center">0.0507</td>
  <td align="right">368680</td>
  <td>plxMotor-&gt;__construct(  )</td>
  <td title="/PluXml-5.7/core/lib/class.plx.motor.php">../class.plx.motor.php<strong>:</strong>53</td>
</tr>
<tr>
  <td align="center">4</td>
  <td align="center">0.0528</td>
  <td align="right">380656</td>
  <td>plxPlugins-&gt;loadPlugins(  )</td>
  <td title="/PluXml-5.7/core/lib/class.plx.motor.php">../class.plx.motor.php<strong>:</strong>94</td>
</tr>
<tr>
  <td align="center">5</td>
  <td align="center">0.0533</td>
  <td align="right">417808</td>
  <td>plxPlugins::getInstance(  )</td>
  <td title="/PluXml-5.7/core/lib/class.plx.plugins.php">../class.plx.plugins.php<strong>:</strong>86</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th colspan="5" align="left">
error test : nook when title is ??? :</th>
</tr>
<tr>
<th colspan="5" align="left">
Call Stack fake</th>
</tr>
<tr>
<th align="center">
#</th>
<th align="left">
Time</th>
<th align="left">
Memory</th>
<th align="left">
Function</th>
<th align="left">
Location</th>
</tr>
<tr>
  <td align="center">1</td>
  <td align="center">0.0125</td>
  <td align="right">231976</td>
  <td>{main}(  )</td>
  <td title="/em>../index.php<strong>:</strong>0</td>
</tr>
<tr>
  <td align=" center"="">2</td>
  <td align="center">0.0507</td>
  <td align="right">366792</td>
  <td>plxMotor::getInstance(  )</td>
  <td title="/em>../index.php<strong>:</strong>30</td>
</tr>
<tr>
  <td align=" center"="">3</td>
  <td align="center">0.0507</td>
  <td align="right">368680</td>
  <td>plxMotor-&gt;__construct(  )</td>
  <td title="/em>../class.plx.motor.php<strong>:</strong>53</td>
</tr>
<tr>
  <td align=" center"="">4</td>
  <td align="center">0.0528</td>
  <td align="right">380656</td>
  <td>plxPlugins-&gt;loadPlugins(  )</td>
  <td title="/em>../class.plx.motor.php<strong>:</strong>94</td>
</tr>
<tr>
  <td align=" center"="">5</td>
  <td align="center">0.0533</td>
  <td align="right">417808</td>
  <td>plxPlugins::getInstance(  )</td>
</tr>
</tbody>
</table>

Hi
I noticed the image plugin is not working. When I insert an image it doesn't display.
Also, the dialog input persists the old image URL every time.

Undo/Redo is not worwing properly when you do a lots modifications in the text field.

Hello everyone,

is there maybe a issue with React ? Because in Fiddle it sems to work fine.

`import React, { Component } from 'react'

import 'suneditor/dist/css/suneditor.min.css'
import suneditor from 'suneditor';

suneditor.create('sample', {
 // insert options
});
export default class Editor extends Component {
  render() {
    return (
      <div>
    <textarea id="sample" className="sample">Hi</textarea>
      </div>
    )
  }
}

안녕하세요.

SUNEDITOR 라이브러리 사용 중 문의 사항이 있어서 이슈 등록합니다.

에디터 상에서 한 줄 전체 선택 혹은 마우스 왼쪽 트리플 클릭을 통한 선택 후,

스타일 적용할 경우 하위 라인의 텍스트도 함께 선택 적용되는 현상이 있는데

의도된 옵션 기능인 지, 의도 하지 않은 버그 동작인 지 확인 부탁 드립니다.

Hello,
Can u make a clean paste from Word?
When I copy a text from Word, I get a lot of extra tags.

Hello,
How to insert HTML content where the cursor? (For example, insert a picture from the my gallery)

Function "appendContent" inserts at the end of the article.

P.s. sry for my eng.

Hi,

Great plugin - especially like that it is plan JS without dependencies - great work!

I just have one item to raise - and although the undo button can be used in the following situation I think it is worth considering a change to the code to cater for this. When a user has the cursor placed inside a table cell without any content and the backspace key is pressed the cell is removed from the HTML and although the border styling sometimes remains making it look as though a cell exists the user cannot place the cursor back inside the cell or restore the cell without clicking undo. If the user then starts to add rows or columns in an attempt to fix the issue it only gets worse and eventually the table has to be deleted. This doesnt occur when the cell contains text. Perhaps trap the keystroke and check if the cursor is inside an empty cell to avoid accidental removal of cells?

This is of course in the context of a user who is not familiar with HTML and cannot inspect and correct the issue themselves (a large part of the target end user audience I assume).

By way of an enhancement it would also be good to be able to fix the width of the table or columns so that dont jump around as you start to add text to them. Perhaps via an additional couple of buttons in the table pop-up menu?

This editor looks promising but I wanted to make a few suggestions
Modularize each of the heavyweight functions such as
file upload, image etc into seperate files that way we can include only the functions we want
Alot of the html embeded in javascript increases the file size for functionality we might not use

Hi. We are use to using CKEditor and TinyMCE and so easy to get the contents. Totally confused with SunEditor.

Below is a sample test save code we have been using in the "sample" folder. Could you take a look and make suggestion to get working?

Thanks!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="https://github.com/JiHong88" />
    <meta name="keywords" content="wysiwyg,editor,javascript,suneditor,wysiwyg eidtor,rich text editor,html editor,contenteditable,위지위그 에디터 웹에디터">
    <meta name="description" content="Pure javascript wysiwyg web editor" />
    <title>Suneditor</title>
    <!-- bootstrap -->
    <link rel="stylesheet" href="bootstrap/bootstrap.css" media="all">
    <script type="text/javascript" src="bootstrap/tether.min.js"></script>
    <script type="text/javascript" src="bootstrap/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
    <!-- main css -->
    <link rel="stylesheet" href="css/sample.css" media="all">
    <link rel="stylesheet" href="css/github.css">
    <link rel="stylesheet" href="css/github-frameworks.css">
    <!-- suneditor -->
    <link href="../dist/css/suneditor.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../dist/suneditor.min.js"></script>
    <script>
        $.getJSON('https://api.github.com/repos/JiHong88/SunEditor', function(data) {
            $('#stargazers').html(' Stargazers ' + data.stargazers_count);
        });
    </script>
</head>
<body class="back_index" style="min-width:100%; background-color:#000;">
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html" title="Suneditor"><b>Suneditor</b></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="html/getting-started.html" title="Getting started">Getting started</a></li>
                <li><a href="html/examples.html" title="Examples">Examples</a></li>
                <li><a href="html/customize.html" title="Customize">Customize</a></li>
                <li><a href="html/customPlugins.html" title="CustomPlugins">CustomPlugins</a></li>
                <li><a href="html/document.html" title="Document">Document</a></li>
                <li>&nbsp;&nbsp;</li>
                <li>
                    <a href="https://github.com/JiHong88/SunEditor" target="_blank" id="stargazers" class="github-cat" title="go to github"> Stargazers 00</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="content" style="max-width: 1265px;">
    <form name="frm">
        <textarea id="editor" style="display:none;">
            <p><br></p>
            <div class="sun-editor-id-comp sun-editor-id-image-container float-right" contenteditable="false"><figure class="sun-editor-figure-cover" style="margin: auto;"><img src="http://suneditor.com/sample/img/sunset.jpg" data-align="right" alt="Sunset image" data-rotate="" data-proportion="false" data-rotatex="" data-rotatey="" origin-size="640,360" data-origin="640,360" style="transform: rotate(0deg); max-width: 100%;"><figcaption contenteditable="true" style="margin-top: 0px;"><p>Insert description</p></figcaption></figure></div>
            <h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>
            <p>Suneditor is a lightweight, flexible, customizable WYSIWYG text editor for your web applications.</p>
            <pre><p>Supports Chrome, Safari, Opeera, Firefox, Edge, IE11, Mobile web browser.</p></pre>
            <p>Suneditor distributed under the <a href="https://github.com/JiHong88/SunEditor/blob/master/LICENSE.txt" target="_blank">MIT</a> license.</p>
            <p><br></p>
        </textarea>
    </form>
    <footer>
        <p>Suneditor create by JiHong.Lee</p>
        <p>Based on javascript</p>
        <p>Suneditor distributed under the MIT license.</p>
        <p><a href="https://github.com/JiHong88/SunEditor" target="_blank" style="color:#f4b124;">go to GitHub suneditor</a></p>
    </footer>
</div>

<script>
    SUNEDITOR.create('editor', {
        display: 'block',
        width: '100%',
        height: 'auto',
        popupDisplay: 'full',
        buttonList: [
            ['undo', 'redo'],
            ['font', 'fontSize', 'formatBlock'],
            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
            ['removeFormat'],
            ['fontColor', 'hiliteColor'],
            ['indent', 'outdent'],
            ['align', 'horizontalRule', 'list', 'table'],
            ['link', 'image', 'video'],
            ['fullScreen', 'showBlocks', 'codeView'],
            ['preview', 'print']
        ]
    });
</script>


<!-- START SAVE CODE -->
<br>
<button type="button" value="save" id="save"> Save</button>

<script>
 function saveTextAsFile()
        {
            //var textToWrite = document.getElementById('textArea').value;
			//var textToWrite = CKEDITOR.instances.textArea.getData();
			var textToWrite = editor.getContents();
            var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
            var fileNameToSaveAs = "ecc.html";
        
            var downloadLink = document.createElement("a");
            downloadLink.download = fileNameToSaveAs;
            downloadLink.innerHTML = "Download File";
            
            downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
            downloadLink.click();
        }
    
        var button = document.getElementById('save');
        button.addEventListener('click', saveTextAsFile);
</script>
</body>
</html>

Hi I wanted to suggest that you use fonts instead of images to improve http request performance
I suggest Fontawesome fonts or you can combine the images into a single sprite or svg file

Hi @JiHong88,

I have found a couple of issues with images.

First is that any images that are either copy-pasted or dragged and dropped into the editor appear to break all the standard image functionality. I.e. none of the resize works or any other image features. To replicate just find any online content that contains an image, copy it and paste it into the editor. You'll find attempting to resize to say 25% wont work.

Second is that you dont seem to be able to place the cursor at the beginning of the image and move it down. When an image is inserted as the first thing into the editor an empty pararaph is created on top of the image (I suspect as a way to allow the cursor to be placed above the image for new lines) which cannot be removed (unless you direct edit HTML). However, it would be far better to remove the auto addition of the paragraph and allow the user to place the cursor at the start of the image where pressing enter would move the image down (create paragraphs above).

Regards,
Derrick

Hello,

I have an issue when I try to display the editor in a modal form:

When I inspect the element in DOM, it seems it is not displayed: (I didn't put the style, it was dynamically rendered by suneditor).

<textarea id="textedit" style="display: none;">Hello World!</textarea>

Even when I call the .show() after the load, the element is still not correctly rendered. Any idea ?

Hi, you write a nice editor, but how about to portable your code to Vue.js?

Hi @JiHong88,

I have identified a bug with the bullet list. To reproduce:

1. Inset some normal text at the top of the editor
2. Start a bullet point list (bullets or numbers)
3. Fill in the list to contain say "Item1, Item 2, Item 3, Item 4" as bullet points
4. Place the cursor at the start of Item 4 (between the bullet and the letter 'I') and press backspace

Expected behaviour: List item 4 removes the bullet point, and continues to backspace normally until it joins the end of list item 3 and the rest of the bullet list remains in place (refer say the same behaviour in an email editor)

Actual behaviour: List item 4 is added to the end of whatever line of text preceeds the bullet list and the bullet items 1 through 3 are now presented in reverse order as paragraphs without bullet points

It would be nice to be able to provide a caption for images that are inserted. The caption would need to be part of the image area, as shown below.

You'll need to click the image to see a larger version, sorry.

I'm not sure of my availability, but I might be able to implement this, if you're accepting pull requests?

Hi JiHong88,

Can you add onchange event for auto update content?
onKeyUp event only track when I type. But I click toolbar button it can not track.

Another nice adjustment would be a Template button found in another project.

So you can define templates by action. For this an eventlistener would be nice to insert templates from other sources.

https://alex-d.github.io/Trumbowyg/demos/#plugins-template

i want to add rel='nofollow' button in link dialog javascript file. I tried to add it many time but only one of attribute work either nofollow or target.

I've seen this on a few other editors, but this one doesn't seem to support making an image linkable.

Is this something you can consider adding?

Is the Insert Line command not supposed to insert the line at the position of the cursor?

I was using your online demo to enter some text. I then placed the cursor on an empty line between two paragraphs and used the Insert Line command.

When the line was inserted it appeared below the 2nd line and not where my cursor was, which is what I would expect.

Currently, the editor inherits all CSS on the page where it is added. If shown in an "admin" area, it's possible some CSS will reach in to the editor causing undesired side-effects.

If you use an <iframe> for the editing area, you can get not only 1) better sandboxing, but also 2) full-page editing.

It would be cool to see this editor support full page editing, where it can accept a <!doctype html><html>...</html> value and preserve the entire structure.

Thank you for suneditor, it is lightweight, works on mobiles and includes many features!

While integrating it I spotted a few glitches, here they are:

• format" button (2nd left):
  • class should not be btn_size
  • typo, should read normal instead of nomal
• initialization with showTable: false currently results in an exception

Great work! Just discovered and started using it. By far the best vanilla JS-editor I have seen,
I noticed that onChange not fire when you empty the editor. For example by deleting all content using backspace. So the only choice is to hook into another event like onKeyUp. Not optimal for performance,

Hi.
Can you add new editor option to set params string for all youtube embed videos. It will be useful to have ability add something like "?rel=0&modestbranding=1" to embed videos.

It might be worthwhile to have a plugin that allows you to upload images to the server, instead of base64 encoding them directly into the editor, the later pick those images from a gallery.

This would be really useful when dealing with large images or when you have an image you want to reuse at a later point.

For this last use case, an example would be using SunEditor in a CMS and the user uploads some type of logo that they want to use on several pages. Instead of base64 encoding it into each page's content, I would upload it, then pick it from an Insert From Gallery dialog on later screens. It would then insert either the relative or absolute path of the image into the editor.

This would be a fairly significant changes since you'd need a way to upload to the server and a dialog that lets the user pick uploaded files from a gallery.

Thanks for the cool work!

I have tried installing suneditor with npm and use it in my Meteor app by importing it like

import { Template } from 'meteor/templating';

import 'suneditor/dist/css/suneditor.min.css';
import suneditor from 'suneditor';

Template.rich_text_editor.onRendered(function() {
  const editor = suneditor.create('sample');
});

But the project breaks on the browser (Chrome and Firefox) and I believe it breaks in the importing line.

This issue could not be related to suneditor but just wondering if you have any idea what the solution would be or if it's even meant to be working with Meteor?

Thank you!

I want to get value in sun editor. How

If I would like to get the values from Sun editor, how can I get the values and pass them to my back end with JavaScript ?

I've seen this in other editors, but it doesn't appear to be an option for SunEditor.

Having the ability to copy an image from some image editor app and paste it into SunEditor at the cursor position would be awesome.

This could be done as some sort of plugin, if SunEditor supports plugins?

Vue에서 쓸려고 하니 Image 삽입할려고 버튼누르자마자 Error가 발생합니다.

SunEditor.vue

<template lang="html">
  <textarea id="sample">Hi</textarea>
</template>

<script>
export default {
  mounted() {
    const suneditor = SUNEDITOR.create('sample',{
      width: '80%',
      height: '500px'
    });
  }
}
</script>

<style lang="css">
</style>

Hello.vue

<template lang="html">
  <div>
    <p class="text-info">Hello.vue</p>
    <SunEditor></SunEditor>
  </div>
</template>

<script>
import SunEditor from './SunEditor.vue'

export default {
  components : {
    SunEditor
  }
}
</script>

<style lang="css">
</style>

Erro Message in /src/suneditor.js

Hi,
I put source code button of editor to

 <div style="text-align:center;"><strong><span style="font-size:x-large;">Playmobil Fashion Boutique Carrying Case</span></strong></div>
<div style="text-align:center;"><strong><span style="font-size:x-large;">New Factory Sealed</span></strong></div>
<div style="text-align:center;"><strong><span style="font-size:x-large;"><br></span></strong></div>
<div style="textalign:center;"><strong><span style="font-size:x-large;">Ages 4+</span></strong></div>

and when click on editor i got this error which make all other scripts not work.

suneditor.min.js:1 Uncaught TypeError: Cannot read property '0' of null at Object._findButtonEffectTag (suneditor.min.js:1) at HTMLDivElement.onClick_wysiwyg (suneditor.min.js:1)

Have been trying to use in my classroom for example project.

Cannot for life of me get content to save to a text file which is loaded into a simple blog via PHP include (or file get contents)..

Would be be possible to bother you for working example? Simply need to save to a text (txt) file.

Thanks in advance.

Susan

Hi @JiHong88,

Just looking at the indentation functionality and found that when you put the cursor on the left side of a table and click indent it selects and indends all other content and not the table.

This might not be an issue in your original implementation as you had tables as full width. I've modified this slightly to allow table width to be auto, max-width 100 and set the cell width to a minimum. Tables now grow appropriately based on content. However, if the user wants to indent the table to align the content it wont indent (doesnt apply margin-left to tables).

Is there any change you might be able to make an update to apply the same margin to tables with the indent tool?

• Derrick

I'm trying to add Alt text option in image.js but whenever I add alt text it places it in place of image URL. Please help me to add alt text option in image dialogue properly

Is there a way of having relative links

e.g. /info/contactus

instead of it changing it to http://info/contactus

Thanks

Hi!

It is an simple and good editor.

Is it possible to change the function so that "Full Screen" can be used as "User Function"?

Thanks in advance.

Any chance of adding a feature to remove Word formatting like the following when pasting from Word?

<p class="MsoNormal"></p>

<o:p></o:p>

Issue:
Editor iframe document will not load custom local fonts.

Reproduce:
Include a local custom font in the page's root css, try applying styling to editor iframe document body.
(tested on Chrome 48.0.2564)

Fix:
Add js code for "sun_wysiwyg.contentWindow.document.head.innerHTML" style section update to include custom font definitions?

After entering some text I highlighted the last word and bolded it. I then placed my cursor at the end of the line and pressed enter.

When I started typing the next line was also bold, but I would think it should return to normal, since a new paragraph tag was completed.

Is this intended?