首页 > 解决方案 > 带有一些编辑选项的文本区域

问题描述

我的网站需要一个简单的文本编辑器,只有以下选项:
- 有序列表和无序列表
- 标题或粗体字符
- 水平线

有没有办法在现有textarea标签内通过编码获得上述内容

我尝试使用contentEditablediv 但那里有很多问题,例如return更改前面文本的格式等等。

标签: javascripthtmltext-editor

解决方案


您可以使用ckeditor,它非常简单且可自定义

https://ckeditor.com/ckeditor-5/

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/11.0.1/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <textarea name="content" id="editor">
        &lt;p&gt;This is some sample content.&lt;/p&gt;
    </textarea>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>


推荐阅读