стиль textarea не представлен

Question

Я создал редактор текстовой области без использования каких-либо плагинов, только с полями выбора для font-family, font-size и font-color.

Он работает нормально, но дело в том, что происходитна все эффекты, которые я изменил?

Если я нажму на кнопку отправить, это сохранит в базе данных как: <p style="text-align: center;"><strong>Chethan K</strong></p>, но этого не происходит.Кто-нибудь может мне помочь?

Мой код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="Post" action="<?php echo site_url('Maincntrl/texta'); ?>">
  <select id="clr">
    <option>-Color-</option>
    <option value="black">black</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="red">red</option>
    <option value="gray">gray</option>
    <option value="blue">blue</option>
  </select>
  <select id="fs">
    <option>-Font-</option>
    <option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
  </select>
  <select id="size">
    <option>-Size-</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select> <br>
  <textarea name="texta" rows=5 cols="34" class="changeMe"></textarea>
  <p class="changeMe" name="texta"> </p>
  <div id="btns" style="text-align: center ; ">
    <button type="submit" class="btn btn-info">Save</button>
  </div>
</form>
<script>
  $("#fs").change(function() {
    //alert($(this).val());
    $('.changeMe').css("font-family", $(this).val());
  });

  $("#size").change(function() {
    $('.changeMe').css("font-size", $(this).val() + "px");
  });

  $("#clr").change(function() {
    $('.changeMe').css("color", $(this).val());
  });
</script>

Answer 1

Проблема здесь в том, что вы используете .css() в своих функциях…

.css() добавляет стилизацию для элемента, но ничего не добавляет внутри .

Вот фрагмент, в который я добавил утешение, когда вы нажимаете кнопку Сохранить :

$("#fs").change(function() {
  $('.changeMe').css("font-family", $(this).val());
});
$("#size").change(function() {
  $('.changeMe').css("font-size", $(this).val() + "px");
});
$("#clr").change(function() {
  $('.changeMe').css("color", $(this).val());
});

// TAKIT: Added this for testing purpose
$("#myform").submit(function(event) {
  event.preventDefault();
  console.log("Value of textarea:\n  '" + $("textarea[name=texta]").val() + "'");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="Post" action="#">
  <select id="clr">
    <option>-Color-</option>
    <option value="black">black</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="red">red</option>
    <option value="gray">gray</option>
    <option value="blue">blue</option>
  </select>
  <select id="fs">
    <option>-Font-</option>
    <option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
  </select>
  <select id="size">
    <option>-Size-</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
  </select> <br>
  <textarea name="texta" rows=5 cols="34" class="changeMe"></textarea>
  <p class="changeMe" name="texta"> </p>
  <!--div id="btns" style="text-align: center ; "-->
    <button type="submit" class="btn btn-info">Save</button>
  <!--/div-->
</form>

⋅ ⋅ ⋅

Теперь я думаю, я понимаю, почему вы использовали <p class="changeMe" name="texta"> </p>.
Но проблема в том, что выиметь два раза одинаковые name="texta".

Я внес следующие изменения:

• Поскольку вы можете публиковать только значения элементов формы, я изменил ваш p на input.Вы можете использовать type=hidden на нем, но я использовал disabled, чтобы мы могли видеть его значение.
• Добавил атрибут class="selector" и "prop" в ваши select s, чтобы упростить ваш код.
• Добавлены value="" для параметров по умолчанию.

Вот последний фрагмент:

$(".selector").change(function() {
  // Apply each select on the textarea
  $(".selector").each(function(i, elm) {
    $('.changeMe').css($(elm).attr('prop'), $(elm).val());
  });
  // Copy style of the textarea in our input using a span element
  $("[name=textstyle]").val($('.changeMe').attr('style'));
});

// TAKIT: Added this for testing purpose
$("#myform").submit(function(event) {
  event.preventDefault();
  console.log("Submitted:");
  console.log("  textstyle: '" + $("[name=textstyle]").val() + "'");
  console.log("  texta: '" + $("[name=texta]").val() + "'");
});

textarea {
  resize: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="Post" action="#">
  <select class="selector" prop="color">
    <option value="">-Color-</option>
    <option value="black">black</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="red">red</option>
    <option value="gray">gray</option>
    <option value="blue">blue</option>
  </select>
  <select class="selector" prop="font-family">
    <option value="">-Font-</option>
    <option value="arial">Arial</option>
    <option value="verdana">Verdana</option>
    <option value="impact">Impact</option>
    <option value="'ms comic sans'">MS Comic Sans</option>
  </select>
  <select class="selector" prop="font-size">
    <option value="">-Size-</option>
    <option value="5px">5</option>
    <option value="10px">10</option>
    <option value="15px">15</option>
    <option value="20px">20</option>
  </select> <br>
  <textarea name="texta" rows=5 cols="34" class="changeMe"></textarea>
  <!-- I propose you the following here: -->
  <br><input name="textstyle" disabled />
  <!--div id="btns" style="text-align: center ; "-->
  <button type="submit" class="btn btn-info">Save</button>
  <!--/div-->
</form>

Затем, на стороне сервера, вы получаете и name с и делаете свое дело.

Надеюсь, это поможет.