Как добавить редактор HTML-сайта

Question

Скажем, у меня есть этот HTML код

<div id="main"> 

     <h1 id="firstHeading">Page Title</h1> 
     <p>Hello123 this is a paragraph</p> 

     <div id="rightSideInfo"> 
      <h1 id="rightTitle">Right Title</h1> 
     </div> 

    </div> 

то, что я хочу для тех, кто посещает страницу, чтобы быть в состоянии нажать определенную кнопку редактирования и изменения текста внутри H1 и P, например. Кроме того, если это возможно, есть ли способ для меня (администратора) легко отключить все кнопки редактирования? Поэтому я могу контролировать, когда пользователь может редактировать.

Answer 1

Для этого вам необходимо создать редактор. Я думаю, вы видели таких редакторов внутри некоторых учебных сайтов. Ну, они не встраиваются. Кто-то должен написать их, как веб-приложение.

Изучает javascript и html frames. Вы создаете такой редактор, позволяя посетителю запускать его код, генерируя требуемый html-файл и вставляя его в окно результатов с фреймом html.

Для этой реализации может потребоваться использование сервера, особенно если вы хотите сохранить код и сгенерировать файлы на своем компьютере. Для этого вам понадобится python или php.

В качестве альтернативы вы можете использовать редактор с открытым исходным кодом. Просто Google это, потому что список обновляется и обновляется довольно скоро. Что-то вроде «в редакторе html сайта» должно выполнять эту работу. И многие такие редакторы появляются как встроенные, означает, что вы просто включаете их в качестве html-фрейма, и они сами делают магию (некоторые из них будут предлагать API для определенных функций, как предварительно вставленный текст и т. Д.)

Также обратите внимание, что html который показан пользователю, является просто графическим дисплеем. Большинство современных браузеров позволяют редактировать html со встроенными средствами браузера, такими как F12 в хроме и т. Д. Таким образом, вы никогда не сможете ограничить пользователей редактированием того, что они видят. Вы можете только предоставить их своим содержимым и веб-страницей, с которой они могут взаимодействовать, но то, что они со временем видят, зависит от них.

Answer 2

На ваш вопрос две составляющие 1. Onclick элементов h1 и p tag, которые вы хотите пользователь для редактирования h1. Это может быть сделано путем добавления обработчика щелчка и замены h1/р тег с полем ввода

$("#firstHeading").click(function() { 
    // code to add h1 text to input box 
    }); 

2. Вторая часть отключить все кнопки редактирования как редактирования. Это может быть сделано путем добавления класса кнопки для редактирования и добавлений обработчика щелчка, чтобы отключить поле ввода

$('.edit-button').on('click',function() { 
    $('.edit-button').prop("disabled",true); 
}); 

Надеется, что это помогает