богатый текстовый редактор для настраиваемого поля cms

Question

Да, я знаю, что этот вопрос был спрошен до смерти .. пожалуйста, несите меня.

Я просто хочу простое поле в пользовательской CMS, чтобы действовать разумно, чтобы непрофессионал вводил данные, не позволяя им перепроектировать их сайт.

Все, что на самом деле означает текстовое поле, которое изящно обрабатывает специальные символы и все нежелательные файлы, скопированные из слова MS и тому подобное.

Мне нравится сохранять четкое разделение между контентом и презентацией, поэтому не нужно использовать все параметры форматирования во всех редакторах больших имен wysiwyg. Мое правило в основном состоит в том, что он поставляется с панелью инструментов. И я не прошу моих клиентов узнать уценку.

Было бы неплохо, если бы он невидимо добавил абзацы и разрывы строк там, где они принадлежат. Но это для короткого описательного текста, может быть, 100 слов, а не для написания документов, поэтому даже это необязательно.

У меня возникает соблазн снова изобрести колесо ... но хотя я сначала задал вопрос. Кто-нибудь уже сделал один из них?

Спасибо.

Answer 1

Самый распространенный способ, вероятно, TinyMCE, но почему бы не продолжить руководство SO и использовать WMD?

Answer 2

Вы можете использовать EasyEditor его очень простой и прямой, также гибкий для пользовательского использования.

HTML:

<form action="" id="myform" class="demo-form"> 
    <label for="title">Title</label> 
    <input type="text" id="title" placeholder="Enter title"> 

    <label for="description">Description</label> 
    <textarea name="description" id="description" rows="10" placeholder="Enter article body"></textarea> 

    <button type="submit" class="btn">Save article</button> 
</form> 

CSS:

<link rel="stylesheet" href="path_to/easyeditor.css"> 

JS:

<script src="path_to/jquery.min.js"></script> 
<script src="path_to/easyeditor.js"></script> 

<script> 
    jQuery(document).ready(function($) { 
     new EasyEditor({ 
      element: '#description' 
     }); 
    }); 
</script> 

Больше примеров here